基于MSE云原生网关实现前端灰度

步骤1：使用容器服务部署应用

应用部署的具体操作，请参见创建无状态工作负载Deployment。

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend
  namespace: default
spec:
  replicas: 1
  selector:
    matchLabels:
      app: frontend
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
        - image: 'registry.cn-hangzhou.aliyuncs.com/mse-demo-hz/user-gray:base'
          imagePullPolicy: Always
          name: frontend
          resources: {}
---
apiVersion: v1
kind: Service
metadata:
  name: frontend-base-svc
  namespace: default
spec:
  ports:
    - port: 80
      protocol: TCP
      targetPort: 80
  selector:
    app: frontend
  type: ClusterIP

---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  labels:
    ingress-controller: mse
  namespace: default
  name: frontend-base-ingress
spec:
  ingressClassName: mse
  rules:
    - http:
        paths:
          - backend:
              service:
                name: frontend-base-svc
                port:
                  number: 80
            path: /
            pathType: Prefix

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend-gray
  namespace: default
spec:
  replicas: 1
  selector:
    matchLabels:
      app: frontend-gray
  template:
    metadata:
      labels:
        app: frontend-gray
    spec:
      containers:
        - image: 'registry.cn-hangzhou.aliyuncs.com/mse-demo-hz/user-gray:gray'
          imagePullPolicy: Always
          name: frontend-gray
          resources: {}
---
apiVersion: v1
kind: Service
metadata:
  name: frontend-gray-svc
  namespace: default
spec:
  ports:
    - port: 80
      protocol: TCP
      targetPort: 80
  selector:
    app: frontend-gray
  type: ClusterIP

---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  labels:
    ingress-controller: mse
  annotations:
    nginx.ingress.kubernetes.io/canary: 'true'
    nginx.ingress.kubernetes.io/canary-by-header: x-higress-tag
    nginx.ingress.kubernetes.io/canary-by-header-value: gray
  name: frontend-gray-ingress
  namespace: default
spec:
  ingressClassName: mse
  rules:
    - http:
        paths:
          - backend:
              service:
                name: frontend-gray-svc
                port:
                  number: 80
            path: /
            pathType: Prefix

步骤2：MSE控制台配置灰度插件

1. 登录MSE网关管理控制台，并在顶部菜单栏选择地域。

2. 在左侧导航栏，选择云原生网关 > 网关列表，单击目标网关名称。

3. 在左侧导航栏，单击插件市场。

4. 在插件市场页面，选择自定义，然后单击创建插件。

5. 在创建插件面板，填写插件参数信息，单击确定，等待插件发布成功。

   参数	值
   插件名称	frontend-gray
   插件描述	frontend-gray
   wasm实现语言	TinyGo
   wasm文件	上传下载的 frontend-gray（main.wasm）文件
   插件执行阶段	默认阶段
   插件执行优先级	100

6. 插件发布成功之后，单击创建的插件frontend-gray选项卡，选择插件配置 > 实例级插件规则。

7. 在实例级插件规则页面配置如下规则，详细配置可参见配置规则。

   grayKey: userid
   rules:
     - name: beta-user
       grayKeyValue:
         - "00000002"
         - "00000003"
   baseDeployment:
     version: base
   grayDeployments:
     - name: beta-user
       version: gray
       enabled: true

   

步骤3：结果验证

步骤1：使用容器服务部署应用

应用部署的具体操作，请参见创建无状态工作负载Deployment。

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend
  namespace: default
spec:
  replicas: 1
  selector:
    matchLabels:
      app: frontend
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
        - image: 'registry.cn-hangzhou.aliyuncs.com/mse-demo-hz/user-gray:base'
          imagePullPolicy: Always
          name: frontend
          resources: {}
---
apiVersion: v1
kind: Service
metadata:
  name: frontend-base-svc
  namespace: default
spec:
  ports:
    - port: 80
      protocol: TCP
      targetPort: 80
  selector:
    app: frontend
  type: ClusterIP

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend-gray
  namespace: default
spec:
  replicas: 1
  selector:
    matchLabels:
      app: frontend-gray
  template:
    metadata:
      labels:
        app: frontend-gray
    spec:
      containers:
        - image: 'registry.cn-hangzhou.aliyuncs.com/mse-demo-hz/user-gray:gray'
          imagePullPolicy: Always
          name: frontend-gray
          resources: {}
---
apiVersion: v1
kind: Service
metadata:
  name: frontend-gray-svc
  namespace: default
spec:
  ports:
    - port: 80
      protocol: TCP
      targetPort: 80
  selector:
    app: frontend-gray
  type: ClusterIP

步骤2：MSE控制台配置灰度插件

