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

Etapa 1: Implante aplicações no cluster ACK

Para mais informações sobre como implantar uma aplicação, consulte Criar uma aplicação stateless usando um 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

Etapa 2: Configure o plug-in frontend-gray no console MSE

1. Faça login no console MSE. Na barra de navegação superior, selecione uma região.

2. No painel de navegação à esquerda, escolha Cloud-native Gateway > Gateways. Na página Gateways, clique no ID do gateway.

3. No painel de navegação à esquerda, clique em Plug-in Marketplace.

4. Na página Plug-in Marketplace, pesquise por frontend-gray e clique no cartão do plug-in frontend-gray.

5. Na página exibida, clique na aba Plug-in Configuration, selecione Domain-level plug-in rules na seção Rule Levels e clique em Add Rule. No painel Add Rule, configure a seguinte regra. Para detalhes de configuração, consulte Configurar regras.

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

   Ative a chave Enable. Na lista suspensa Target, selecione * (todos os domínios). Clique em OK.

Etapa 3: Verifique o resultado

Etapa 1: Implante aplicações no cluster ACK

Para mais informações sobre como implantar uma aplicação, consulte Criar uma aplicação stateless usando um 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

Etapa 2: Configure o plug-in frontend-gray no console MSE

1. Faça login no console MSE. Na barra de navegação superior, selecione uma região.

2. No painel de navegação à esquerda, escolha Cloud-native Gateway > Gateways. Na página Gateways, clique no ID do gateway.

3. No painel de navegação à esquerda, clique em Plug-in Marketplace.

4. Na página Plug-in Marketplace, pesquise por frontend-gray e clique no cartão do plug-in frontend-gray.

5. Na página exibida, clique na aba Plug-in Configuration, selecione Domain-level plug-in rules na seção Rule Levels e clique em Add Rule. No painel Add Rule, configure a seguinte regra. Para detalhes de configuração, consulte Configurar regras.

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

   Ative a chave Enable. Na lista suspensa Target, selecione * (todos os domínios). Clique em OK.

Etapa 3: Adicione uma origem de serviço para o gateway

1. Faça login no console MSE. Na barra de navegação superior, selecione uma região.

2. No painel de navegação à esquerda, escolha Cloud-native Gateway > Gateways. Na página Gateways, clique no ID do gateway.

3. No painel de navegação à esquerda, clique em Routes. Em seguida, clique na aba Source.

4. Clique em Add Source. No painel Add Source, defina Source Type como Container Service. Para ACK/ASK/ACS Cluster, selecione o cluster ACK criado e clique em OK.

   Ative a chave Listen to K8s Ingress. Por padrão, o gateway escuta recursos de Ingress em todos os namespaces. Para alterar isso, clique em Custom. Na seção Security Group Authorization, confirme o grupo de segurança e o intervalo de portas, cujo padrão é 1/65535.

Etapa 4: Adicione um serviço

1. Faça login no console MSE. Na barra de navegação superior, selecione uma região.

2. No painel de navegação à esquerda, escolha Cloud-native Gateway > Gateways.

3. Na página Gateways, clique no ID do gateway.

4. No painel de navegação à esquerda, clique em Routes. Em seguida, clique na aba Services.

5. Clique em Add Service. No painel Add Service, configure os parâmetros do serviço e clique em OK.

   Defina Service Source como Container Service. Para Namespace, selecione default. Na lista de serviços, marque as caixas de seleção de frontend-base-svc e frontend-gray-svc.

Etapa 5: Adicione uma rota base

1. Faça login no console MSE. Na barra de navegação superior, selecione uma região.

2. No painel de navegação à esquerda, escolha Cloud-native Gateway > Gateways. Na página Gateways, clique no ID do gateway.

3. No painel de navegação à esquerda, clique em Routes. Na aba Routes, clique em Add Route.

4. Na página Add Route, configure os parâmetros e clique em Save and Advertise.

   Defina Route Name como base-route. Para Path, selecione Prefix is e insira /. Para Destination, selecione Single Service. Em Service Name, selecione frontend-base-svc. Defina Service Protocol como HTTP, Service Port como 80 e Timeout como 60 segundos.

Etapa 6: Adicione uma rota canária

1. Faça login no console MSE. Na barra de navegação superior, selecione uma região.

2. No painel de navegação à esquerda, escolha Cloud-native Gateway > Gateways. Na página Gateways, clique no ID do gateway.

3. No painel de navegação à esquerda, clique em Routes. Na aba Routes, clique em Add Route.

4. Na página Add Route, configure os parâmetros e clique em Save and Advertise.

   Defina Route Name como gray-route e Domain como *. Para Path, selecione correspondência de prefixo e insira /. Na seção Request Header, adicione uma nova entrada: defina Header Name como x-higress-tag, Condition como Prefix is e Value como gray. Para Destination, selecione Single Service e escolha frontend-gray-svc como Service Name. Defina o protocolo do serviço como HTTP e a porta como 80.

   Nota

   O valor gray representa a versão canária e corresponde à configuração grayDeployments.version na configuração do plug-in frontend-gray.

Etapa 7: Verifique o resultado

Etapa 1: Implante duas versões da aplicação frontend em uma instância ECS

• Endpoint da aplicação base: 120.***.137.243:80

• Endpoint da aplicação canária: 120.***.137.243:8081

Etapa 2: Adicione um serviço

1. Faça login no console MSE. Na barra de navegação superior, selecione uma região.

2. No painel de navegação à esquerda, escolha Cloud-native Gateway > Gateways.

3. Na página Gateways, clique no ID do gateway.

