nginx与cdn协同实现静态资源多级加速的关键是分层协作：浏览器强缓存（一级）、cdn边缘节点差异化ttl缓存（二级）、nginx作为可信回源后端并启用proxy_cache兜底（三级），需明确职责、避免重复缓存、统一缓存键与响应头，并确保前端资源url指向cdn域名。
要让 Nginx 和 CDN 边缘节点协同工作，实现静态资源的多级加速，关键不是“替代”CDN，而是明确各自职责、避免缓存冲突、打通三级缓存链路：浏览器 → CDN 边缘节点 → Nginx 源站（含本地 proxy_cache）。整个过程围绕“谁缓存什么、缓存多久、如何验证更新”来设计。
一、划分三级缓存角色，避免策略打架
CDN 与 Nginx 不是二选一，而是分层协作：
-
浏览器层（一级）：靠
Cache-Control: public, immutable+max-age=31536000实现强缓存，资源带哈希指纹（如app.a1b2c3.js），用户首次加载后几乎永不回源 -
CDN 边缘节点（二级）：配置按文件类型差异化 TTL（如 JS/CSS 设 30 天，图片设 7 天），并开启「忽略特定查询参数」（如
?t=123）防止缓存碎片 -
Nginx 源站（三级）：不直接对外服务静态文件，而是作为 CDN 的可信回源后端；同时启用
proxy_cache，拦截未被 CDN 缓存或已过期的请求，减少穿透压力
二、Nginx 回源配置必须适配 CDN 行为
CDN 节点向 Nginx 发起回源请求时，Nginx 需识别其身份、保留关键头信息，并返回可被缓存的响应：
- 在 server 块中允许 CDN 的 IP 段访问（如阿里云 CDN 回源段：
allow 100.64.0.0/10;），拒绝其他直连 - 用
proxy_set_header Host $host;确保回源请求携带原始域名，便于 Nginx 匹配正确 server 块 - 添加
add_header X-Cache-Status $upstream_cache_status;，方便排查 CDN 是否命中 Nginx 缓存 - 对静态资源 location，统一设置响应头：
Cache-Control: public, max-age=31536000, immutable，让 CDN 明确知道该资源长期有效且不可变
三、Nginx 本地 proxy_cache 作为兜底缓存
当 CDN 节点缓存失效或遭遇突发回源，Nginx 的本地缓存能挡掉大量重复请求，保护后端源站：
- 在 http 块定义缓存区：
proxy_cache_path /var/cache/nginx/static levels=1:2 keys_zone=static_cache:256m inactive=4h max_size=20g use_temp_path=off; - 在静态资源 location 中启用：
proxy_cache static_cache;，并设置proxy_cache_valid 200 304 4h;（比 CDN TTL 短，确保 CDN 仍是主缓存） - 定制缓存 key：
proxy_cache_key "$scheme$request_method$host$uri$is_args$arg_v";，支持带版本参数（如?v=2.3.1）的资源独立缓存 - 配合
proxy_cache_lock on;防止缓存失效瞬间的并发回源雪崩
四、前端构建与 URL 必须对齐 CDN 域名
再好的 Nginx 和 CDN 配置，如果 HTML 或 CSS 里写的还是 /static/logo.png，请求就根本不会走到 CDN：
- Webpack/Vite 项目需配置
publicPath: 'https://static.example.com/'，确保所有静态资源链接自动指向 CDN 域名 - HTML 中的
<link rel="stylesheet" href="/css/app.css">必须由构建工具或服务端模板引擎重写为https://static.example.com/css/app.css - 若使用版本化路径（如
/v2.3.1/css/app.css），Nginx 可用location ~ ^/v\d+\.(.*)$ { try_files /$1 =404; }优雅降级
