Microservices Engine:MSE クラウドネイティブゲートウェイを使用したフロントエンドのカナリアリリース

ステップ 1：ACK クラスターへのアプリケーションのデプロイ

アプリケーションのデプロイ方法の詳細については、「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 コンソールでの frontend-gray プラグインの設定

1. MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。

2. 左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。[ゲートウェイ] ページで、ゲートウェイの ID をクリックします。

3. 左側のナビゲーションウィンドウで、Plug-in Marketplace をクリックします。

4. Plug-in Marketplace ページで、frontend-gray を検索し、frontend-gray プラグインカードをクリックします。

5. 表示されたページで、Plug-in Configuration タブをクリックし、ルールレベル セクションで Domain-level plug-in rules を選択し、次に Add Rule をクリックします。 Add Rule パネルで、次のルールを構成します。 構成の詳細については、「ルールの構成」をご参照ください。

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

   [有効] スイッチをオンにし、[ターゲット] ドロップダウンリストで * (すべてのドメイン) を選択して、[OK] をクリックします。

ステップ 3：結果の検証

ステップ 1：ACK クラスターへのアプリケーションのデプロイ

アプリケーションのデプロイ方法の詳細については、「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 コンソールでの frontend-gray プラグインの設定

1. MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。

2. 左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト の順に選択します。[ゲートウェイ] ページで、ゲートウェイの ID をクリックします。

3. 左側のナビゲーションウィンドウで、Plug-in Marketplace をクリックします。

4. Plug-in Marketplace ページで、frontend-gray を検索し、frontend-gray プラグイン カードをクリックします。

5. 表示されたページで、Plug-in Configuration タブをクリックし、ルールレベルセクションで Domain-level plug-in rules を選択して、Add Rule をクリックします。Add Rule パネルで、次のルールを設定します。構成の詳細については、「ルールを設定する」をご参照ください。

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

   [有効化] スイッチをオンにします。 [ターゲット] ドロップダウンリストで、* (すべてのドメイン) を選択します。 [OK] をクリックします。

ステップ 3：ゲートウェイへのサービスソースの追加

1. MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。

2. 左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。[ゲートウェイ] ページで、ゲートウェイの ID をクリックします。

3. 左側のナビゲーションウィンドウで、Routes をクリックします。 次に、[ソース] タブをクリックします。

4. Add Source をクリックします。Add Source パネルで、Source Type を Container Service に設定します。ACK/ASK/ACS Cluster には、作成した ACK クラスターを選択し、OK をクリックします。

   [K8s Ingress のリッスン] スイッチをオンにします。デフォルトでは、ゲートウェイはすべての名前空間にある Ingress リソースをリッスンします。これを変更するには、[カスタム] をクリックします。[セキュリティグループの承認] セクションで、セキュリティグループとポート範囲 (デフォルトは 1/65535) を確認します。

ステップ 4：サービスの追加

1. MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。

2. 左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。

3. ゲートウェイリスト ページで、ゲートウェイの ID をクリックします。

4. 左側のナビゲーションウィンドウでRoutesをクリックし、次に[サービス]タブをクリックします。

5. Add Service をクリックします。Add Service パネルで、サービスパラメーターを設定し、OK をクリックします。

   [サービスソース] を [コンテナサービス] に設定します。[名前空間] で、[default] を選択します。サービスリストで、frontend-base-svc と frontend-gray-svc のチェックボックスを選択します。

ステップ 5：ベースルートの追加

1. MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。

2. 左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択し、[ゲートウェイ] ページでゲートウェイの ID をクリックします。

3. 左側のナビゲーションウィンドウで、Routes をクリックします。Routes タブで、Add Route をクリックします。

4. Add Route ページで、パラメーターを設定し、Save and Advertise をクリックします。

   [ルート名] を base-route に設定します。[パス] には、[プレフィックス] を選択し、/ を入力します。[宛先] には、[単一サービス] を選択します。[サービス名] には、frontend-base-svc を選択します。[サービスプロトコル] を HTTP に、[サービスポート] を 80 に、[タイムアウト] を 60 秒に設定します。

ステップ 6：カナリアルートの追加

1. MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。

2. 左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。[ゲートウェイ] ページで、ゲートウェイの ID をクリックします。

3. 左側のナビゲーションウィンドウで、Routes をクリックします。Routes タブで、Add Route をクリックします。

4. Add Route ページで、パラメーターを設定し、Save and Advertise をクリックします。

   [ルート名] を gray-route に、[ドメイン] を * に設定します。[パス] には、プレフィックス一致を選択して / を入力します。[リクエストヘッダー] セクションで新しいエントリを追加し、ヘッダー名を x-higress-tag に、条件をプレフィックスに、値を gray に設定します。宛先には、[単一サービス] を選択し、[サービス名] として frontend-gray-svc を選択します。サービスプロトコルを HTTP に、ポートを 80 に設定します。

   説明

   値 gray はカナリアバージョンを表し、frontend-gray プラグイン構成の grayDeployments.version 設定に対応します。

ステップ 7：結果の検証

ステップ 1：ECS インスタンスへの 2 つのフロントエンドアプリケーションバージョンのデプロイ

• ベースアプリケーションのエンドポイント：120.***.137.243:80

