1. 业务场景

电商网站会有大量的产品图片上传，我们选择将图片存储在OSS上以节省成本，在这个基础上使用CDN进行加速，提高用户的访问速度和站点的稳定性，同时CDN在流量计费方便面也比OSS更节省成本。

CDN提供的监控查询、运营报表功能可帮助我们分析网站的访问PV、UV以及区域分布等，可帮助电商分析流量走势，方便调整策略。

2. 准备内容

• 开通 OSS、CDN

• 可访问的站点

• 推荐组合使用流量包：CDN静态HTTPS请求包、CDN下行流量（中国内地）、对象存储OSS资源包（包月）-标准存储包（中国内地）

3. 操作步骤

3.1 CDN添加访问域名

• 加速域名填写你的图片文件访问域名，如：img.{domain}.com

• 业务类型选择图片小文件，这样可以包括一些图片、js、css等这些小文件都可以进行加速

• 新增源站信息选择OSS域名，在域名下拉选项中选择你要加速的Bucket，端口号，如果希望使用更安全的传输，可以选择443使用https，但这也会增加OSS的回源流量。

 

3.2 域名解析

• 创建成功后，CDN会自动分配一个CNAME，点击“管理”，在基本配置模块，复制CNAME

• 登录到域名解析控制台，此处我使用的是阿里云的域名服务，域名服务控制台

• 点击对应的域名进入详情，在左侧导航点击域名解析

• 在解析设置模块点击添加记录

• 记录类型选择CNAME，主机记录填入第一步CDN创建的域名，将复制的CNAME填入记录值处，点击确认

到此，即完成了CDN加速OSS上存储文件资源的基本分发配置。后续几点介绍大家可按需使用。

3.3 CDN缓存配置

如果我们的OSS上不仅存储有图片资源，还有其他的比如word、excel等资源，但是我们仅仅想对图片资源进行加速，那么我们可以使用缓存配置来实现。

• 进入缓存配置模块，点击添加

• 类型可选择目录或者文件后缀名，此处我们选择文件后缀名，输入想要缓存的文件后缀

• 设置过期时间，如果你的文件不经常改动，可以设置的稍微长一些，这样可以减少回源流量

• 把权重设置到最大：99

 

3.4 CDN刷新

如果你的资源需要更新，除了OSS上对资源进行更新外，还需要进行CDN刷新。举个例子，一个使用Vue开发的前端项目，在打包后会产生很多的CSS、JS，中间还会夹杂一些图片在包中，我们会给这样的项目进行CDN缓存。当发布时如果改动了某个图片，发布成功后，用户访问站点时会发现是老的图片，此时会指导用户清除浏览器缓存，但是清除后发现图片还是老的，这时候就可以判定为CDN缓存的问题了，我们只需要拿到这个图片的访问地址进行CDN刷新即可。操作步骤如下：

• 打开CDN刷新控制台

• 操作类型，选择刷新

• 如果是单独几个文件，操作方式可使用 URL 的方式刷新，如果是集中一个目录下的，可选择目录方式

示例：

上传一张图片 _MG_0090.jpg 到OSS并缓存在CDN一个月（按照30天计算为2592000秒），浏览器访问可得到以下信息：

我们修改图片重新上传后刷新CDN缓存后重新访问：

 

可以看到，响应头中的 last-modified 时间发生了变化，同时我们访问的图片也变成了最新的。相应头中的 x-swift-cachetime 代表着文件在CDN的缓存时间，单位为秒。

3.5 CDN性能优化

在性能优化这块我用的比较多的主要是页面优化、Brotli压缩和图像处理。

1）页面优化

如果你缓存的文件含有css、js文件，那么在性能优化里的页面优化可以打开HTML优化、CSS优化、JavaScript优化。开启后CDN会自动删除注释、空白符等冗余的内容实现文件瘦身。使用页面优化时，一般针对网站上的资源比较多，OSS上会较少。以下示例对网站的html文件缓存进行优化。

• 首先在站点的访问路径下创建一个大小为 208K 的 test.html 文件，在未接入CDN的情况下浏览器访问：

• 将网站接入CDN，但不开启页面优化后再次访问并查看源码：

   