4. No painel de navegação à esquerda, clique em Routes. Em seguida, clique na aba Services.

5. Clique em Add Service. No painel Add Service, defina Fixed Address como Fixed Address, configure os parâmetros do serviço e clique em OK.

   Defina Service Name como frontend-base-svc. Para Service Address, insira o endereço IP e a porta do servidor no formato ip:port. Use uma nova linha para cada endereço. Se utilizar um endereço IP público, configure um gateway NAT na VPC. Defina TLS Mode como Disable e clique em OK.

Etapa 3: Adicione uma rota base

Esta seção descreve os parâmetros para o serviço canário. Defina Service Name como frontend-gray-svc. Para Service Address, insira o endereço IP e a porta do serviço de destino no formato ip:port. Use uma nova linha para cada endereço. Se utilizar um endereço IP público, configure um gateway NAT na VPC. Defina TLS Mode como Disable.

Etapa 4: Adicione uma rota canária

Etapa 5: Configure o plug-in frontend-gray no console MSE

Etapa 6: Verifique o resultado

Etapa 1: Prepare um arquivo no OSS

- 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
      ...

Etapa 2: Adicione um serviço

1. Faça login no console MSE. Na barra de navegação superior, selecione uma região.

2. No painel de navegação à esquerda, escolha Cloud-native Gateway > Gateways.

3. Na página Gateways, clique no ID do gateway.

4. No painel de navegação à esquerda, clique em Routes. Em seguida, clique na aba Services.

5. Clique em Add Service. No painel Add Service, defina DNS Domain Name como DNS Domain Name, insira o endereço do OSS na lista de domínios e clique em OK.

   Defina Service Name como static-oss, Service Port como 80 e TLS Mode como Disable.

   Importante

   Se o OSS e o gateway estiverem implantados na mesma região, recomendamos inserir os endpoints internos do OSS. Caso contrário, insira os endpoints públicos.

Etapa 3: Adicione uma rota

1. Faça login no console MSE. Na barra de navegação superior, selecione uma região.

2. No painel de navegação à esquerda, escolha Cloud-native Gateway > Gateways.

3. Na página Gateways, clique no ID do gateway.

4. No painel de navegação à esquerda, clique em Routes. Na aba Routes, clique em Add Route.

5. Na página Add Route, configure os parâmetros e clique em Save and Advertise.

   Exemplo de parâmetros: Defina Route Name como project-a-app-1. Defina Domain como *. Para Path, selecione Prefix is, insira /app1 e marque a caixa de seleção Case-sensitive. Para Destination, selecione Single Service. Na seção backend service, selecione static-oss como Service Name, HTTP como Service Protocol e 80 como Service Port. Defina Timeout como 60 segundos.

Etapa 4: Configure o plug-in frontend-gray no console MSE

1. Faça login no console MSE. Na barra de navegação superior, selecione uma região.

2. No painel de navegação à esquerda, escolha Cloud-native Gateway > Gateways.

3. Na página Gateways, clique no ID do gateway.

4. No painel de navegação à esquerda, clique em Plug-in Marketplace.

5. Na página Plug-in Marketplace, pesquise por frontend-gray e clique no cartão do plug-in frontend-gray.

6. Na página exibida, clique na aba Plug-in Configuration, selecione Domain-level plug-in rules na seção Rule Levels e clique em Add Rule. No painel Add Rule, configure a seguinte regra. Para detalhes de configuração, consulte Configurar regras.

   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

Etapa 5: Verifique o resultado

Posso configurar políticas de reescrita e liberações canárias em aplicações frontend simultaneamente?

• Se a origem do serviço não for CDN ou OSS, é possível configurar liberações canárias de aplicações frontend e políticas de reescrita ao mesmo tempo, fazendo com que ambas entrem em vigor.

• Caso a origem do serviço seja CDN ou OSS, não é possível configurar liberações canárias de aplicações frontend e políticas de reescrita simultaneamente. Isso ocorre porque as políticas de reescrita relevantes já estão implementadas no plug-in frontend-gray. Configurar uma política de reescrita adicional pode causar conflitos, resultando em erros como o código de status 403.

Posso injetar variáveis globais na página inicial HTML?

• Injete scripts JavaScript globais na tag <head> (geralmente propriedades como estilos CSS) da página HTML, ou nas primeiras e últimas posições da tag <body> da página HTML.

• Utilize injection para inserir código na página inicial HTML. É possível injetar código na tag <head>, ou nas posições first (primeira) e last (última) da tag <body>.

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>

Quando uma versão canária entra em vigor?

Suponha que um usuário esteja na versão 0.0.1 de uma aplicação frontend. Se você lançar a versão 0.0.2 e o usuário corresponder à regra canária, a nova versão entrará em vigor imediatamente?

Isso se deve aos seguintes motivos:

• Para que a versão canária entre em vigor em tempo real, o backend precisa controlar a versão dinamicamente. O lançamento frontend não pode ser desacoplado do lançamento backend. A aceleração via CDN não pode ser realizada, pois a estabilidade da página depende fortemente da interface.

• Se a versão canária entrar em vigor em tempo real, quando os clientes estiverem usando um recurso específico, um botão em uso pode ficar indisponível a qualquer momento. Isso resulta em uma experiência de usuário ruim.

Quando posso atualizar uma página?

• Na maioria dos casos, é necessário fazer login novamente no site após o tempo limite da sessão.

• É possível fazer login na aplicação através da página de login.

Portanto, a página deve ser atualizada durante o processo de login para obter as informações mais recentes da liberação canária. O exemplo a seguir mostra o código de login frontend:

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