静态CDN服务

一、服务介绍

1.CDN简介

CDN（Content Delivery Network）内容分发网络，将网站内容发布到最接近用户的边缘节点，使网民可就近取得所需内容，有效解决互联网网络拥塞状况，提高网民访问的响应速度和成功率。静态CDN服务以图片、页面、js、css、大文件安装包等静态文件加速为主。

内容分发网络.jpg

2.CDN解决哪些问题

1）解决由于地域、带宽、运营商接入等问题带来的跨网访问问题

2）结合DNS调度系统，将用户的请求分配至最适合他的节点，提升用户的访问速度

3）中心节点收敛回源，降低回源且提升命中率，减轻源站压力

4）隐藏源站，提供大带宽接入，降低源站被攻击的风险

5）提供存储方案，解决业务线文件存放问题

二、基本概念

1. 域名 ：

使用静态CDN服务的域名，一个域名的目的是便于记忆和沟通的一组服务器的地址（网站，电子邮件，FTP等）

2. CNAME

CNAME记录是指域名解析中的别名记录（Canonical Name ）

业务线在提交域名后，CDN运维会默认为这个域名提供一条CNAME域名，业务线需要提交域名变更工单，将域名的CNAME记录指向这个CNAME域名，记录生效后，域名的所有请求都会转向CDN节点，上线完成

3. DNS

Domain Name System，域名系统，完成域名到IP地址的映射，这个过程叫做域名解析。

4. 静态缓存：

也称为静态cache、边缘节点、CDN节点等，是距离最终用户接入具有较少的中间环节的网络节点，其作用是将静态内容保存在静态CDN专用cache设备上，以此来提高最终接入用户的网站访问的速度和质量

5. 二级静态缓存：

位于静态缓存和源站之间的缓存节点，二级静态缓存和源站之间一般有比较好的链路（专线），可以解决静态缓存节点就近回源问题，避免跨运营商回源。部分业务未使用二级静态缓存

6. 源站：

为静态缓存节点提供原始数据的服务器或者集群。源站类型分为业务线源站、CDN存储、OSS（暂未支持）。

7.回源：

静态缓存节点上线之初是无缓存数据的，需要从源站拉取数据，这个过程叫做回源，回源过程是用户访问被动触发的。

8.LDNS：

Local DNS，是客户端网络设置的一部分，要么是手工配置，要么从DHCP（动态主机设定）得到。一般local dns 在从网络上靠近客户端。用户访问一个域名，浏览器会按照分配的local DNS发起DNS迭代查询，最后向域名的权威服务器查询。

三、缓存管理

1. 缓存刷新&预加载

1）缓存刷新：是指当出现同名文件更新时，快速清除掉CDN节点上的旧文件，而不必等待CDN的过期时间

2）缓存预加载：是指提前将热点文件推倒CDN边缘节点，加速用户访问过程，一般提前1-2小时，提前太早可能会被CDN节点的热点淘汰算法删除

2. 版本

1）js ,CSS 手动添加

<script src="../Scripts/xxx.js?v=131559771981760542"></script>

这种做法适合小项目，改几个文件就可以。

2）webpack打包工具：
找到webpack .prod.conf.js文件：

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      // Setting the following option to `false` will not extract CSS from codesplit chunks.
      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
      allChunks: true,
    }),