frontend-gray插件实现了前端用户灰度的功能,通过此插件,不但可以用于业务A/B实验,同时通过可灰度配合可监控、可回滚策略保证系统发布运维稳定性。
运行属性
插件执行阶段:认证阶段 插件执行优先级:1000
配置字段
名称 | 数据类型 | 填写要求 | 默认值 | 描述 |
| string | 非必填 | - | 用户ID的唯一标识,可以来自Cookie或者Header中,比如 userid,如果没有填写则使用 |
| boolean | 非必填 |
| 是否使用manifest作为入口。当设置为true时,系统将使用manifest文件作为应用入口,适用于微前端架构。在这种模式下,系统会根据manifest文件的内容来加载不同版本的前端资源。 |
| string | 非必填 | - | 使用JWT鉴权方式,用户ID的唯一标识来自 |
| string | 非必填 | - | 用户身份信息可能以JSON形式透出,比如: |
| int | 非必填 |
| 网关设置Cookie最大存储时长:单位为秒,默认为1年 |
| string | 非必填 | - | Cookie的Domain设置,可用于跨子域共享Cookie。例如:".example.com" |
| array of strings | 非必填 | - | 强制处理的路径,支持 |
| array of strings | 非必填 | - | 用于排除特定路径,避免当前插件处理这些请求,支持 |
| map of string to string | 非必填 | - | 用于通过请求头过滤,指定哪些请求不被当前插件处理。 |
| array of object | 必填 | - | 用户定义不同的灰度规则,适配不同的灰度场景 |
| object | 非必填 | - | 重写配置,一般用于OSS/CDN前端部署的重写配置 |
| object | 非必填 | - | 配置Base基线规则的配置 |
| array of object | 非必填 | - | 配置Gray灰度的生效规则,以及生效版本 |
| string | 非必填 |
| 后端灰度版本Tag,如果配置了,cookie中将携带值为 |
| string | 非必填 |
| 开启按照比例灰度时候,网关会生成一个唯一标识存在 |
| object | 非必填 | - | 往首页HTML中注入全局信息,比如 |
rules字段配置说明:
名称 | 数据类型 | 填写要求 | 默认值 | 描述 |
| string | 必填 | - | 规则名称唯一标识,和 |
| array of string | 非必填 | - | 用户ID 白名单列表 |
| string | 非必填 | - | 用户分类打标的标签key值,来自Cookie |
| array of string | 非必填 | - | 用户分类打标的标签value值,来自Cookie |
rewrite字段配置说明:
indexRouting首页重写和fileRouting文件重写,本质都是前缀匹配,比如/app1:/mfe/app1/{version}/index.html代表/app1为前缀的请求,路由到/mfe/app1/{version}/index.html页面上,其中{version}代表版本号,在运行过程中会被baseDeployment.version或者grayDeployments[].version动态替换。
{version} 作为保留字段,在执行过程中会被baseDeployment.version或者grayDeployments[].version动态替换前端版本。
名称 | 数据类型 | 填写要求 | 默认值 | 描述 |
| string | 非必填 | - | host地址,如果是OSS则设置为 VPC 内网访问地址。 |
| map of string to string | 非必填 | - | 用于定义首页重写路由规则。每个键 (Key) 表示首页的路由路径,值 (Value) 则指向重定向的目标文件。例如,键为 |
| map of string to string | 非必填 | - | 用于定义资源文件重写路由规则。每个键 (Key) 表示资源访问路径,值 (Value) 则指向重定向的目标文件。例如,键为 |
baseDeployment字段配置说明:
名称 | 数据类型 | 填写要求 | 默认值 | 描述 |
| string | 必填 | - | Base版本的版本号,作为兜底的版本 |
| string | 非必填 | - | 后端灰度版本,配合 |
| string | 非必填 | - | 和 |
grayDeployments字段配置说明:
名称 | 数据类型 | 填写要求 | 默认值 | 描述 |
| string | 必填 | - | Gray版本的版本号,如果命中灰度规则,则使用此版本。如果是非CDN部署,在header添加 |
| string | 非必填 | - | 和 |
| string | 非必填 | - | 后端灰度版本,会在 |
| string | 必填 | - | 规则名称和 |
| boolean | 非必填 | - | 是否启动当前灰度规则 |
| int | 非必填 | - | 按照比例灰度,比如50。 |
配置示例
基础配置(按用户灰度)
grayKey: userid
rules:
- name: inner-user
grayKeyValue:
- '00000001'
- '00000005'
- name: beta-user
grayKeyValue:
- '00000002'
- '00000003'
grayTagKey: level
grayTagValue:
- level3
- level5
baseDeployment:
version: base
grayDeployments:
- name: beta-user
version: gray
enabled: truecookie中的用户唯一标识为 userid,当前灰度规则配置了beta-user的规则。
当满足下面调试的时候,会使用version: gray版本,否则使用version: base版本。
cookie中
userid等于00000002或者00000003cookie中
level等于level3或者level5的用户
按比例灰度
grayKey: userid
rules:
- name: inner-user
grayKeyValue:
- '00000001'
- '00000005'
baseDeployment:
version: base
grayDeployments:
- name: inner-user
version: gray
enabled: true
weight: 80总的灰度规则为100%,其中灰度版本的权重为80%,基线版本为20%。
用户信息存在JSON中
grayKey: appInfo
graySubKey: userId
rules:
- name: inner-user
grayKeyValue:
- '00000001'
- '00000005'
- name: beta-user
grayKeyValue:
- '00000002'
- '00000003'
grayTagKey: level
grayTagValue:
- level3
- level5
baseDeployment:
version: base
grayDeployments:
- name: beta-user
version: gray
enabled: truecookie存在appInfo的JSON数据,其中包含userId字段作为当前的唯一标识。当前灰度规则配置了beta-user的规则。 当满足下面的调试条件时,会使用version: gray版本,否则使用version: base版本。
cookie中
userid等于00000002或者00000003cookie中
level等于level3或者level5的用户
用户信息存储在LocalStorage
由于网关插件需要识别用户为唯一身份信息,HTTP协议进行信息传输,只能在Header中传递。如果用户信息存储在LocalStorage,在首页注入一段脚本将LocalStorage中的用户信息设置到cookie中。
(function() {
var grayKey = '@@X_GRAY_KEY';
var cookies = document.cookie.split('; ').filter(function(row) {
return row.indexOf(grayKey + '=') === 0;
});
try {
if (typeof localStorage !== 'undefined' && localStorage !== null) {
var storageValue = localStorage.getItem(grayKey);
var cookieValue = cookies.length > 0 ? decodeURIComponent(cookies[0].split('=')[1]) : null;
if (storageValue && storageValue.indexOf('=') < 0 && cookieValue !== storageValue) {
document.cookie = grayKey + '=' + encodeURIComponent(storageValue) + '; path=/;';
window.location.reload();
}
}
} catch (error) {
// xx
}
})();rewrite重写配置
一般用于CDN部署场景,{version}会在运行过程中动态替换为真正的版本。
grayKey: userid
rules:
- name: inner-user
grayKeyValue:
- '00000001'
- '00000005'
- name: beta-user
grayKeyValue:
- '00000002'
- '00000003'
grayTagKey: level
grayTagValue:
- level3
- level5
rewrite:
host: frontend-gray.oss-cn-shanghai-internal.aliyuncs.com
notFoundUri: /mfe/app1/dev/404.html
indexRouting:
/app1: '/mfe/app1/{version}/index.html'
/: '/mfe/app1/{version}/index.html',
fileRouting:
/: '/mfe/app1/{version}'
/app1/: '/mfe/app1/{version}'
baseDeployment:
version: base
grayDeployments:
- name: beta-user
version: gray
enabled: trueindexRouting:首页路由配置
访问 /app1, /app123,/app1/index.html, /app1/xxx, /xxxx 都会路由到/mfe/app1/{version}/index.html
fileRouting:文件路由配置
下面文件映射均生效
/js/a.js=>/mfe/app1/v1.0.0/js/a.js/js/template/a.js=>/mfe/app1/v1.0.0/js/template/a.js/app1/js/a.js=>/mfe/app1/v1.0.0/js/a.js/app1/js/template/a.js=>/mfe/app1/v1.0.0/js/template/a.js
在HTML首页注入代码
grayKey: userid
rules:
- name: inner-user
grayKeyValue:
- '00000001'
- '00000005'
baseDeployment:
version: base
grayDeployments:
- name: beta-user
version: gray
enabled: true
injection:
head:
- <script>console.log('Header')</script>
body:
first:
- <script>console.log('hello world before')</script>
- <script>console.log('hello world before1')</script>
last:
- <script>console.log('hello world after')</script>
- <script>console.log('hello world after2')</script>通过 injection往HTML首页注入代码,可以在head标签注入代码,也可以在body标签的first和last位置注入代码。