Web架构实战：深度解析CDN加速原理与落地指南

边缘节点：全球分布的3000+服务器（以阿里云为例），距用户平均<50ms

中心节点：区域性枢纽，负责缓存同步与策略分发

源服务器：业务原始服务器，压力减少70%+（实测数据）

• 无CDN： 延迟>100ms，加载耗时≈2.1s
• 有CDN： 上海边缘节点响应，加载耗时≈0.3s

• 智能DNS解析：根据用户IP返回最优节点IP
• TCP优化：边缘节点使用高性能网络协议栈
• 缓存分层：热点内容自动下沉至边缘

• 国内业务：阿里云/腾讯云（备案便捷）
• 全球化业务：Cloudflare（免费基础版足够中小项目）
• AWS生态用户：CloudFront（无缝集成S3）

; CNAME记录示例
www IN CNAME www.example.com.cdn.dnsv1.com

# 图片/css/js缓存30天
location ~* \.(jpg|png|css|js)$ {
  expires 30d;
  add_header Cache-Control "public, max-age=2592000";
}

# 动态内容不缓存
location ~* \.(php|jsp)$ {
  expires off;
  proxy_cache_bypass 1;
}

# 源站防火墙设置（仅允许CDN节点IP）
iptables -A INPUT -p tcp --dport 80 -s 120.79.0.0/16 -j ACCEPT
iptables -A INPUT -p tcp --dport 443 -s 120.79.0.0/16 -j ACCEPT

<!-- 动态切换资源域名 -->
<script>
  const CDN_HOST = window.location.host.includes('localhost') 
    ? 'http://localhost:3000' 
    : 'https://cdn.yourdomain.com';
</script>

<!-- 图片自动加载CDN版本 -->
<img src="${CDN_HOST}/images/product.jpg" alt="CDN加速图片">

<!-- Webpack生产环境自动添加CDN前缀 -->
// webpack.config.js
output: {
  publicPath: process.env.NODE_ENV === 'production' 
    ? 'https://cdn.yourdomain.com/' 
    : '/'
}

[命中率]  [响应时间]  [带宽峰值]  [5xx错误]
 92%↑     68ms↓      1.2Gbps    0.03%

• 命中率<80% → 检查缓存策略，增加静态资源缓存时间
• 响应时间>200ms → 检查节点分布，添加新边缘节点
• 频繁5xx错误 → 验证回源服务器健康状态

# 边缘计算动态压缩
proxy_set_header Accept-Encoding "gzip, br";
proxy_pass http://origin_server;

# API触发缓存刷新（更新重要文件后）
curl -X POST "https://api.cdn.com/refresh" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -d '{"type":"file", "urls":["https://cdn.com/style.css"]}'

# 防止热链盗用
valid_referers none blocked server_names *.yourdomain.com;
if ($invalid_referer) {
  return 403;
}

• 图片资源占比80%，峰值QPS>10万
• 用户分布：中国60%，东南亚30%，欧美10%

• 国内：阿里云CDN（覆盖三四线城市）
• 海外：Cloudflare + AWS Shield（防DDoS）

map $uri $cache_level {
  ~*/(product|banner)/   "vip_edge"; # 重点区域缓存30天
  ~*\.(webp|avif)        "image_edge"; # 现代格式缓存15天
  default                "standard"; # 默认7天
}

• 检查Cache-Control响应头
• 确认刷新API调用成功
• 验证URL是否带随机参数（如?v=123）

• 确保证书在CDN平台正确上传
• 检查证书链完整性
• 验证TLS版本（推荐TLS 1.3）

# 边缘节点添加CORS头
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';

// Cloudflare Workers示例：边缘端A/B测试
addEventListener('fetch', event => {
  const cookie = event.request.headers.get('cookie');
  event.respondWith(handleRequest(cookie));
});

async function handleRequest(cookie) {
  const variant = cookie.includes('exp=b') ? B : A;
  return fetch(variant);
}

# FFmpeg边缘转码
ffmpeg -i input.mp4 -c:v libx264 -preset fast -crf 23 \
       -c:a aac -b:a 128k output_480p.mp4

# 边缘节点运行TensorFlow Lite模型
interpreter = tf.lite.Interpreter(model_path="model.tflite")
interpreter.allocate_tensors()
interpreter.invoke()