网站静态资源跨地域访问加速-阿里云帮助中心

手动部署

https://www.aliyun.com/solution/tech-solution/oss-x-cdn

方案概览

在当前互联网快速发展的时代，网站已成为企业与用户沟通的重要桥梁。不同地域的用户访问网站时，部分用户会因为地域较远导致访问速度较慢，影响用户体验，同时随着网站流量的不断增加，站点的响应速度也会出现下降的问题。其中网站的静态资源，如JS文件、CSS文件、图片、大文件或音视频等，这些内容的加载速度直接决定用户浏览网站的整体体验。

为了确保不同地域的用户能够流畅地访问网站，您可以使用阿里云CDN产品来分发OSS上的文件，不仅可以降低源站的负载压力，还能够提升网站的访问性能。同时，在高并发的场景下，通过CDN能够将静态资源缓存在各个节点上，减少对源站的直接请求，不仅降低了带宽费用，还降低了源站的流量费用。以购买1个月和6个月有效期的100GB下行流量包费用为例，使用CDN加速静态资源，在忽略回源费用的情况下，相对于直接使用OSS下行流量，费用分别降低了75.5%和97.5%。具体请以官方资源包价格为准。

方式	资源包类型	资源包流量/有效期	费用	支持的访问次数/天	使用CDN费用降低
直接使用OSS	下行流量	100GB/1个月	49元	3,413次/天	75.5%
CDN+OSS			12元
直接使用OSS		500GB/1个月	247元	17,067次/天	76.9%
CDN+OSS			57元
直接使用OSS		1TB/1个月	505元	34,952次/天	78.6%
CDN+OSS			108元

方案架构

将网站的静态资源（JS文件、CSS文件、图片、音视频文件等）存储在OSS上，CDN会将OSS源站的文件提前缓存到CDN全球加速节点，用户请求访问或下载资源时，可以就近获取到CDN节点上已缓存的资源，从而实现资源访问加速。整体的方案架构如下图所示。

本方案的技术结构包括以下基础设施和云服务：

对象存储 OSS：存储网站静态资源文件。
内容分发网络 CDN：加速访问对象存储 OSS中存储的资源。

部署准备

如果您还没有阿里云账号，请访问阿里云账号注册页面，根据页面提示完成注册并完成个人实名认证。阿里云账号是您使用云资源的付费实体，因此是部署方案的必要前提。
为阿里云账号充值。为节省成本，本方案默认选择使用按量付费，使用按量付费资源需要确保账户余额不小于100元。完成本方案的部署及体验，预计费用约为5元。
您已经拥有了至少一个域名，且域名已经备案。如果未备案，可登录阿里云ICP代备案管理系统完成备案。
开通对象存储OSS、内容分发网络CDN。

创建对象存储OSS Bucket

登录OSS管理控制台。
在左侧导航栏，选择Bucket列表，然后单击创建Bucket。

在创建Bucket面板，设置以下配置项，然后单击确定。

主要配置项说明如下，其余配置项保持默认值即可。

配置项	说明	示例值
Bucket 名称	Bucket 命名规范：命名长度为3~63个字符。只允许小写字母、数字、短横线（`-`），且不能以短横线开头或结尾。 Bucket名称在OSS范围内必须全局唯一。	examplebucket
地域	Bucket创建成功后地域将无法更改。	华东1（杭州）
存储类型	网站的静态资源会经常被访问，因此需要确保高可靠、高可用、高性能。	标准存储
读写权限	对网站的静态资源的所有访问操作需要进行身份验证。	公共读

添加CDN加速域名

登录CDN控制台。

在左侧导航栏，选择域名管理，单击添加域名，设置业务信息。

说明

如果是首次在CDN添加该域名，需要验证该域名的归属权后才能添加。请按照控制台提示进行DNS解析验证或文件验证的方式进行域名验证。

配置项	说明	示例值
加速区域	本方案以加速中国内地为例。	仅中国内地
加速域名	接入CDN，用于加速源站的域名，也是您最终暴露给终端用户访问的域名。	example.com
业务类型	根据要加速的场景选择业务类型。	图片类小型静态资源加速：图片小文件。大于20 MB的静态文件加速：大文件下载。音视频文件加速：音视频点播。

单击新增源站信息，配置源站信息后，单击确定。
源站信息选择OSS域名，并在下方的域名输入框中选择本案例中已创建的OSS Bucket，其他参数保持默认值即可。
完成源站配置后，选中我理解并同意以上合规承诺，单击下一步。
等待人工审核。
审核通过后，域名状态显示为正常运行，表示添加成功。
等到域名状态为正常运行时，会显示加速域名的CNAME值，本场景示例为example.com.w.kunlunle.com。

配置CNAME

添加域名后，阿里云CDN会为您分配对应的CNAME域名，您需要完成CNAME配置，CDN服务才能生效。

登录云解析DNS控制台。
单击域名解析，然后在域名解析列表中，单击目标域名右侧的解析设置。

单击添加记录，填写域名解析信息，然后单击确认。

配置项	说明	示例值
记录类型	选择域名指向的类型。此处选择CNAME。	CNAME
主机记录	根据域名前缀填写主机记录。本方案以顶级域名为例，例如`example.com`，输入@。	@
记录值	填写上一步骤获取到的CNAME值。	example.com.w.kunlunle.com
TTL	域名的更新周期，保留默认值。	10分钟