• カナリアアプリケーションのエンドポイント：120.***.137.243:8081

ステップ 2：サービスの追加

1. MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。

2. 左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。

3. ゲートウェイリスト ページで、ゲートウェイの ID をクリックします。

4. 左側のナビゲーションウィンドウで、Routes をクリックします。次に、[サービス] タブをクリックします。

5. Add Service をクリックします。Add Service パネルで、Fixed Address を Fixed Address に設定し、サービスパラメーターを設定した後、OK をクリックします。

   [サービス名] を frontend-base-svc に設定します。[サービスアドレス] には、サーバーの IP アドレスとポートを ip:port 形式で入力します。各アドレスは改行して入力します。パブリック IP アドレスを使用する場合、VPC で NAT ゲートウェイを設定する必要があります。[TLS モード] を [無効] に設定し、次に [OK] をクリックします。

ステップ 3：ベースルートの追加

このセクションでは、カナリアサービスのパラメーターについて説明します。[サービス名] を frontend-gray-svc に設定します。[サービスアドレス] には、対象のサービスの IP アドレスとポートを ip:port フォーマットで入力します。各アドレスは改行して入力します。パブリック IP アドレスを使用する場合は、VPC で NAT ゲートウェイを設定する必要があります。[TLS モード] を [無効] に設定します。

ステップ 4：カナリアルートの追加

ステップ 5：MSE コンソールでの frontend-gray プラグインの設定

ステップ 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. 左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。

3. ゲートウェイリスト ページで、ゲートウェイの ID をクリックします。

4. 左側のナビゲーションウィンドウで、Routes をクリックします。次に、[サービス] タブをクリックします。

5. Add Service をクリックします。Add Service パネルで、DNS Domain Name を DNS Domain Name に設定し、ドメインリストに OSS アドレスを入力してから、OK をクリックします。

   [サービス名] を static-oss に、 [サービスポート] を 80 に、 [TLS モード] を [無効] に設定します。

   重要

   OSS とゲートウェイが同じリージョンにデプロイされている場合は、OSS の内部エンドポイントを入力することを推奨します。OSS とゲートウェイが異なるリージョンにデプロイされている場合は、パブリックエンドポイントを入力します。

ステップ 3：ルートの追加

1. MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。

2. 左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。

3. ゲートウェイリスト ページで、ゲートウェイの ID をクリックします。

4. 左側のナビゲーションウィンドウで、Routes をクリックします。Routes タブで、Add Route をクリックします。

5. Add Route ページで、パラメーターを設定し、Save and Advertise をクリックします。

   パラメーターの例: [ルート名] に project-a-app-1 を、[ドメイン] に [*] を設定します。[パス] では、[プレフィックス] を選択し、/app1 と入力して、[大文字と小文字を区別] チェックボックスを選択します。[宛先] では、[単一サービス] を選択します。[バックエンドサービス] セクションで、[サービス名] として static-oss を、[サービスプロトコル] として HTTP を、[サービスポート] として 80 を選択します。[タイムアウト] を 60 秒に設定します。

ステップ 4：MSE コンソールでの frontend-gray プラグインの設定

1. MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。

2. 左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。

3. ゲートウェイリスト ページで、ゲートウェイの ID をクリックします。

4. 左側のナビゲーションウィンドウで、Plug-in Marketplace をクリックします。

5. Plug-in Marketplace ページで、frontend-gray を検索し、frontend-gray プラグインカードをクリックします。

6. 表示されたページで、Plug-in Configuration タブをクリックし、「ルールレベル」セクションで Domain-level plug-in rules を選択して、Add Rule をクリックします。Add Rule パネルで、次のルールを構成します。構成の詳細については、「ルールの構成」をご参照ください。

   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 プロパティ、JavaScript スクリプト、画像などのリソースのパス書き換え
   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 スタイルなどのプロパティ) または HTML ページの <body> タグの最初と最後の位置に、いくつかのグローバルな JavaScript スクリプトを注入します。

• injection を使用して、HTML ホームページにコードを注入します。コードは <head> タグ、または <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>

カナリアバージョンはいつ有効になりますか？

あるユーザーがフロントエンドアプリケーションのバージョン 0.0.1 を使用しているとします。バージョン 0.0.2 をリリースし、そのユーザーがカナリアルールに一致した場合、新しいバージョンはすぐに有効になりますか？

これには、以下の理由があります：

• カナリアバージョンをリアルタイムで有効にする必要がある場合、バックエンドは動的にバージョンを制御する必要があります。フロントエンドのリリースはバックエンドのリリースから切り離すことができません。ページの安定性はインターフェイスに強く依存するため、CDN アクセラレーションは実行できません。

• カナリアバージョンがリアルタイムで有効になると、顧客が特定の機能を使用しているときに、使用中のボタンがいつでも利用できなくなる可能性があります。これにより、ユーザーエクスペリエンスが低下します。

ページはいつリフレッシュできますか？

• ほとんどの場合、セッションがタイムアウトした後にウェブサイトに再ログインする必要があります。

• ログインページでアプリケーションにログインできます。

したがって、ログインプロセス中にページをリフレッシュして、最新のカナリアリリース情報をフェッチする必要があります。以下の例は、フロントエンドのログインコードを示しています：

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