Microservices Engine:Frontend canary release using an MSE cloud-native gateway

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 ID of the gateway.

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

4. On the Plug-in Marketplace page, search for frontend-gray 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

   Turn on the Enable switch. In the Target drop-down list, select * (all domains). Click OK.

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 ID of the gateway.

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

4. On the Plug-in Marketplace page, search for frontend-gray 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

   Turn on the Enable switch. In the Target drop-down list, select * (all domains). Click OK.

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 ID of the gateway.

3. In the left-side navigation pane, click Routes. Then, click the Source tab.

4. Click Add Source. In the Add Source panel, set Source Type to Container Service. For ACK/ASK/ACS Cluster, select the ACK cluster that you created, and then click OK.

   Turn on the Listen to K8s Ingress switch. By default, the gateway listens for Ingress resources in all namespaces. To change this, click Custom. In the Security Group Authorization section, confirm the security group and port range, which defaults to 1/65535.

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 ID of the gateway.

4. In the left-side navigation pane, click Routes. Then, click the Services tab.

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

   Set Service Source to Container Service. For Namespace, select default. In the service list, select the checkboxes for frontend-base-svc and frontend-gray-svc.

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 ID of the gateway.

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

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

   Set Route Name to base-route. For Path, select Prefix is and enter /. For Destination, select Single Service. For Service Name, select frontend-base-svc. Set Service Protocol to HTTP, Service Port to 80, and Timeout to 60 seconds.

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 ID of the gateway.

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

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

   Set Route Name to gray-route and Domain to *. For Path, select prefix match and enter /. In the Request Header section, add a new entry: set Header Name to x-higress-tag, Condition to Prefix is, and Value to gray. For Destination, select Single Service and select frontend-gray-svc as the Service Name. Set the service protocol to HTTP and the port to 80.

   Note

   The value gray represents the canary version and corresponds to the grayDeployments.version setting in the frontend-gray plug-in configuration.

Step 7: Verify the result

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

• Base application endpoint: 120.***.137.243:80

• Canary application endpoint: 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 ID of the gateway.

4. In the left-side navigation pane, click Routes. Then, click the Services tab.

5. Click Add Service. In the Add Service panel, set Fixed Address to Fixed Address, configure the service parameters, and then click OK.

   Set Service Name to frontend-base-svc. For Service Address, enter the IP address and port of the server in ip:port format. Use a new line for each address. If you use a public IP address, you must configure a NAT gateway in the VPC. Set TLS Mode to Disable, and then click OK.

Step 3: Add a base route

This section describes the parameters for the canary service. Set Service Name to frontend-gray-svc. For Service Address, enter the IP address and port of the target service in ip:port format. Use a new line for each address. If you use a public IP address, you must configure a NAT gateway in the VPC. Set TLS Mode to Disable.

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 ID of the gateway.

4. In the left-side navigation pane, click Routes. Then, click the Services tab.

5. Click Add Service. In the Add Service panel, set DNS Domain Name to DNS Domain Name, enter the OSS address in the domain list, and then click OK.

   Set Service Name to static-oss, Service Port to 80, and TLS Mode to Disable.

   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 ID of the gateway.

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

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

   Example parameters: Set Route Name to project-a-app-1. Set Domain to *. For Path, select Prefix is, enter /app1, and select the Case-sensitive checkbox. For Destination, select Single Service. In the backend service section, select static-oss as the Service Name, HTTP as the Service Protocol, and 80 as the Service Port. Set Timeout to 60 seconds.

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 ID of the gateway.

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

5. On the Plug-in Marketplace page, search for frontend-gray 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?

Assume a user is on version 0.0.1 of a frontend application. If you release version 0.0.2 and the user matches the canary rule, does the new version take effect immediately?

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.

Therefore, the page should be refreshed during the login process to fetch the latest canary release information. The following example shows the frontend login code:

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