阿里云CDN

一、CDN是什么？一句话理解

CDN（Content Delivery Network，内容分发网络），本质是遍布全国、全球的边缘缓存节点集群 。

核心逻辑：把静态资源缓存到离用户最近的节点。

• 用户访问静态页面，优先就近边缘节点返回缓存文件；
• 节点没有缓存（未命中），才会回源到后端源站拉取文件；
• 源站可以是OSS、ECS、OBS等。

重点区分：OSS负责存储文件，CDN负责分发加速；CDN不是存储，OSS不是加速。

两条访问链路对比

1. ❌ 直接访问 OSS原生域名：xxx.oss-cn-hangzhou.aliyuncs.com

   用户请求直接打到杭州OSS机房，没有边缘节点缓存，无CDN加速。广州、成都、北方用户跨地域访问延迟高，所有流量都打到OSS源站。

2. ✅ 自有域名接入CDN，源站指向OSS

   static.yourdomain.com → DNS解析到CDN边缘节点 → 缓存命中直接返回；缓存未命中才回源OSS拉取文件。

误区纠正：不是把域名绑定OSS就等于CDN加速。域名是添加到CDN控制台作为加速域名，源站填OSS域名。OSS这边不需要绑定自定义域名。

二、前置准备清单

1. 一个已备案域名（国内CDN加速必须ICP备案；海外节点无需备案）
2. 阿里云OSS Bucket，存放前端打包产物（前面ossutil同步的目标）
3. 域名DNS解析权限（阿里云DNS、Cloudflare、第三方域名商都可以）
4. SSL证书（阿里云免费证书即可，用于HTTPS）

域名需要单独购买，CDN服务本身不赠送域名；一个域名可以拆多个子域名，比如 static.xxx.com 专门放静态资源，和主站域名隔离。

三、完整接入步骤（阿里云CDN）

步骤1：CDN控制台添加加速域名

1. 进入CDN控制台 → 域名管理 → 添加域名
2. 加速域名：填写你自己的子域名，例如 static.xxx.com
3. 业务类型：静态加速
4. 源站信息：
   • 源站类型：OSS域名
   • 源站地址：填入你的Bucket域名 xxx.oss-cn-hangzhou.aliyuncs.com
5. 源站Host默认保持和源站域名一致，确认提交。

提交后CDN会生成一个专属CNAME地址，类似 static.xxx.com.w.cdngslb.com

步骤2：DNS配置CNAME解析（最关键一步）

去你的域名解析后台，新增一条解析记录：

• 记录类型：CNAME
• 主机记录：static
• 记录值：CDN给你的那个CNAME地址
• TTL：默认10分钟

解析生效需要时间，一般几分钟。可以用 nslookup static.xxx.com 验证是否已经指向CDN节点。

步骤3：HTTPS证书配置（生产必开）

只需要在CDN上配置证书，不需要在OSS配置证书

1. 证书来源：阿里云SSL证书服务申请免费DV证书
2. 在CDN域名管理 → HTTPS配置，上传/托管证书
3. 开启强制HTTPS跳转，http访问自动转https

步骤4：回源配置（区分公有读 / 私有Bucket）

• 公有读Bucket（前端静态站常用）：直接回源即可，无需额外授权
• 私有Bucket：需要在CDN控制台开启【OSS私有Bucket回源授权】，CDN获得权限签名拉取文件，否则回源403

前端SPA项目，一般Bucket设置为公共读，配合CDN防盗链做访问控制。

步骤5：OSS静态网站托管补充（SPA单页路由404适配）

Vue/React history模式路由，刷新页面会404：

1. OSS控制台开启【静态网站托管】
2. 默认首页：index.html
3. 404页：index.html

注意：开启静态托管只是让OSS支持路由回退，依然不会自动开启CDN。

四、CDN缓存策略（前端静态资源黄金配置）

前端打包产物有哈希后缀，是天然适合长缓存的场景，推荐规则：

资源后缀	缓存时间	说明
.js、 .css、.png、 .jpg、.svg、.woff2	31536000s（1年）	文件名带hash，内容不变文件名不变，放心长缓存
*.html	0s / 不缓存	HTML不能缓存，保证用户刷新拿到最新版本
*.map	0s	sourcemap不对外暴露，或者不缓存

配置位置：CDN控制台 → 缓存配置 → 缓存规则

优先级：CDN缓存规则 > 源站返回的Cache-Control头。

建议：统一在CDN控制台配置缓存规则，不要在ossutil上传时大量写--meta，方便统一管理。

五、安全配置（生产环境必加）

1. Referer防盗链

只允许自己的域名访问静态资源，防止别人盗图、盗资源消耗流量。

• 白名单：填入 *.yourdomain.com
• 可选：禁止空Referer

2. URL鉴权（私有资源场景）

如果是内部系统、付费资源，开启CDN URL鉴权，带时效签名访问，防止链接泄露。

普通公开官网、H5活动页一般不需要。

3. 跨域CORS

在OSS控制台配置CORS规则，允许前端主站域名跨域访问静态资源。

六、发布之后：缓存刷新

前端发布新版本，虽然html不缓存，但CDN节点上旧html可能还存在，需要刷新。

两种方式：

1. 控制台手动刷新URL/目录
2. CI流水线自动调用CDN刷新API（推荐，和ossutil上传串联）

示例CI流程串联：

分支判断环境 → npm打包 → ossutil sync上传OSS → 调用CDN刷新接口刷新index.html

只刷新html即可，js/css带hash，新版本是全新文件名，不会受旧缓存影响。

八、计费说明（避坑）

CDN开通免费，计费项：

1. 下行流量（主要开销）：用户从CDN节点下载文件产生流量
2. 请求次数：按HTTP/HTTPS请求计费

对比直连OSS：大量用户访问时，CDN单价通常比OSS公网流量便宜，同时降低源站压力。

OSS计费：存储容量 + 回源流量（CDN第一次拉取文件回源产生）。

十一、官方文档链接

阿里云CDN接入OSS：https://help.aliyun.com/zh/oss/user-guide/cdn-acceleration

CDN缓存配置：https://help.aliyun.com/zh/cdn/user-guide/cache-settings

十二、总结

CDN+OSS是国内前端静态项目的标准最佳实践。

OSS负责持久化存储，CDN负责就近分发缓存；域名交给CDN作为加速域名，源站指向OSS。