步驟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文件規劃

- 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);
    }
  }