青岛网站关键词推广优化seo哪家好
小白最快学会的前端灰度方案
首次访问效果如下，点击立即更新会访问灰度版本。本地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;}...已存在...}
}
四、总结
自此一个简单前端灰度效果就实现了。当然这里还有许多的场景没有考虑到，欢迎大家提问探讨。案例代码：gitee.com/banmaxiaoba…
——转载自：东坡白菜