当前位置：首页 > news >正文

最快实现的前端灰度方案

news 2025/7/5 5:16:43

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

首次访问效果如下，点击立即更新会访问灰度版本。本地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. 前端触发获取版本

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

// 我把请求版本放到入口首页界面里
// 首次需要登录之后才会执行
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();});}});// 页面其他初始化逻辑
});

前端打包控制

项目里使用的是 vite 打包工具
通过增加两个配置，两者区别在于输入输出不同。当然如果嫌维护两个配置麻烦，可以把公共相同配置抽离出来或者通过环境变量区分维护一个配置
新增一个入口 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;}...已存在...}
}