给应用添加cdn加速服务（阿里云）

老样子我们还是从是什么，为什么，怎么用三个方面来谈谈对cdn的认识,首先我们可以确定的是cdn是属于应用（网站，后台管理，app，小程序）的优化范畴。

CDN的全称是Content Delivery Network，即[内容分发网络]。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

提高应用访问速度

以阿里云的服务为例子截图走流程讲解

（1）登陆阿里云，搜索CDN，进入模块第一次需要开通一下，然后进入CDN控制台

（2）CDN控制台-域名管理-添加域名

加速域名就是你网站的域名暂且后文都用 www.aaa.com 代替

大概等待几分钟状态变成“正常运行”即可进行下一步

（3）添加cname解析

做cname解析之前需要把 www.aaa.com 的域名的A记录删掉（因为一个域名只能做一个A记录或者一个cname）我们把A记录删掉换成cname解析，cname记录值就是下面截图的方框里面的复制即可

（4）核验是否成功，ping www.aaa.com 绿色处显示出来的是那个cname值就证明cdn已经配置好了

(5)最后提醒一点如果你的站点是HTTPS的需要在CDN这块也上传证书并且之前选的是443端口，如果是你的应用是http的那之前就选80端口

（6）再补充一点那就是开启CDN之后想改网站内容可能不生效因为已经缓存到节点上了，所以确保已经不再改需求了再加CDN；或者配置下CDN缓存策略

阿里云配置CDN缓存策略教程

辅助——阿里云CDN视频教程

cdn加速是实现加速访问速度。

特点是有助于减轻源站压力，提高访问速度，隐藏源服务器等。

蔚可云cdn加速具备的特点：

1、速度快

使用BGP线路作为CDN节点，保证了CDN读取原始数据时的速度问题。

2、带宽成本大幅度降低

因为70%的电信客户访问速度本身就很快，不需要加速，这部分流量完全节省了。只对25%左右的网通客户加速。

3、安全性好

用户原有的服务器与CDN加速各节点间采用加密压缩传输，节点服务器中的网站以文件形式存在。即便节点服务器被入侵，黑客也获取不到任何有价值的数据。

4、可靠性高

在CDN加速体系中，任何一个节点服务器网络中断、被攻击瘫痪或者系统崩溃，并不妨碍整体网络的运行和绝大多数用户的访问。系统可以自动判断、引导用户至剩余节点中访问速度最快的节点。

5、部署便捷

只需要修改域名解析记录至指定的别名，不需要任何其他操作。

前两篇文章给大家分享了 如何在 Github 部署网页 以及 给网页上自定义域名 ，相信很多人就算不看我这两篇分享，也能部署自定义域名的 Github 网页。然而，很快又会被 Github 那拉跨的网速劝退。

我在 Github 上随便找了个 http://blesstosam.github.io/ 的网页测了一下速度，好家伙，大半个中国都访问不了， 点击这里查看详情 。

全是红色，吓死个人儿。再给大家看看上了 CDN 的速度如何：

虽然有的时候访问还不太行，但是整体情况比上面 彳亍 了不少。

由于 Github 服务器在国外，本来信息传递就很慢，再加上某些原因，有的时候甚至连打开都费劲。

那用国外 CDN 如何呢？Emmm，我去 AWS 搞了一下，说实话没太搞懂，而且现在账号都没怎么用了，还处于欠费还钱的状态。。。

我自己刚接触国内 CDN 的时候发现：

什...么？使用国内 CDN 只能给国内域名使用？

什...么？买了国内的域名还要备案？

什...么？备案前还要先租 3 个月的服务器？

草（一种植物），我 TMD 还没开始配置呢，就得花 200 租个服务器？怕我自己不是个憨憨，白嫖失败。

不过，最近发现腾讯云上也可以给国外的域名上 CDN 了，就来分享一波吧。

开始前，希望 xdm 准备好以下东西：

简单过一下 CDN 的原理，CDN 原名叫 内容分发网络 。

为啥叫 内容分发 呢？如果一个快递从黑龙江送到海南，大概需要 45 个小时。

京东 的思路就不一样了：我先把大量的货物都放到海南的一个仓库里，当有人下单后，可以直接从海南的小仓库直接发货，这就能大大减少交货时间，整个框架就是 内容分发网络 。

从上面可以看出 CDN 两大特点：

不知道大家有没有想到这个问题：如果 CDN 做了缓存，那么，就算我发布新版本，CDN 缓存还是旧的文件，用户依然只能看到旧页面。