1. 登录MSE网关管理控制台，并在顶部菜单栏选择地域。

2. 在左侧导航栏，选择云原生网关 > 网关列表，单击目标网关名称。

3. 在左侧导航栏，单击插件市场。

4. 在插件市场页面，选择自定义，然后单击创建插件。

5. 在创建插件面板，填写插件参数信息，单击确定，等待插件发布成功。

   参数	值
   插件名称	frontend-gray
   插件描述	frontend-gray
   wasm实现语言	TinyGo
   wasm文件	上传下载的 frontend-gray（main.wasm）文件
   插件执行阶段	默认阶段
   插件执行优先级	100

6. 插件发布成功之后，单击创建的插件frontend-gray选项卡，选择插件配置 > 实例级插件规则。

7. 在实例级插件规则页面配置如下规则，详细配置可参见配置规则。

   grayKey: userid
   rules:
     - name: beta-user
       grayKeyValue:
         - "00000002"
         - "00000003"
   baseDeployment:
     version: base
   grayDeployments:
     - name: beta-user
       version: gray
       enabled: true

   

步骤3：添加网关服务来源

1. 登录MSE网关管理控制台，并在顶部菜单栏选择地域。

2. 在左侧导航栏，选择云原生网关 > 网关列表，单击目标网关名称。

3. 在左侧导航栏，选择路由管理，然后选择来源页签。

4. 单击创建来源。在创建来源面板，配置来源类型为容器服务，ACK/ACK Serverless集群选择所创建的容器服务集群， 然后单击确定。

   

步骤4：创建服务

1. 登录MSE网关管理控制台，并在顶部菜单栏选择地域。

2. 在左侧导航栏选择云原生网关 > 网关列表。

3. 在网关列表页面，单击目标网关名称。

4. 在左侧导航栏，选择路由管理，然后选择服务页签。

5. 单击创建服务。在创建服务面板，配置服务相关参数，然后单击确定。

   

步骤5：创建base路由

1. 登录MSE网关管理控制台，并在顶部菜单栏选择地域。

2. 在左侧导航栏，选择云原生网关 > 网关列表，单击目标网关名称。

3. 在左侧导航栏，单击路由管理，然后在路由页签单击创建路由。

4. 在创建路由页面，配置相关项，然后单击保存。

   

步骤6：创建gray路由

1. 登录MSE网关管理控制台，并在顶部菜单栏选择地域。

2. 在左侧导航栏，选择云原生网关 > 网关列表，单击目标网关名称。

3. 在左侧导航栏，单击路由管理，然后在路由页签单击创建路由。

4. 在创建路由页面，配置相关配置项，然后单击保存。

   

   说明

   gray代表灰度版本，和frontend-gray配置中 deploy.gray.version对应

1. 登录MSE网关管理控制台，并在顶部菜单栏选择地域。

2. 在左侧导航栏，选择云原生网关 > 网关列表，单击目标网关名称。

3. 在网关详情页面找到网关入口，查看公网访问端点。

   

4. 访问公网端点8.136.xxx.xxx，登录 admin/ice 账号，访问主版本，用户ID为 00000001。

   

5. 访问公网端点8.136.xxx.xxx，登录普通用户user/ice，访问灰度版本，用户ID为 00000002。

   

步骤1：ECS分别部署两个前端应用

基线应用地址为：120.79.137.243:80

灰度应用地址为：120.79.137.243:8081

步骤2：创建服务

1. 登录MSE网关管理控制台，并在顶部菜单栏选择地域。

2. 在左侧导航栏选择云原生网关 > 网关列表。

3. 在网关列表页面，单击目标网关名称。

4. 在左侧导航栏，选择路由管理，然后选择服务页签。

5. 单击创建服务。在创建服务面板，服务来源为固定地址，配置服务相关参数，然后单击确定。

   

   

步骤3：创建base路由

步骤4：创建gray路由

步骤5：MSE控制台配置灰度插件

步骤6：结果验证

步骤1：OSS文件规划

- project-a # 项目
	- app1 # 应用
  	- dev # dev版本
    	- index.html
    	- js
      	...
    	- css
      	...
    	- images
      	...
  	- 0.0.1  # 001版本
    	- index.html
    	- js
      	...
    	- css
      	...
    	- images
      	...
  	- 0.0.2  # 002版本
    	- index.html
    	- js
      	...
    	- css
      	...
    	- images
      	...
	- app2
    - dev
    	- index.html
    	- js
      	...
    	- css
      	...
    	- images
      	...
  	- 0.0.1
    	- index.html
    	- js
      	...
    	- css
      	...
    	- images
      	...
  	- 0.0.2
    	- index.html
    	- js
      	...
    	- css
      	...
    	- images
      	...

