前端 + Nginx + 后端架构的无感升级方案

一、前端无感升级

1. 构建新的前端包

   • 使用 Webpack、Vite 等工具进行打包，生成带有版本号或哈希值的静态文件名。
   • 确保 index.html 引用最新的静态资源文件（例如 app.js?version=abc123）。

2. 上传静态资源到服务器

   • 将打包后的前端静态资源上传到 Nginx 的指定目录，可以采用        覆盖      或新建版本目录方式。建议每次更新在 Nginx 的静态资源目录中创建一个新的文件夹，如 /static/v1.0/、/static/v2.0/

3. Nginx 配置前端静态资源的缓存策略

   • 在 Nginx 中启用长时间缓存，同时依赖文件名的变化来避免缓存旧文件。
   • 配置示例：

     location /static/ {
         root /path/to/static/files;
         expires 1y;
         add_header Cache-Control "public, must-revalidate";
     }
     

4. 灰度发布

   • 如果有灰度发布需求，可以通过 Nginx 设置流量分配给部分用户访问新版本，剩余用户继续使用旧版本。