Microservices Engine:Implement an end-to-end canary release on frontend applications based on MSE cloud-native gateways

Step 1: Deploy applications in the ACK cluster

For more information about how to deploy an application, see Create a stateless application by using a 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

Step 2: Configure the frontend-gray plug-in in the MSE console

1. Log on to the MSE console. In the top navigation bar, select a region.

2. In the left-side navigation pane, choose Cloud-native Gateway > Gateways. On the Gateways page, click the name of the gateway.

3. In the left-side navigation pane, click Plug-in Marketplace.

4. On the Plug-in Marketplace page, search for the frontend-gray plug-in, and click the frontend-gray plug-in card.

5. On the page that appears, click the Plug-in Configuration tab, select Domain-level plug-in rules in the Rule Levels section, and then click Add Rule. In the Add Rule panel, configure the following rule. For configuration details, see Configure rules.

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

   

Step 3: Verify the result

Step 1: Deploy applications in the ACK cluster

For more information about how to deploy an application, see Create a stateless application by using a 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

Step 2: Configure the frontend-gray plug-in in the MSE console

1. Log on to the MSE console. In the top navigation bar, select a region.

2. In the left-side navigation pane, choose Cloud-native Gateway > Gateways. On the Gateways page, click the name of the gateway.

3. In the left-side navigation pane, click Plug-in Marketplace.

4. On the Plug-in Marketplace page, search for the frontend-gray plug-in, and click the frontend-gray plug-in card.

5. On the page that appears, click the Plug-in Configuration tab, select Domain-level plug-in rules in the Rule Levels section, and then click Add Rule. In the Add Rule panel, configure the following rule. For configuration details, see Configure rules.

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

   

Step 3: Add a service source for the gateway

1. Log on to the MSE console. In the top navigation bar, select a region.

2. In the left-side navigation pane, choose Cloud-native Gateway > Gateways. On the Gateways page, click the name of the gateway.

3. In the left-side navigation pane, click Routes. On the page that appears, click the Sources tab.

4. Click Add Source. In the Add Source panel, select Container Service for Source Type, select the cluster that you created from the ACK/ASK/ACS Cluster drop-down list, and then click OK.

   

Step 4: Add a service

1. Log on to the MSE console. In the top navigation bar, select a region.

2. In the left-side navigation pane, choose Cloud-native Gateway > Gateways.

3. On the Gateways page, click the name of the gateway.

4. In the left-side navigation pane, click Routes. On the page that appears, click the Services tab.

5. Click Add Service. In the Add Service panel, configure the parameters, and click OK.

   

Step 5: Add a base route

1. Log on to the MSE console. In the top navigation bar, select a region.

2. In the left-side navigation pane, choose Cloud-native Gateway > Gateways. On the Gateways page, click the name of the gateway.

3. In the left-side navigation pane, click the Routes tab. On the Routes tab, click Add Route.

4. On the Add Route page, configure the parameters, and click Save and Advertise.

   

Step 6: Add a canary route

1. Log on to the MSE console. In the top navigation bar, select a region.

2. In the left-side navigation pane, choose Cloud-native Gateway > Gateways. On the Gateways page, click the name of the gateway.

3. In the left-side navigation pane, click the Routes tab. On the Routes tab, click Add Route.

4. On the Add Route page, configure the parameters, and click Save and Advertise.

   

   Note

   gray indicates the canary version, which corresponds to grayDeployments.version in the configuration of the frontend-gray plug-in.

1. Log on to the MSE console. In the top navigation bar, select a region.

2. In the left-side navigation pane, choose Cloud-native Gateway > Gateways. On the Gateways page, click the name of the gateway.

3. On the Overview page, click the Endpoint tab, and view the public endpoint on the Gateway Ingress subtab.

   

4. Access the public endpoint nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com, use the logon username admin and password ice to access the base version, and then check that the user ID is 00000001.

5. Access the public endpoint nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com, use the logon username user and password ice to access the canary version, and then check that the user ID is 00000002.

Step 1: Deploy two frontend application versions on an ECS instance

• Endpoint of the base application version: 120.***.137.243:80

• Endpoint of the canary application version: 120.***.137.243:8081

Step 2: Add a service

1. Log on to the MSE console. In the top navigation bar, select a region.

2. In the left-side navigation pane, choose Cloud-native Gateway > Gateways.

3. On the Gateways page, click the name of the gateway.

4. In the left-side navigation pane, click Routes. On the page that appears, click the Services tab.

5. Click Add Service. In the Add Service panel, select Fixed Address from the Service Source drop-down list, configure the parameters, and then click OK.

   

   

Step 3: Add a base route

Step 4: Add a canary route

Step 5: Configure the frontend-gray plug-in in the MSE console

Step 6: Verify the result

