Vue 项目灰度发布方案：Nginx 配置 + 前端版本控制 + 平滑回滚

一、方案概述

本方案通过 Nginx 流量分发实现灰度发布，结合前端静态资源版本化管理，确保新旧版本并行运行。当需要回滚时，可快速切换至稳定版本。

---

二、核心组件实现

1. Nginx 灰度配置

http {
    # 定义灰度用户标识（示例使用 IP 段）
    geo $gray_flag {
        default 0;
        192.168.1.0/24 1; # 指定 IP 段作为灰度用户
    }

    # 版本映射（需与前端构建版本一致）
    map $gray_flag $app_version {
        0 "stable";   # 正式版本
        1 "gray";     # 灰度版本
    }

    server {
        listen 80;
        server_name yourdomain.com;

        location / {
            # 按版本号路由到不同目录
            root /usr/share/nginx/html/$app_version;
            try_files $uri $uri/ /index.html;
        }

        # 静态资源缓存配置
        location ~* \.(js|css|png)$ {
            root /usr/share/nginx/html/$app_version;
            expires 7d;
            add_header Cache-Control "public";
        }
    }
}

2. 前端版本控制

构建配置 (vue.config.js)

module.exports = {
  outputDir: `dist/${process.env.VUE_APP_VERSION || 'stable'}`, 
  publicPath: process.env.NODE_ENV === 'production' 
    ? `/${process.env.VUE_APP_VERSION || 'stable'}/` 
    : '/'
}

版本注入 (.env.production)

# 灰度环境
VUE_APP_VERSION=gray

# 正式环境
VUE_APP_VERSION=stable

版本上报（入口文件）

// main.js
axios.post('/version-track', { 
  version: process.env.VUE_APP_VERSION 
})

3. 目录结构示例

/usr/share/nginx/html
├── stable    # 正式版本
│   ├── js
│   └── index.html
└── gray      # 灰度版本
    ├── js
    └── index.html

---

三、灰度发布流程

1. 构建灰度版本

   VUE_APP_VERSION=gray npm run build
   

2. 部署到服务器
   将生成的 dist/gray 目录上传至 Nginx 的 /usr/share/nginx/html/gray
3. 更新 Nginx 配置
   重启 Nginx 使灰度策略生效：

   sudo nginx -s reload
   

4. 流量监控
   通过日志监控灰度版本访问情况：

   tail -f /var/log/nginx/access.log | grep 'gray'
   

---

四、平滑回滚方案

场景 1：灰度问题回滚

1. 修改 Nginx 配置，将灰度标识强制指向稳定版：

   map $gray_flag $app_version {
       0 "stable";
       1 "stable"; # 强制所有流量回稳定版
   }
   

2. 重新加载配置：

   sudo nginx -s reload
   

场景 2：快速版本回退

1. 直接替换符号链接指向旧版本：

   # 假设有 v1.0 备份目录
   ln -sfn /usr/share/nginx/html/v1.0 /usr/share/nginx/html/stable
   

2. 清除 CDN 缓存（如有）

---

五、关键注意事项

1. 版本隔离
   不同版本的静态资源需独立存放，避免文件名冲突：

   // webpack 输出文件名带哈希
   output: {
     filename: `[name].${process.env.VUE_APP_VERSION}.[hash].js`
   }
   

2. 数据兼容性
   灰度版本需保证 API 数据结构向后兼容，避免正式版用户数据异常

3. 会话保持
   通过 Cookie 实现用户版本粘滞：

   map $cookie_version $fixed_version {
       "gray" "gray";
       default $app_version; # 回退到全局策略
   }
   

---

六、方案优势

功能	实现效果
流量精准控制	IP/Cookie/Header 多维度分流
秒级回滚	Nginx 配置热加载无需重启
版本共存	多目录并行部署
零侵入前端	环境变量控制构建路径

注：生产环境建议结合 CI/CD 流程实现自动化发布，并添加健康检查机制。