React应用部署Nginx需配置index.html不缓存（Cache-Control: no-cache, must-revalidate, max-age=0），静态资源按哈希名设长期缓存（max-age=31536000），并用try_files实现前端路由404回退至index.html。
React 应用构建后部署到 Nginx，常因 CDN 缓存了 index.html 或旧版 JS/CSS 文件，导致用户访问白屏或功能异常。核心解法是：让 HTML 不被长期缓存，而静态资源（JS/CSS/图片）通过文件内容哈希实现永久缓存。
确保 index.html 强制不缓存
Nginx 默认可能对 HTML 返回 Cache-Control: public, max-age=3600，CDN 会据此缓存一小时。必须显式覆盖：
- 在 Nginx server 块中，针对
index.html单独设置响应头 - 使用
expires -1或max-age=0，并添加no-cache指令，强制浏览器和 CDN 每次校验 - 避免依赖 ETag 或 Last-Modified —— CDN 可能忽略它们
示例配置片段：
location = /index.html {add_header Cache-Control "no-cache, no-store, must-revalidate, max-age=0";
add_header Pragma "no-cache";
add_header Expires "0";
}
静态资源启用内容哈希与长期缓存
React 脚手架（Create React App 或 Vite）默认已为 JS/CSS 文件生成哈希名（如 main.a1b2c3d4.js），但需确保 Nginx 配合：
- 对带哈希的静态资源（通常含
.[a-f0-9]{8,}\.(js|css|png|jpg|svg)格式）设置长缓存，如max-age=31536000（1年） - 避免对所有
/static/或/*.js统一设长缓存 —— 未哈希的文件（如logo.png）会被误缓存 - 可借助正则 location 精准匹配哈希文件
示例配置：
location ~* \.[a-f0-9]{8,}\.(js|css|png|jpg|jpeg|gif|svg|woff2?)$ {expires 1y;
add_header Cache-Control "public, immutable";
}
处理前端路由（React Router）的 404 回退
启用 BrowserRouter 后，刷新任意子路径（如 /dashboard）会触发 Nginx 查找对应文件，返回 404。需将所有非静态资源请求回退到 index.html：
- 用
try_files优先匹配真实文件，最后 fallback 到/index.html - 把
try_files放在根 location 中，而非仅/—— 防止 API 请求也被错误重写 - 确保该逻辑不干扰真实 API 接口（如
/api/），应单独配置反向代理
典型配置：
location / {try_files $uri $uri/ /index.html;
}
location ^~ /api/ {
proxy_pass http://backend;
proxy_set_header Host $host;
}
验证 CDN 缓存行为是否生效
上线后务必逐项检查响应头，不能只信配置：
- 访问
/index.html，确认响应含Cache-Control: no-cache, must-revalidate, max-age=0 - 访问一个 JS 文件（如
/static/js/main.x1y2z3.js），确认含Cache-Control: public, immutable, max-age=31536000 - 用
curl -I或浏览器 DevTools 的 Network 标签页查看原始响应头，绕过本地浏览器缓存 - 若使用 Cloudflare、阿里云 CDN 等，还需登录控制台确认其未覆盖源站缓存策略