步骤2：创建服务

1. 登录MSE网关管理控制台，并在顶部菜单栏选择地域。

2. 在左侧导航栏选择云原生网关 > 网关列表。

3. 在网关列表页面，单击目标网关名称。

4. 在左侧导航栏，选择路由管理，然后选择服务页签。

5. 单击创建服务。在创建服务面板，服务来源为DNS域名，域名列表填写OSS地址，然后单击确定。

   

   重要

   如果OSS的和网关在同一个Region，建议填写OSS的内网地址，如果不在一个Region，请填写公网地址。

步骤3：创建路由

1. 登录MSE网关管理控制台，并在顶部菜单栏选择地域。

2. 在左侧导航栏，选择云原生网关 > 网关列表，单击目标网关名称。

3. 在左侧导航栏，单击路由管理，然后在路由页签单击创建路由。

4. 在创建路由页面，配置相关项，然后单击保存。

   

步骤4：MSE控制台配置灰度插件

1. 登录MSE网关管理控制台，并在顶部菜单栏选择地域。

2. 在左侧导航栏，选择云原生网关 > 网关列表，单击目标网关名称。

3. 在左侧导航栏，单击插件市场。

4. 在插件市场页面，选择自定义，然后单击创建插件。

5. 在创建插件面板，填写插件参数信息，单击确定，等待插件发布成功。

   参数	值
   插件名称	frontend-gray
   插件描述	frontend-gray
   wasm实现语言	TinyGo
   wasm文件	上传下载的 frontend-gray（main.wasm）文件
   插件执行阶段	默认阶段
   插件执行优先级	100

6. 插件发布成功之后，单击创建的插件frontend-gray选项卡，选择插件配置 > 实例级插件规则。

7. 在实例级插件规则页面配置如下规则，详细配置可参见配置规则。

   grayKey: userid
   rules:
     - name: beta-user
       grayKeyValue:
         - "00000002"
         - "00000003"
   rewrite:
     host: xx.oss-cn-shanghai.aliyuncs.com ##OSS 地址
     indexRouting:
       "/app1": "/project-a/app1/{version}/index.html" #首页（html）路径重写
     fileRouting:
        "/app1": "/project-a/app1/{version}" #资源（css/js/images）路径重写
   baseDeployment:
     version: dev
   grayDeployments:
     - name: beta-user
       version: 0.0.1
       enabled: true

步骤5：结果验证

前端灰度是否还可以配置重写策略

• 如果服务来源是非CDN/OSS ，可以搭配重写策略生效。

• 如果服务来源是CDN/OSS的前端灰度是不可以搭配重写策略，因为相关的重写策略在frontend-gray灰度插件中实现了，如果配置重写策略，会发生冲突，返回403等一些异常情况。

是否可以往HTML首页注入一些全局变量

• 可以在html的<head> 标签中（一般是CSS样式等属性），或者<body>标签的头部和尾部注入一些全局JavaScript脚本。

• 通过injection往HTML首页注入代码，可以在head标签注入代码，也可以在body标签的first和last位置注入代码。

grayKey: userid
rules:
- name: inner-user
  grayKeyValue:
  - '00000001'
  - '00000005'
baseDeployment:
  version: base
grayDeployments:
  - name: beta-user
    version: gray
    enabled: true
    weight: 80
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>

灰度版本生效时机？

假设A用户现在的前端版本是0.0.1, 这时候发布前端版本 0.0.2, 并且A客户命中了灰度规则，是否能立即生效？

是不会立即生效，出于下面几点原因考虑：

• 如果发布版本需要实时生效，这时候就需要由后端来动态控制版本。首先无法实现前后端发布解耦，其次页面的稳定性强依赖这个接口，无法做CDN加速。

• 假设版本能够实时生效，客户在使用某个功能的时候，可能出现上一秒还在使用某个按钮，下一秒这个按钮就不见了的情况。体验非常糟糕。

什么时机刷新页面？

• 一般网站是有设置Session超时重新登录，一段时间没有访问后，需重新登录页面。

• 用户通过登录页面登录到应用中。

所以，在登录页面的时候，需要刷新页面，以获取最新的灰度信息。前端登录示例代码如下：

async function handleLogin(values: LoginParams) {
    try {
      const result = await login(values);
      if (result.success) {
        message.success('登录成功！');
        await updateUserInfo();
        const urlParams = new URL(window.location.href).searchParams;
  	    window.location.href = `${urlParams.get('redirect') || '/'}`;
        return;
      }
      console.log(result);
      // 如果失败去设置用户错误信息，显示提示信息
      setLoginResult(result);
    } catch (error) {
      message.error('登录失败，请重试！');
      console.log(error);
    }
  }