前端 + 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. 准备新版本的后端包

    • 新的 libmain.jarconfig 准备完毕后,放置在临时目录,等待上线。
  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 和后端架构,让用户的使用体验不受到影响。

相关推荐
青皮桔28 分钟前
CSS实现百分比水柱图
前端·css
影子信息33 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月34 分钟前
1.vue权衡的艺术
前端·vue.js·开源
样子201838 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿39 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
RW~1 小时前
Minio安装配置,桶权限设置,nginx代理 https minio
运维·nginx·https·minio
森焱森1 小时前
无人机三轴稳定控制(2)____根据目标俯仰角,实现俯仰稳定化控制,计算出升降舵输出
c语言·单片机·算法·架构·无人机
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu2 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说2 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统