Step 1: Prepare an OSS file

- app1 # Application
  - dev # dev version
    - index.html
    - js
      ...
    - css
      ...
    - images
      ...
  - 0.0.1  # 001 version
    - index.html
    - js
      ...
    - css
      ...
    - images
      ...
  - 0.0.2  # 002 version
    - 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
      ...

Step 2: Add a service

1. Log on to the MSE console. In the top navigation bar, select a region.

2. In the left-side navigation pane, choose Cloud-native Gateway > Gateways.

3. On the Gateways page, click the name of the gateway.

4. In the left-side navigation pane, click Routes. On the page that appears, click the Services tab.

5. Click Add Service. In the Add Service panel, select DNS Domain Name from the Service Source drop-down list, enter the endpoints of OSS, and then click OK.

   

   Important

   If OSS and the gateway are deployed in the same region, we recommend that you enter the internal endpoints of OSS. If OSS and the gateway are not deployed in the same region, enter the public endpoints.

Step 3: Add a route

1. Log on to the MSE console. In the top navigation bar, select a region.

2. In the left-side navigation pane, choose Cloud-native Gateway > Gateways.

3. On the Gateways page, click the name of the gateway.

4. In the left-side navigation pane, click the Routes tab. On the Routes tab, click Add Route.

5. On the Add Route page, configure the parameters, and click Save and Advertise.

   

Step 4: Configure the frontend-gray plug-in in the MSE console

1. Log on to the MSE console. In the top navigation bar, select a region.

2. In the left-side navigation pane, choose Cloud-native Gateway > Gateways.

3. On the Gateways page, click the name of the gateway.

4. In the left-side navigation pane, click Plug-in Marketplace.

5. On the Plug-in Marketplace page, search for the frontend-gray plug-in, and click the frontend-gray plug-in card.

6. On the page that appears, click the Plug-in Configuration tab, select Domain-level plug-in rules in the Rule Levels section, and then click Add Rule. In the Add Rule panel, configure the following rule. For configuration details, see Configure rules.

   grayKey: userid
   rules:
     - name: beta-user
       grayKeyValue:
         - "00000002"
         - "00000003"
   rewrite:
     host: xx.oss-cn-shanghai.aliyuncs.com ## OSS endpoint
     indexRouting:
       "/app1": "/project-a/app1/{version}/index.html" # Path rewrite of the HTML home page
     fileRouting:
        "/app1": "/project-a/app1/{version}" # Path rewrite of resources such as CSS properties, JavaScript scripts, and images
   baseDeployment:
     version: dev
   grayDeployments:
     - name: beta-user
       version: 0.0.1
       enabled: true

Step 5: Verify the result

Can I configure rewrite policies and canary releases on frontend applications at the same time?

• If the service source is not CDN or OSS, you can configure canary releases of frontend applications and rewrite policies at the same time and make them take effect.

• If the service source is CDN or OSS, you cannot configure canary releases of frontend applications and rewrite policies at the same time. This is because the relevant rewrite policies are already implemented in the frontend-gray plug-in. If you configure a rewrite policy, conflicts may occur. As a result, errors such as the status code 403 are returned.

Can I inject some global variables into the HTML home page?

• Inject some global JavaScript scripts into the <head> tag (usually properties such as CSS styles) of the HTML page, or into the first and last positions of the <body> tag of the HTML page.

• Use injection to inject code into the HTML home page. You can inject code into the <head> tag, or into the first and last positions of the <body> tag.

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>

When does a canary version take effect?

For User A, the current version of the frontend application is 0.0.1 and the canary version is 0.0.2. If a canary release rule is hit for User A, the system does not make the canary version immediately take effect.

This is due to the following reasons:

• If the canary version needs to take effect in real time, the backend needs to dynamically control the version. Frontend release cannot decouple from backend release. CDN acceleration cannot be performed because page stability strongly depends on the interface.

• If the canary version takes effect in real time, when customers use a specific feature, a button in use may become unavailable at any time. This results in poor user experience.

When can I refresh a page?

• In most cases, you need to re-log on to a website after a session times out.

• You can log on to the application on the logon page.

When you log on to a page, refresh the page to obtain the latest canary release information. The following code shows an example for frontend application logon.

async function handleLogin(values: LoginParams) {
    try {
      const result = await login(values);
      if (result.success) {
        message.success ('Logon succeeded. ');
        await updateUserInfo();
        const urlParams = new URL(window.location.href).searchParams;
  	    window.location.href = `${urlParams.get('redirect') || '/'}`;
        return;
      }
      console.log(result);
      // Configure an error message that is returned for logon failures. The following code shows a sample error message.
      setLoginResult(result);
    } catch (error) {
      message.error('Logon failed. Try again. ');
      console.log(error);
    }
  }