事实上，无论是 React 还是 Vue 项目，在打包之后，都会将 js，css 的文件名存为 [contenthash].js 和 [contenthash].css ，其中， contenthash 就是整个文件内容的 hash 值。

只要文件内容一变，那么 contenthash 值就会变，会在 CDN 上新上传一份 css 或 js 文件，而且 index.html 引用的 css 和 js 资源路径也会跟着变，这就解决了每次发布都不能覆盖上个版本的问题了。

可能有人的又会问了： “ contenthash 值一样，不怕文件被覆盖么？” 。 contenthash 值一样说明了文件的内容是一样的，就算被覆盖了也是被同样的内容覆盖，所以文件覆盖不是问题。

还会有人问： “如果我的文件改一个字，就发布一次，每次发布都会发一个新 js 或 css 文件，那 CDN 上的资源不是会变得越来越多？” 。确实会有这个问题，不过 CDN 的资源空间理论上是无限的，而且 js 和 css 一般不会占很大空间，你也不能一天发 100 个版本吧？就算存储空间不足，让运维去扩充空间就好了。

这里要注意：不能把 index.html 打包成 [contenthash].html ，因为 Github 要求我们分支上的 html 文件只能叫 index.html ，而同名文件放在 CDN 上又会有上面缓存不更新的问题，所以只有 css 和 js 等静态资源是需要 CDN 缓存的，而 html 是不能缓存的。

总的来说，我们的架构要从这样：

变成这样：

在 DNS 到 Github 之间多了个 CDN 服务器。

首先， 点击： https://console.cloud.tencent.com/cdn 进入 CDN（内容分发网络） 的控制台。

点击 域名管理 ->添加域名 。

然后在 域名配置 选 中国境外 ，填上你的域名，然后选择 静态加速 。

其实 CDN 只是个中间商，本质上是作为中间站转发，所以这里要配置源站的 IP 地址，也就是缓存的 html, css, js 要从哪里获取。因为我们是将网页部署在 Github 上的，所以这里要填入 Github 提供的 4 个 A 记录。

这里不要选择 HTTPS，因为如果使用了 CDN 回源访问之后，Github 自己是检测不出来的，然后也不会给你自动配置 HTTPS，所以千万不要选 HTTPS！通过 HTTP 才能正常回源访问 Github 源网站。

还记得我们刚说不要把 index.html 也缓存了么，不然部署后看到还是上一个版本的 html。所以，在服务配置里的 缓存行为-不缓存 里添加 html 的后缀。

同时，你还可以选择 节点缓存 和 浏览器缓存 ：

浏览器缓存 好处是可以节省 CDN 上的流量（对，流量也是要钱的，虽然不多），坏处也很明显，万万万一你要真的进行内容刷新，那么用户访问的有可能还是以前的版本。

这里大家按自己的情况来选择就好了，我这里只加了节点 2 天的缓存就够了。

最后点击提交。

给个人网页上 HTTPS 是很有必要的，不然别人进你的网页，浏览器还弹出 “您访问的网站不安全” 就显得有点业余。所以，这一步来给我们的域名上 SSL 证书。

在原来的 内容分发网络控制台 点击 证书管理 创建一个证书。

进入配置页后，先填入你的域名，再选择证书。

相信大部分人刚开始是没有 腾讯云托管证书 的，所以点一下上面的 SSL 证书管理 进入管理页面，再点击申请免费证书（白嫖）：

然后一步步去填内容就好：

注意，在第三步这里，需要验证你的域名合法性，需要在 NameSilo 上添加一条 TXT 记录。

添加后会是这样（你也可以等到下一步配置 NameSilo 时再添加 TXT 记录，然后再继续下面的步骤）：

当验证通过后，就可以给自己的域名颁发证书了。

最后一步，回到 内容分发网络 ，在 配置证书 里绑定刚刚的证书，这样我们的 CDN 也可以拥有 HTTPS 啦。

回到 域名管理 可以发现 CDN 给我们提供了一个 CNAME：

只要将 DNS 的 CNAME 指向 CDN 的 CNAME，那么整条访问链路就被我们串起来了。

打开 NameSilo 的 域名管理页面 ：

进入域名详情页后，在 左上角的 DNS Records 点击 Update （这个配置页面是真的难找啊）：

然后点击 CNAME 添加两个 CNAME 记录， value 处填刚刚从腾讯云获取的 CDN 的 CNAME 。

然后，去买杯咖啡，看看 B 站，等一小时后，前往你的域名看看吧。

总结一下，我们这里做了什么：

相信配置完这一套，你的网站访问速度会比以前快不少。

如果觉得这篇文章能帮到大家，可以点个赞再走咯~

---