查看CNAME状态。
在CDN控制台，查看目标域名对应的CNAME状态，状态为已配置时，则表示CNAME配置已生效。

配置缓存

配置CDN节点缓存过期时间。

登录CDN控制台。
在左侧导航栏，单击域名管理。
在域名管理页面，单击目标域名对应的管理。
在指定域名的左侧导航栏，单击缓存配置，在缓存过期时间页签下，单击添加。

在添加缓存过期时间对话框，配置缓存规则，然后单击确定。

配置项	说明	示例值
类型	支持按目录或文件后缀名指定资源范围。	文件后缀名
后缀名	填写您需要缓存的文件后缀名。	页面文本资源：js,css 图片资源：jpg,png,gif 音视频：mp4
过期时间	根据资源文件的更新情况设置过期时间。	频繁更新的js、css类文件：7天。不常更新的图片及音视频文件：1个月。
权重	设置缓存规则的优先级。	99

开启CDN缓存自动刷新。
1. 登录OSS管理控制台。
2. 进入目标Bucket后，选择Bucket 配置 > 域名管理。
3. 在目标域名中，单击OSS 域名绑定列下的未绑定，在弹出面板输入域名信息，单击提交。
4. 在目标域名中，在CDN 缓存自动刷新列，选择所有支持的操作，然后单击确定。
  当您在OSS对文件进行修改后，可以触发CDN缓存的自动刷新。

完成及清理

方案验证

图片及音视频文件

图片及音视频文件主要是通过OSS进行存储，通过CDN实现资源加速。您可以通过OSS控制台或者阿里云SDK等形式将文件上传到OSS的Bucket，然后通过浏览器访问对应的CDN资源地址验证缓存策略及加速效果。

访问文件查看静态资源缓存策略。
以访问图片文件为例，在浏览器访问对应的URL，可以得到以下响应信息，说明文件是从CDN节点上下载到的，并且缓存时间也按预期设置为30天。
访问包含图片的网站验证静态资源加速效果。
使用阿里云应用实时监控服务ARMS的即时拨测功能，监测点覆盖全国主要城市，测试文件大小为2 MB，验证通过CDN加速和不设置CDN加速的图片访问性能。最初静态资源没有缓存至CDN加速节点时，访问性能会相对较慢。当静态资源缓存至CDN加速节点后，则由加速节点直接响应，设置CDN加速后的访问性能会更好。具体见下面数据。
图中左侧为未设置CDN加速的访问性能，右侧为设置CDN加速后的访问性能。通过本次拨测数据可以看到，设置CDN加速后的完全加载用时提升了约74.7%。

JS、CSS文件

JS、CSS文件会根据业务的实际情况更新版本，与图片及音视频这类不常更新的静态文件不太相同。您可以通过以下操作完成文件的版本控制、文件上传及文件访问。

文件版本控制。
JS、CSS文件可以通过文件路径中的版本号（例如js/0.0.1/app.js）或者查询参数的方式（app.js?v=0.0.1）确保用户可以获取到当前版本的文件。在实际的开发流程中，使用非覆盖式发布的情况更为常见，通过文件路径中的版本号的方式可以有效地控制缓存并进行版本追踪，同时方便进行回滚操作。
在OSS中，可以通过创建对应版本号的目录存放对应版本的文件，就可以完成文件的版本控制。
文件上传到OSS。
文件版本更新后，您可以根据具体场景选择使用OSS控制台、阿里云SDK、ossutil、ossbrowser或者API等方式将最新版本的文件上传到OSS Bucket。本文以使用命令行工具ossutil为例，介绍如何将文件夹内的文件上传到OSS Bucket。简单上传的示例命令如下，具体可参考cp（上传文件）。
```
 ossutil cp -r localfolder/ oss://<oss-bucket>/<folder>
```
在应用程序的代码中更新JS、CSS文件的版本号，使其指向OSS上最新版本的文件路径。
访问文件。
- 命中CDN节点缓存
  通过开发者工具检查可以看到，多次访问0.0.1版本的JS文件时，X-Cache字段返回值以HIT开头，表明源站的资源已缓存到CDN节点。
- 未命中CDN节点缓存
  更新JS文件版本为0.1.0后，首次访问新版本的JS文件，X-Cache字段返回值以MISS开头，表明首次访问未命中CDN节点缓存。

清理资源

在本方案中，您创建了1个OSS Bucket、1个CDN加速。测试完方案后，您可以参考以下规则处理对应产品的资源，避免继续产生费用。

删除对象存储 OSS中文件资源和Bucket。
1. 登录OSS控制台，单击Bucket列表，然后单击目标Bucket名称。
2. 在左侧导航栏，选择文件管理 > 文件列表。
3. 选中一个或多个Object，单击下方的彻底删除。
4. 在弹出的对话框中，单击确定删除文件。
5. 单击删除Bucket，然后按照页面指引完成删除操作。
删除CDN加速域名。
1. 登录CDN控制台。
2. 在左侧导航栏，单击域名管理。
3. 在域名管理页面，定位目标域名，在操作列中选择>删除。
4. 在确认删除域名对话框中，单击确定。

一键部署