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

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
对象存储 OSS,内容安全 1000次 1年
简介: 本文为真实设备电商行业的实践,在网站有大量产品图片上传的场景下,用OSS配合CDN加速,提高了用户的访问速度、站点稳定性,并且提供了节省成本的思路。

本文为真实设备电商行业的实践,在网站有大量产品图片上传的场景下,用OSS配合CDN加速,提高了用户的访问速度、站点稳定性,并且提供了节省成本的思路。

作者:Jillian,南京某科技公司技术负责人

业务场景

image.png

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

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

准备内容

  • 开通 OSS、CDN

  • 可访问的站点

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

操作步骤

1、CDN添加访问域名

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

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

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

image.png image.png

2、域名解析

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

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

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

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

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

image.png

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

3、CDN缓存配置

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

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

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

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

  • 权重设置到最大:99

image.png image.png

4、CDN刷新

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

  • 打开CDN刷新控制台

  • 操作类型,选择刷新

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

image.png

示例:

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

image.png

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

image.png image.png

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

5、CDN性能优化

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

image.png

1)页面优化

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

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

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

image.png image.png image.png

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

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

image.png image.png image.png

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

2)Brotli压缩

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

image.png image.png

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

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

3)图像处理

image.png

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

示例:

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

image.png

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

image.png

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

image.png

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

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

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

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

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

image.png image.png

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

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

image.png image.png

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

6、CDN运营报表

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

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

image.png

7、CDN监控查询

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

image.png

价格

OSS流量计费

image.png

CDN计费

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

image.png image.png

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

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

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

image.png

结语

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

相关文章
|
1月前
|
存储 安全 API
利用对象存储(OSS)实现内容分发加速 :高效可靠的解决跨境下载延迟问题
利用对象存储(OSS)实现内容分发加速 :高效可靠的解决跨境下载延迟问题
171 2
|
8月前
|
存储 API 对象存储
使用对象存储OSS实现内容分发加速
通过本教程的操作,您可以在OSS中创建bucket并上传数据,可以开通OSS传输加速对OSS数据进行加速访问,从而为游戏服务器分担下载请求,并为用户带来加速体验。
10945 22
使用对象存储OSS实现内容分发加速
|
边缘计算 缓存 对象存储
阿里云OSS传输加速和CDN有什么区别?
阿里云对象存储OSS传输加速和阿里云CDN的区别
|
1月前
|
弹性计算 负载均衡 安全
企业级DMZ上云场景方案
随着企业业务云化进程逐渐进入深水区,简单地使用云上资源出入公网已经无法满足业务的诉求,安全、成本、权限、监控等诉求的迭代,需要企业有系统性地视角来考虑如何做好公网出入口(DMZ)的规划设计。
企业级DMZ上云场景方案
|
存储 对象存储 CDN
【对象存储OSS/网络分发加速CDN】使用OSS后,如何实现流量访问限制或请求次数的限制
描述使用对象存储OSS后,如何实现流量访问限制或请求次数的限制
2135 2
|
1月前
|
存储 并行计算 关系型数据库
使用 PolarDB 开源版 部署 pgpointcloud 支撑激光点云数据的高速存储、压缩、高效精确提取
背景PolarDB 的云原生存算分离架构, 具备低廉的数据存储、高效扩展弹性、高速多机并行计算能力、高速数据搜索和处理; PolarDB与计算算法结合, 将实现双剑合璧, 推动业务数据的价值产出, 将数据变成生产力.本文将介绍使用 PolarDB 开源版 部署 pgpointcloud 支撑激光点云...
70 0
|
1月前
|
SQL 关系型数据库 MySQL
MySQL 并发更新唯一键和插入数据导致死锁
一 前言死锁,其实是一个很有意思也很有挑战的技术问题,大概每个DBA和部分开发同学都会在工作过程中遇见 。关于死锁我会持续写一个系列的案例分析,希望能够对想了解死锁的朋友有所帮助。二 案例分析2.1 业务场景业务开发同学想同步数据,他们的逻辑是通过update 更新操作,如果更新记录返回的affec...
122 0
|
1月前
|
关系型数据库 OLAP Linux
ADB PG最佳实践之高效复制数据到RDS PG
ADB PG是一个经典MPP数据库,长项在于查询分析处理,面对客户联机分析和联机交易(HTAP)场景就显得力不从心,我们在某银行核心系统DB2 for LUW迁移到ADB PG时就遇到类似问题,因此我们提出ADB PG+RDS PG混搭技术架构,来解决客户此类HTAP需求。该混搭架构的精髓在于扬长避短,充分发挥分析型数据库和交易型数据库的长处和特性,分析型数据库专注于数据加工跑批场景,然后批量加工的结果数据卸载到RDS PG,通过RDS PG对外提供高并发对客交易服务。
113 0
ADB PG最佳实践之高效复制数据到RDS PG
|
1月前
|
开发者 ice
短视频批量混剪-制作卡点相册
随着短视频生态的发展,视频生产的质量和效率已经越来越重要,本篇介绍如何用一段音乐和多张图片,快速自动生成一段卡点相册视频。
62 0
短视频批量混剪-制作卡点相册
|
边缘计算 缓存 算法
阿里云对象存储OSS传输加速原理 开启方法及费用说明
阿里云对象存储OSS传输加速原理及开启方法