CDN

CDN（Content Delivery Network，内容分发网络）通过在全球分布的边缘节点缓存静态资源，让用户从距离最近的节点获取内容，降低延迟、减轻源站压力。

工作原理

用户请求 img.example.com/logo.png
  1. DNS 解析返回最近的 CDN 边缘节点 IP（通过 CNAME + 智能 DNS）
  2. 边缘节点命中缓存 → 直接返回
  3. 边缘节点未命中 → 回源到源站拉取，缓存后返回

智能 DNS 调度

CDN 通过 CNAME 接管域名解析，DNS 服务器根据用户 IP 地理位置、运营商、节点负载返回最优边缘节点 IP。

缓存策略

资源类型	典型 Cache-Control	说明
图片、字体、JS/CSS（含 hash）	`max-age=31536000, immutable`	文件名含内容 hash，永久缓存
HTML	`no-cache` 或短 TTL	需要及时更新
API 响应	通常不缓存	动态数据

缓存刷新：

文件名加 hash（app.abc123.js）是最可靠的缓存失效方式
CDN 控制台手动刷新 URL 或目录
通过 API 批量刷新

核心功能

功能	说明
静态资源加速	图片、JS、CSS、视频就近分发
HTTPS 卸载	边缘节点处理 TLS，减轻源站 CPU
DDoS 防护	流量清洗，隐藏源站真实 IP
图片处理	按需压缩、裁剪、格式转换（WebP）
边缘计算	在边缘节点执行逻辑（Edge Functions）

主流 CDN 服务商

服务商	特点
Cloudflare	全球覆盖广，免费套餐，边缘计算 Workers
AWS CloudFront	与 AWS 生态深度集成
阿里云 CDN	国内节点覆盖好，适合国内业务
腾讯云 CDN	国内节点覆盖好，游戏加速强
Fastly	实时缓存清除，边缘计算

前端接入示例

<!-- 静态资源通过 CDN 域名引用 -->
<link rel="stylesheet" href="https://cdn.example.com/css/app.abc123.css">
<script src="https://cdn.example.com/js/app.def456.js"></script>
<img src="https://cdn.example.com/images/logo.png">

Vite / Webpack 构建时配置 publicPath / base 指向 CDN 域名，构建产物自动带 hash。

缓存命中率优化

缓存命中率（Cache Hit Rate）= 边缘命中请求数 / 总请求数，越高源站压力越小。

提高命中率的常见手段：

手段	说明
文件名加 Hash	`app.abc123.js` 保证内容变化时 URL 变化，旧文件可永久缓存
规范化查询参数	忽略或排序无关参数，避免同一资源被缓存为多份
合理设置 TTL	静态资源大 TTL，动态内容短 TTL 或不缓存
预热（Cache Warm）	发布后主动将资源推送到边缘节点，防止冷启动回源风暴
压缩缓存	边缘节点存储并返回 gzip/Brotli 压缩版本

回源策略

边缘节点缓存过期或未命中时，向上游拉取资源：

用户 → 边缘节点（L1）→ 区域节点（L2）→ 源站
              ↑ 二级缓存减少直接回源

单源：所有节点回同一个源站
多源 / 源站组：多个源站轮询或权重调度，用于高可用
源站保护：并发回源合并（Collapse），同一资源同时只有一条回源请求，防止缓存击穿

CDN 安全功能

功能	说明
WAF（Web 应用防火墙）	过滤 SQL 注入、XSS、CC 攻击等七层威胁
DDoS 流量清洗	边缘节点吸收攻击流量，隐藏源站真实 IP
防盗链	校验 Referer，拒绝非授权域名引用资源
URL 鉴权（Token 防盗链）	URL 带时效签名，过期或签名错误返回 403
IP 限速 / 黑名单	对单 IP 请求频率限制，封禁恶意 IP
Bot 管理	区分爬虫、扫描器与正常用户

# Token 鉴权 URL 示例
https://cdn.example.com/video/a.mp4?token=abc123&expires=1716000000

CDN 与 CORS

静态资源通过 CDN 分发时，需确保边缘节点正确透传或补充 CORS 响应头：

# 源站响应头（需包含）
Access-Control-Allow-Origin: https://www.example.com
Vary: Origin
 
# CDN 必须缓存 Vary: Origin，否则不同来源的用户可能收到错误的缓存响应

部分 CDN（如 Cloudflare）支持在边缘规则中统一添加 CORS 头，无需修改源站。

视频流媒体加速

协议	说明	CDN 支持
HLS（HTTP Live Streaming）	切片为 `.ts` + `.m3u8` 索引，HTTP 分发	广泛支持，可缓存切片
DASH	自适应码率，`.mpd` 描述文件 + 分段	支持
RTMP	推流常用，低延迟，但 CDN 缓存能力弱	部分支持

CDN 对 HLS/DASH 切片文件（通常 2-10 秒）的缓存效果极好，可大幅降低直播/点播带宽成本。

边缘计算（Edge Functions）

在 CDN 边缘节点执行逻辑，无需回源，极低延迟：

平台	产品	运行时
Cloudflare	Workers	V8 isolates
AWS CloudFront	Lambda@Edge / CloudFront Functions	Node.js
Fastly	Compute@Edge	Wasm
Vercel	Edge Functions	V8 isolates

典型用途：A/B 测试、请求重写/重定向、鉴权校验、个性化响应头、地理围栏。

// Cloudflare Workers 示例：为所有响应添加安全头
addEventListener('fetch', event => {
  event.respondWith(addSecurityHeaders(event.request))
})
 
async function addSecurityHeaders(request) {
  const response = await fetch(request)
  const newHeaders = new Headers(response.headers)
  newHeaders.set('X-Frame-Options', 'DENY')
  newHeaders.set('X-Content-Type-Options', 'nosniff')
  return new Response(response.body, { ...response, headers: newHeaders })
}

知识仓库

探索

CDN

CDN