最快实现的前端灰度方案

小白最快学会的前端灰度方案

首次访问效果如下，点击立即更新会访问灰度版本。本地cookie存在version字段后，后续访问都是指定版本代码，也不会出现弹窗提示

一、引言：为什么需要灰度发布？

1.1 血泪教训：全量发布的风险

因为一次上线，导致登录异常，用户无法使用。复盘时候，测试反馈预发环境不能完全模拟出生成环境。要不做一个灰度发布，实现代码最小化影响。

1.2 技术思考：面试的需要

多了解点技术方案，总没有坏事

二、前端灰度方案

• 
  
• 在网上搜索前端灰度方案，整体看来就目前这个比较简单，上手快，易实现
  
• nginx + 服务端 + 前端 js（可以考虑封装成一个通用工具 js）
  

大致思路

> 前端通过获取版本规则，服务端计算规则
> 命中规则，重新访问页面，nginx 通过版本信息，返回指定版本
> 未命中规则，继续访问当前稳定版本页面

ps: 额外探讨，如果希望服务端接口也能有灰度版本，是不是只需要通过 nginx 配置就能实现？

三、实现细节

1. 版本规则接口

这个规则是可以自己定制的；这里我简单以 userId 进行匹配

• 
  
• 案例服务端框架：koa2 + mongoose
  

/**

 * 获取当前用户的版本

 * @param {*} ctx

 */
exports.getVersion = async (ctx) => {
try {
const version = ctx.cookies.get("version");
const userId = ctx.query.userId;
// 这里直接写死，也可以放到redis里，做成可以动态配置也行
const inTestList = ["68075c202bbd354b0fcb7a4c"];
const data = inTestList.includes(userId) ? "gray" : "stable";

if (version) {
return ctx.success(

        {
version: data,
cache: true,

        },
"缓存"

      );

    } else {

      ctx.cookies.set("version", data, { maxAge: 1000 * 60 * 60 * 24 * 7 });
return ctx.success(

        {
version: data,
cache: false,

        },
"重新计算"

      );

    }

  } catch (error) {

    ctx.fail("获取页面记录失败");
console.error("获取页面记录失败:", error);

  }

};

• 
  
• userId 匹配那块，可以引入 redis 做缓存处理，避免直接查询用户表进行比对
  

2. 前端触发获取版本

1. 
   
2. 交互方式，目前我能想到
   
3. 第一种，接口请求完，才开始渲染页面，自动执行指定版本
   
4. 第二种，接口请求、页面渲染同步进行，指定版本由用户触发
   

// 我把请求版本放到入口首页界面里
// 首次需要登录之后才会执行
onMounted(() => {
const userInfo = store.getters["login/getUserInfo"];
getVesion({ userId: userInfo.id }).then((res) => {
if (!res.cache && res.version === "gray") {
// 这里我增加一个弹窗提示，让用户选择
ElMessageBox.confirm("存在新的灰度版本，是否要体验最新版本?", "新版本", {
confirmButtonText: "立即更新",
cancelButtonText: "不更新",
type: "warning",

      }).then(() => {
window.location.reload();

      });

    }

  });
// 页面其他初始化逻辑

});

前端打包控制

1. 
   
2. 项目里使用的是 vite 打包工具
   
3. 通过增加两个配置，两者区别在于输入输出不同。当然如果嫌维护两个配置麻烦，可以把公共相同配置抽离出来或者通过环境变量区分维护一个配置
   
4. 新增一个入口 html 文件，并修改打包输出名称
   

# vite.gray.config.js

// 修改打包输出名称方便部署
const renameHtmlPlugin = () => {
return {
name: 'html-transform',
enforce: 'post',
generateBundle(options, bundle) {

      bundle['gray.html'].fileName = 'index.html'

    }

  }

}
export default defineConfig({
// ... 其他配置
plugins: [vue(), renameHtmlPlugin()],
build: {
outDir: 'gray',
rollupOptions: {
input: {
main: resolve(__dirname, 'gray.html')

      }

    }

  }
// ...

})

• 
  
• 命令行部分
  

  "build": "vite build",
"build:gray": "vite build --config vite.gray.config.js",

• 
  
• 最终打包出来目录
  

// 灰度版本

-gray -

  assests -

  index.html -
// 稳定版本

  dist -

  assests -

  index.html;

3. nginx 配置

这里我尝试很久，最终以下配置可以实现

通过 cookie 中版本标识，返回不同版本内容

http {

  map $http_cookie $target_dir {

      # 精确匹配version值，避免捕获额外内容
"~*version=gray(;|$)"   "/gray";
"~*version=stable(;|$)" "/stable";

      default                 "/stable";
}

  server {

    ...已存在...


    location / {

        root html$target_dir;

        try_files $uri $uri/ /index.html;
}


    ...已存在...
}
}

四、总结

自此一个简单前端灰度效果就实现了。当然这里还有许多的场景没有考虑到，欢迎大家提问探讨。

案例代码：gitee.com/banmaxiaoba… 代码包含一个简易的前端监控方案实现，有空下篇文章分享讨论