前端 + 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 设置流量分配给部分用户访问新版本，剩余用户继续使用旧版本。

     map $cookie_version $static_version {
         default v1.0;
         ~v2.0 v2.0;
     }
     
     location /static/ {
         alias /path/to/static/$static_version/;
     }
     

二、后端无感升级

1. 准备新版本的后端包

   • 新的 lib、main.jar 和 config 准备完毕后，放置在临时目录，等待上线。

2. 部署方式

   • 使用蓝绿部署或滚动发布来进行后端升级。
   • 蓝绿部署：准备一套完全独立的环境（如 Green 环境），部署新版本的后端服务。切换 Nginx 的代理指向新的 Green 环境，用户可以无感知地切换到新版本。
   • 滚动发布：如果使用集群或多实例服务，逐个更新节点的后端服务，同时保持部分节点对外提供服务，避免整体停机。

3. 后端的 Nginx 代理配置

   • 配置 Nginx 为后端服务做负载均衡，并支持多个版本的服务实例。
   • 配置示例：

     upstream backend {
         server backend_v1:8080;
         server backend_v2:8080;
     }
     
     location /api/ {
         proxy_pass http://backend;
     }
     

4. 数据库迁移策略

   • 后端升级时，如果涉及数据库变更，应该先进行向下兼容的数据库迁移（即保留旧数据结构），确保新旧版本的后端都能兼容数据库操作。
   • 待新版本稳定后，清理旧的数据库结构。

三、Nginx 配置调整

1. 前端与后端路径管理

   • 确保 Nginx 的配置文件能够正确代理前端和后端请求。例如：

     # 前端静态资源
     location / {
         root /path/to/frontend;
         try_files $uri $uri/ /index.html;
     }
     
     # 后端 API 请求
     location /api/ {
         proxy_pass http://backend_server;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     }
     

2. 热加载 Nginx 配置

   • 更新 Nginx 配置后，不需要重启服务，直接使用 nginx -s reload 进行热加载，以避免服务中断。

3. 负载均衡与健康检查

   • 配置 Nginx 的健康检查机制，确保在后端节点不可用时自动切换流量到健康的服务。
   • Nginx 配置示例：

     upstream backend {
         server backend_v1:8080 max_fails=3 fail_timeout=30s;
         server backend_v2:8080 max_fails=3 fail_timeout=30s;
     }
     
     location /api/ {
         proxy_pass http://backend;
         proxy_next_upstream error timeout invalid_header http_500 http_502;
     }
     

四、升级流程总结

1. 前端升级：确保前端静态文件版本控制、缓存策略合理，避免用户加载旧资源。
2. 后端升级：采用蓝绿部署或滚动发布方式，结合 Nginx 负载均衡，避免后端更新时影响整体服务。
3. Nginx 热加载：在更新前端包或后端服务时，Nginx 只需热加载配置，不需要重启，避免中断现有请求。
4. 数据库迁移：确保数据库变更具备向下兼容性，避免在升级过程中导致数据库异常。

通过这种升级方案，可以确保无感知地更新前端、Nginx 和后端架构，让用户的使用体验不受到影响。