这里需要说明的是，接入CDN后第一次访问时会发现响应时间变长，这是因为本身CDN去回源时需要时间，但一旦缓存到CDN，后续的访问响应时间都会大大缩短，上图即为缓存后的访问。

• 打开页面优化的三个按钮，刷新资源后，再次访问并查看源码：

   

从响应结果可以看出，文件的大小变小，通过查看源码之前的CSS、JS、Html的注释代码都被删除了。

2）Brotli压缩

Brotli压缩开启后页面优化即使打开也不会生效，我们看下效果：

 

相对于页面优化，Brotli的压缩能力更强，压缩了70% 左右。与页面优化不同的是虽然文件大小变小，但是在源码上注释的代码并没被删除。

在使用上，如果源站已经做了压缩，比如一些图片和视频资源这时候Brotli的压缩功能将不会生效，这类资源建议使用下面的图像处理或者OSS的图像处理解决。

3）图像处理

性能优化里有个图像处理，可以帮助你的图片瘦身。可以根据自己的需要设置瘦身后的百分比，需要注意的是，开启这个功能后会影响图片的分辨率，如果你对图片的要求比较高，建议不要使用这个功能。

示例：

我们上传一张 1.3M 的图片到OSS中，在不开启图片处理的情况下访问：

开启图像处理，支持转换的图片类型选择 JPEG ，图片自动瘦身填写90%，再次访问：

此时，我们发现大小变小了，但是时间却变高了，这个主要原因是我们开启图片处理后在第一次访问时需要进行处理，但是当二次访问时，就会发现时间会大幅缩短：

如果不开启CDN的图像处理那么怎么做优化呢？我们可以使用OSS的图片处理功能，比如我希望我的列表页面图片不展示原图，否则会消耗比较大的流量，尤其是在手机端，我希望展示只有30x30px的大小，那么可以进行下面的操作：

• 进入OSS控制台，点击进入图片处理的Bucket

• 左侧导航栏选择：数据处理>图片处理

• 点击新建样式，输入规则名称，我通常会以图片的尺寸作为名称

• 在缩略中选择等比例缩小，数值为30

 

访问图片的方式为： https://img.{domain}.com/{your image path}?x-oss-process=style/30x30px

以下为使用oss图片处理前后加载的对比图：

 

可以看到大小、时间都有了明显的缩短。

3.6 CDN运营报表

我们可以通过 日志管理>运营报表 来分析网站的访问情况，比如：PV/UV、用户访问地区、热门访问URL等。默认运营报表是不开启的，我们需要手动打开，在报表内容上选择需要的即可。

电商网站可以通过Referer报表来分析广告投放的效果，流量高的说明广告渠道较好，流量低的可暂停投放。

3.7 CDN监控查询

监控查询中的资源监控提供了流量带宽、回源统计、访问次数、命中率等报表功能，并且支持导出。个人比较喜欢流量带宽中的对比功能，通过选取不同的时间区间，可以对比看出这两个时间段的流量情况，比较方便观测站点广告投放和运营的情况。

4. 价格

4.1 OSS流量计费

4.2 CDN计费

CDN提供了两种计费方式:按峰值带宽和按流量，计费价格如下：

 

如果你的站点流量不大，使用流量计费并且开启了https，那么除了会产生上面的流量费用外，还会产生https的请求费用，这里推荐大家使用CDN静态HTTPS请求包、CDN下行流量（中国内地）这两个资源包。下行流量100G一般是18元（0.18元/G），1000W次的https请求包价格36元，有效期都可以选择1年。

可以看出，除了CDN回源计费外，CDN的价格会更便宜一些，所以对于不常变更的资源可以设置CDN的缓存时间尽可能长一些，并且对于较大的图片进行一些压缩处理后会更节省成本。

以上两种计费方式哪一种更适合你，大家可以登录CDN控制台看下你的流量和带宽是怎样的，然后根据自己的情况选择合适的计费方式。

5. 结语

以上即为CDN加速OSS存储资源的内容，总体来说还是比较方便的，希望大家能找到适合的方式为自己的网站加速。

作者：Jillian，南京某科技公司技术负责人