使用CDN加速OSS上的图片资源分发

业务场景

您在运营电商网站时除了需要上传和下载大量的产品图片，还需要保障所有用户能够流畅地访问网站。此时您可以将图片存储在OSS上以节省成本，同时，为提高访问速度和网站的稳定性，降低流量计费，您可以使用CDN进行加速。

使用CDN加速OSS上图片资源分发的业务价值和优势如下：

• 使用CDN流量，单价低于直接访问OSS产生的外网流出流量。
• 用户从距离客户端最近的CDN节点获取资源，减少网络传输距离，保证静态资源传输质量。
• CDN产品提供的监控查询、运营报表功能可分析网站的访问PV、UV以及区域分布等，帮助您分析流量走势、调整策略。

前提条件

• 已完成阿里云账号注册和实名认证。
• 已开通CDN服务，已开通OSS服务。
• 准备可访问的站点。

步骤一：添加加速域名

1. 登录CDN控制台。
2. 在左侧导航栏，选择域名管理，单击添加域名，完成以下参数配置。
   • 加速域名：image.example.com
   • 业务类型：图片小文件
   • 加速区域：仅中国内地

   
3. 单击新增源站信息，配置源站。
   源站信息选择OSS域名，并在下方的域名输入框中直接选择同账号下的OSS Bucket，其他参数保持默认值即可。

   说明 如果希望使用更安全的传输，可以选择443端口使用HTTPS协议，此操作会增加OSS的回源流量。

   
4. 完成源站配置后，单击下一步。
5. 等待人工审核。
   说明 如果您的加速域名无需人工审核，将直接进入下一个配置环节，您可根据实际业务需求，完成推荐配置。

   审核通过后，域名状态显示为正常运行，表示添加成功。

6. 等到域名状态为正常运行时，会显示加速域名的CNAME值，本场景示例为image.example.com.w.kunlunsl.com。

步骤二：配置CNAME

您需要在域名解析服务商处将加速域名的DNS解析记录指向CNAME域名，访问请求才能转发到CDN节点上，从而实现CDN加速。

以DNS解析服务商是阿里云为例，为您介绍CNAME配置方法。具体操作和其他配置方式请参见配置CNAME。

1. 使用加速域名所在的阿里云账号，前往云解析DNS控制台的域名解析。
2. 在左侧导航栏单击域名解析，找到您的域名，在域名右侧单击解析设置。
3. 单击添加记录，添加CNAME记录。
   • 记录类型：CNAME
   • 主机记录：image
   • 记录值：输入步骤6中查到的CNAME值image.example.com.w.kunlunsl.com。
   • 其他参数保持默认值即可。
4. 单击确认。

配置CDN缓存

由于OSS的存储节点无法覆盖全球的各个区域，为了保证您能够顺畅地访问到OSS上存储的图片资源，您可以通过CDN缓存配置来实现对图片资源进行加速。

1. 登录CDN控制台。
2. 在左侧导航栏，单击域名管理。
3. 在域名管理页面，单击目标域名对应的管理。
   
4. 在指定域名的左侧导航栏，单击缓存配置。
5. 在缓存过期时间页签下，单击添加。
6. 在添加缓存过期时间对话框，配置缓存规则。
   • 类型：文件后缀名
   • 后缀名：输入您希望缓存的文件后缀名，本场景示例为JPG、JPEG和PNG格式文件。
   • 过期时间：如果您的资源为不常更新的静态文件（例如图片类型、应用下载类型等），建议设置1个月以上，这样可以减少回源流量。
   • 权重：99

   
7. 单击确定。

（可选）刷新CDN缓存

如果您的资源需要更新，除了在OSS上对资源进行更新，还需要在CDN上刷新缓存。

例如，一个使用Vue开发的前端项目，在打包后会产生很多CSS、JS以及一些图片。如果在发布时改动了某个图片，发布成功后，您访问站点时会发现是旧的图片。如果清除浏览器缓存后发现仍是旧图片，则可以判定为CDN未刷新缓存。此时需要获取该图片的访问地址进行CDN刷新即可。

1. 登录CDN控制台。
2. 在左侧导航栏单击刷新预热。
3. 在刷新缓存/预热缓存页签，配置刷新规则。
   • 操作类型：刷新
   • 操作方式：URL
   • URL：输入您希望刷新的图片访问地址。

   

示例

1. 上传一张图片（_MG_0090.jpg）到OSS，并缓存在CDN一个月（按照30天计算为2592000秒），使用浏览器访问可得到以下信息。
2. 修改图片后重新上传，刷新CDN缓存后重新访问得到以下信息。
   响应头中的last-modified时间发生了变化，同时您访问的图片也已更新。响应头中的x-swift-cachetime代表文件在CDN的缓存时间，单位为秒。

（可选）优化CDN性能

性能优化指的是通过文件压缩、图像处理、过滤参数（提高缓存命中率）等方式来提升用户请求的响应速度和文件下载速度，详情请参见性能优化。

图像处理

CDN图像处理

性能优化中的图像处理功能可以帮助您实现图片瘦身，您可以根据实际需要设置图片瘦身后的百分比。需要注意的是，开启图片自动瘦身功能后会影响图片的分辨率，如果您对图片的要求比较高，建议不要使用该功能。

示例

1. 上传一张图片到OSS中，大小为1.3 MB，在不开启CDN图像处理功能的情况下进行访问。
2. 开启CDN图像处理功能，再次进行访问。
   • 支持转换的图片类型：JPEG
   • 图片自动瘦身：90%
   • 其他参数保持默认值即可。

   
3. 此时文件大小变小，但时间值变大，这是因为您开启图像处理功能后，在第一次访问时CDN需要进行处理，后续进行访问时，时间则会缩短。

OSS图像处理

除了使用CDN图像处理，您也可以使用OSS的图片处理功能对图片类资源进行压缩。例如，展示原图会消耗比较大的流量，您希望在列表页面的图片不展示原图，可以参考以下步骤压缩图片。

1. 登录OSS管理控制台。
2. 单击Bucket 列表，然后单击目标Bucket名称。
3. 在左侧导航栏，选择数据处理 > 图片处理，单击新建样式。
4. 在基本编辑页签配置样式详情。
   • 规则名称：输入图片样式的规则名称，本场景示例为example。
   • 缩略方式：等比例缩小，本场景示例为30。

   
5. 单击确定后，填写验证码，单击确定。
6. 访问图片的方式为：https://img.{domain}.com/{your image path}?x-oss-process=style/example
   • 使用OSS图片处理功能前的加载详情
   • 使用OSS图片处理功能后的加载详情

（可选）CDN运营报表

您可以通过运营报表功能来分析网站的访问情况，例如PV/UV、用户访问地区、热门访问URL等。运营报表需要定制具体的报表内容后才会进行生产统计分析。

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

（可选）CDN监控查询

监控查询中的资源监控提供了查看访问流量/带宽、回源流量/带宽、访问请求数和命中率等报表功能，并且支持报表导出。

访问流量/带宽中的对比功能通过选取不同的时间区间，对比展示这两个时间段的流量情况，方便您观测站点广告投放和运营的情况。

计费

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

OSS流量计费

OSS计费详情请参见OSS产品计费。

本场景示例涉及计费详情如下图所示：

CDN计费

CDN提供了按峰值带宽计费和按流量计费两种计费方式，详情请参见CDN产品计费。

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

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

您可以登录CDN控制台查看流量和带宽数据，然后根据实际情况选择合适的计费方式。