小网站静态资源CDN加速实践记录

1.前言

我这边会涉及到的前端应用场景大部分是比较简单的。需要服务器动态计算的数据特别少，对于我们的乞丐服务器来说，如何优化静态文件的传输，减少带宽使用是降低成本的核心。虽然CDN的名气更大，其实对于地方性的小网站来说，对象存储已经能够满足需要。当然最完整的静态文件的加速方案应该是将[对象存储]和[CDN]两个模块结合起来用。根据我对阿里云、腾讯云和七牛云的使用感觉，对于小公司来说，这三个中七牛云绝对是最友好的选择。

2.为什么要用对象存储

对于小网站来说，带宽的痛点需要如何解决呢？我觉得对象存储是一个不错的解决方案。奇怪的是各大云平台似乎不太推广这个业务（个人感觉，或许是因为前司的关系让我更关注CDN这个业务），可能因为这个业务成本高利润还低吧。对象存储相当于是网站的云盘，将你的静态文件全部上传到云盘后，云盘可以已最低成本为你提供你要的带宽（我猜测这个产品定价低的原因是因为你和别人拼单用了一个高存储空间低处理性能的服务器）。即使是我个人觉得什么都比别人贵的阿里云每个月每G也只要1毛2（2021年7月15日资费），对比带宽费，这个简直是九牛一毛了。

而我的乞丐服务器的临时带宽呢？一个星期的10M带宽就要116.93元。

如下图，同一个3M的MP3文件，通过七牛云下载（左）和通过我的乞丐服务器下载（右）的时间差。也就说，通过对象存储，我们基本上可以白嫖到10M左右的带宽，这个带宽每月最贵只要1毛二/G。

那为什么我会推荐七牛呢，如下图所示，10G空间对于一个小网站来说已经是非常大了。我觉得我是可以白嫖七牛的，但是出于支持他的缘故我又给我的静态资源上了个CDN的业务，给七牛交点保护费。

3.为什么要用CDN

我在这里就不在详述啥是CDN。简单来说，CDN就是运用京东的物流模式来打淘宝，运用就近仓库的模式来获取更快的响应速度。
其实我们更需要的是对象存储服务而不是CDN，但是两个东西结合起来用我们就可以使静态加速获取到最佳效果（对于请求来自全国各地的网站来说尤甚）。为啥？CDN加速的一个最大的问题就是命中率，CDN的想法是好的，可是万事万物都有成本，边缘节点的存储空间也是有限的，对于小网站来说，访问量小了肯定容易被其他访问量大的文件盖过去。同时，说实话我不太理解阿里云和腾讯云的CDN的识别方式，当我用react的时候，那个命中率简直是低的离谱，还是在我预热了链接之后。
那这两个东西结合后解决了什么问题呢？白嫖了一个高级源站！以我用七牛为例，当命中失败的时候，他回源回去找对象存储的磁盘，也就是我白嫖的空间，这样的好处是即使回源了，我们的速度也不会慢到离谱，这样就不会出现命中的时候用户觉得很流畅，没命中的时候用户觉得很便秘的问题。

同时，CDN的资费也是比提升带宽要低很多的。我们以2021年7月15日的阿里云的CDN的活动资费为例，作为小网站只要成本83.6+35.2（HTTPS还需要另外买请求次数）就可以享受阿里云为你提供的半年内500G1000万次超大带宽静态文件加速服务。

借用天翼云的图介绍CDN和对象存储的逻辑关系。

4.七牛云的使用

进来之后找到我们的两个主角。

进来之后创建一个空间，一个空间就相当于一个盘。

进到空间里面呢，就进来设置一下域名，刚创建空间的时候他会给你一个30天的临时域名作为测试你可以先用。这个自定义源站域名就是我们的网盘访问地址啦，如果不用CDN的话就只设置这个就好。如果要搭配CDN使用的时候，再来配置CDN域名。

然后进入文件管理，只要在这里上传文件就可以了。
这里吐槽一下七牛的这个存储对象的文件管理，这个文件管理如果能增加一个类似文件夹的层级那管理起来会方便很多，不像现在所有文件都在同一个页面，文件多了很难管理。所以需要在右侧这个设置路径前缀这里给他设置一下，然后再来上传文件，不然感觉很容易重名。
UPDATE 20210717:https://developer.qiniu.com/kodo/5972/kodo-browser
错怪七牛了，有一个图形化工具进行文件管理。啊，帮大忙了。七牛yyds

上传完文件就可以在这里复制文件的外链，有了外链你就可以在你的网站上享受静态文件加速了。
我是llsxily，你可以叫我橘子。我觉得这个文章还没结束，还有很多需要慢慢补充的，我们回头再见。