文档

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

更新时间:

本文为您介绍如何使用CDN加速OSS上的图片资源分发,提升用户的访问速度和站点稳定性。

业务场景

说明

本最佳实践原文来自实战派的使用CDN来加速OSS上存储的文件资源分发

使用CDN来加速OSS上存储的文件资源分发

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

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

  • 使用CDN流量,单价低于直接访问OSS产生的外网流出流量。

  • 用户从距离客户端最近的CDN节点获取资源,减少网络传输距离,保证静态资源传输质量。

  • CDN产品提供的监控查询、运营报表功能可分析网站的访问PV、UV以及区域分布等,帮助您分析流量走势、调整策略。

前提条件

步骤一:添加加速域名

  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秒),使用浏览器访问可得到以下信息。刷新1

  2. 修改图片后重新上传,刷新CDN缓存后重新访问得到以下信息。

    响应头中的last-modified时间发生了变化,同时您访问的图片也已更新。响应头中的x-swift-cachetime代表文件在CDN的缓存时间,单位为秒。刷新2

(可选)优化CDN性能

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

图像处理

CDN图像处理

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

示例

  1. 上传一张图片到OSS中,大小为1.3 MB,在不开启CDN图像处理功能的情况下进行访问。图像处理-cdn1

  2. 开启CDN图像处理功能,再次进行访问。

    • 支持转换的图片类型JPEG

    • 图片自动瘦身90%

    • 其他参数保持默认值即可。

    图像处理-cdn图像处理-cdn2

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

OSS图像处理

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

  1. 登录OSS管理控制台

  2. 单击Bucket 列表,然后单击目标Bucket名称。

  3. 在左侧导航栏,选择数据处理 > 图片处理,单击创建样式

  4. 基本配置页签配置样式详情。

    • 规则名称:输入图片样式的规则名称,本场景示例为example

    • 缩略方式等比例缩小,本场景示例为30

    图像处理-oss1
  5. 单击确定后,填写验证码,单击确定

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

    • 使用OSS图片处理功能前的加载详情图像处理-oss3

    • 使用OSS图片处理功能后的加载详情图像处理-oss4

(可选)CDN运营报表

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

运营报表1

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

定制运营报表2

(可选)CDN监控查询

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

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

监控查询

计费说明

将OSS作为CDN源站时,可能会产生CDN下行流量费用以及OSS流出到CDN流量费用。具体请参见CDN加速OSS计费说明

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

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控制台查看流量和带宽数据,然后根据实际情况选择合适的计费方式。

计费概览
  • 本页导读 (1)
文档反馈