阿里云OSS-CDN-SLB实战
1. 架构
前端项目在阿里云的典型架构：
用户
↓
[域名] → [CDN] → [OSS（静态）] / [SLB → ECS（API）]
- OSS：对象存储，存静态文件
- CDN：边缘加速 + 缓存
- SLB：负载均衡到后端 ECS
2. OSS 静态托管
2.1 创建 Bucket + 开启静态网站
# 安装 ossutil
brew install ossutil # 或下载二进制
# 配置
ossutil config
# 建 bucket
ossutil mb oss://my-frontend --acl public-read --storage-class Standard
# 开静态网站
ossutil website --method put oss://my-frontend index.html --error-document index.html
控制台 → Bucket → 基础设置 → 静态页面：
- 默认首页：
index.html - 默认 404：
index.html（SPA fallback）
2.2 上传
# 同步整个 dist
ossutil sync ./dist oss://my-frontend/ --delete # --delete 删除 oss 上多余文件
# 上传时设缓存头
ossutil cp -r ./dist oss://my-frontend/ \
--include "*.js" --include "*.css" \
--meta "Cache-Control:public, max-age=31536000, immutable"
ossutil cp ./dist/index.html oss://my-frontend/index.html \
--meta "Cache-Control:no-cache"
2.3 CORS 配置
<!-- bucket 控制台 -->
<CORSRule>
<AllowedOrigin>https://app.example.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
<ExposeHeader>ETag</ExposeHeader>
<MaxAgeSeconds>3600</MaxAgeSeconds>
</CORSRule>
2.4 直传 STS
前端直传文件到 OSS，避免文件经服务器：
// 前端
import OSS from 'ali-oss'
const res = await fetch('/api/oss/sts') // 后端签发 STS
const { credentials } = await res.json()
const client = new OSS({
region: 'oss-cn-hangzhou',
accessKeyId: credentials.AccessKeyId,
accessKeySecret: credentials.AccessKeySecret,
stsToken: credentials.SecurityToken,
bucket: 'my-frontend'
})
await client.put('uploads/file.png', file)
后端用 RAM 角色签 STS 临时凭证（短时效）。
3. CDN 配置
3.1 加速域名
控制台 → CDN → 域名管理 → 添加域名：
- 加速域名：
cdn.example.com - 业务类型：图片小文件 / 大文件 / 视音频
- 源站：OSS（自动出现 bucket 列表）/ IP / 域名
- 加速区域：中国内地 / 全球
3.2 CNAME
CDN 给一个 cdn.example.com.w.kunlunsl.com 之类，去 DNS 加 CNAME：
cdn.example.com. CNAME cdn.example.com.w.kunlunsl.com. TTL 600
3.3 关键配置
| 配置 | 推荐值 |
|---|---|
| HTTPS | 必开。证书选阿里云签发或自上传 |
| HTTP/2 | 开 |
| 强制跳转 | HTTP → HTTPS |
| 缓存规则 | hash 文件 1 年 immutable，HTML no-cache |
| 回源 Host | 改写为 OSS bucket 域 |
| Range 回源 | 大文件开 |
| Brotli | 开（比 gzip 小 20%） |
| 智能压缩 | 开 |
| HSTS | preload 准备好后开 |
| Referer 防盗链 | 按需 |
3.4 缓存配置
路径: /*.js /*.css /*.woff2 → 缓存时间: 1 年
路径: /index.html → 缓存时间: 0 秒
路径: / → 缓存时间: 0 秒
或在 OSS 上传时 meta 写 Cache-Control，CDN 跟随源站。
3.5 刷新与预热
# 刷新（清缓存）
aliyun cdn RefreshObjectCaches \
--ObjectPath "https://cdn.example.com/index.html" \
--ObjectType File
# 目录刷新（慢，配额少）
aliyun cdn RefreshObjectCaches \
--ObjectPath "https://cdn.example.com/" \
--ObjectType Directory
# 预热（推到节点）
aliyun cdn PushObjectCache \
--ObjectPath "https://cdn.example.com/app.abc.js"
CI 部署后调 API 自动刷新 + 预热。
4. SLB（负载均衡）
ECS 后端做高可用必装。
4.1 创建 ALB / NLB
| 类型 | 适合 |
|---|---|
| ALB（应用层 LB） | HTTP/HTTPS、按 path 路由 |
| NLB（网络层 LB） | TCP/UDP、四层、性能高 |
| CLB（经典） | 老产品 |
ALB 推荐，对前端友好（HTTP/2、WAF 集成、cert 管理）。
4.2 配置流程
- 建 VPC + 交换机
- 建 ALB 实例（公网/私网）
- 建后端服务器组（添加 ECS）
- 配监听器（443 → 后端 8080）
- 上传/绑定证书
- 域名 CNAME 到 ALB
4.3 健康检查
协议: HTTPS
路径: /health
端口: 8080
间隔: 5s
超时: 3s
健康阈值: 2
不健康阈值: 3
后端必须实现 /health 端点。
5. 域名与备案
国内服务器必须备案域名。流程：
- 主体备案（公司/个人）→ 网站备案 → 通信管局审核
- 周期 3-20 工作日
- 备案后才能解析到国内服务器
未备案：
- 用境外 / 香港节点（CDN 可选不在中国大陆加速）
- 阿里云轻量香港 / 腾讯香港 ECS
6. 成本估算（小型站点）
| 项 | 月费用估算 |
|---|---|
| OSS 存储 | 10GB ≈ 1.2 元 |
| OSS 流出流量 | 100GB ≈ 50 元（走 CDN 不计） |
| CDN 流量 | 100GB ≈ 24 元 |
| ECS（2C4G） | 200-400 元 |
| ALB | 200 元起步 |
| 域名 + SSL | 免费 + 60 元/年 |
7. 常见反模式
- OSS 不开 CDN 直接对外：流量贵 + 慢
- 未备案用国内节点：阿里云强制下线
- CDN 不配 HTTPS：明文流量
- CDN 缓存策略不分 HTML/JS：发版用户拿不到新版
- ALB 不配健康检查：挂掉的 ECS 还接流量
- OSS bucket 公开写：被恶意上传当图床
- STS 凭证太长有效期：泄露后影响大。生产 15 分钟以下
- 不监控流量异常：被刷流量到月底账单爆炸