MSE クラウドネイティブゲートウェイによるフロントエンドカナリアリリースの実装 - MSE

すべてのユーザーに新しいフロントエンドバージョンを一度にルーティングすると、全ユーザーが障害にさらされるリスクがあります。フロントエンドのカナリアリリースでは、Cookie またはヘッダー値で識別されるユーザーの一部を、まず新しいバージョンにルーティングします。この少数のグループで問題をモニタリングし、他のユーザーに影響を与えることなく、段階的に展開範囲を拡大したりロールバックしたりできます。

Microservices Engine (MSE) クラウドネイティブゲートウェイは、frontend-gray プラグインを通じてフロントエンドのカナリアリリースをサポートします。このプラグインは各リクエストからユーザー識別子を抽出し、設定済みのカナリアルールと照合したうえで、リクエストをベースバージョンまたはカナリアバージョンのいずれかにルーティングします。

仕組み

すべてのユーザーからのリクエストは MSE クラウドネイティブゲートウェイを経由します。認証後にリクエスト Cookie には userid: 001 のような一意のユーザー識別子が含まれます。frontend-gray プラグインは、この識別子を構成済みのルールと照合し、該当するフロントエンドバージョンへリクエストを転送します。

ユーザーのリクエスト --> クラウドネイティブゲートウェイ --> frontend-gray プラグインによる userid の評価
                                            |-- カナリアルールに一致 --> カナリアバージョン
                                            |-- 一致なし            --> ベースバージョン

このプラグインは、以下の 2 種類のルーティング戦略をサポートします。

戦略	動作	利用シーン
ルールベース	ホワイトリスト (`grayKeyValue`) に登録された識別子を持つユーザーをカナリアバージョンにルーティング	特定のテストユーザーまたは社内チームを対象とする場合
重みベース	ルールに一致しなかったトラフィックのうち、指定した割合 (`weight`) をカナリアバージョンにルーティング	より広範なオーディエンスへ段階的に展開する場合

両方の戦略が設定されている場合、まずルールベースの照合が実行されます。リクエストがどのルールにも一致しない場合は、重みベースのルーティングが適用されます。

説明

フロントエンドだけでなく、マイクロサービス全体の呼び出しチェーンにカナリアリリースを拡張するには、本手法とクラウドネイティブゲートウェイに基づくエンドツーエンドカナリアリリースを併用してください。これは、フロントエンドが Spring Cloud や Dubbo のバックエンドサービス（これらもカナリアバージョンを有する）を呼び出す場合に有効です。

前提条件

開始する前に、以下の条件を満たしていることを確認してください。

Container Service for Kubernetes (ACK) マネージドクラスター。詳細については、「ACK マネージドクラスターの作成」をご参照ください。
MSE クラウドネイティブゲートウェイ。詳細については、「MSE クラウドネイティブゲートウェイの作成」をご参照ください。

デプロイメント手法の選択

MSE では、フロントエンドのカナリアリリースに使用可能な 4 種類の手法がサポートされています。ご使用のインフラストラクチャに最も適した手法を選択してください。

手法	使用タイミング	主な違い
MSE Ingress ゲートウェイ	Ingress ベースのルーティングを使用する Kubernetes ワークロードの場合	トラフィック分割は Ingress アノテーションで定義
ACK クラスターと MSE コンソールルート	コンソール管理型ルーティングを使用する Kubernetes ワークロードの場合	ルートは Ingress リソースではなく MSE コンソールで構成
ECS インスタンス	ECS 上に直接デプロイされたアプリケーションの場合	固定 IP アドレスでサービスを登録
CDN または OSS	OSS でホストされる静的フロントエンドアセットの場合	プラグインがパスを書き換え、OSS のバージョン付きアセットを提供

MSE Ingress ゲートウェイ

ステップ 1：ベースおよびカナリアアプリケーションのデプロイ

ACK クラスター内にフロントエンドアプリケーションの 2 つのバージョン（ベース Deployment およびカナリア Deployment）をデプロイします。それぞれに個別の Service および Ingress リソースを割り当てます。詳細については、「Deployment を使用したステートレスアプリケーションの作成」をご参照ください。

重要

続行する前に、MSE Ingress コントローラーをインストールしてください。セットアップ手順については、「ACK クラスターおよび ACS クラスター内のサービスへのアクセスに MSE Ingress ゲートウェイを使用する」をご参照ください。

YAML を展開

`frontend-base.yaml`

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

`frontend-gray.yaml`

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

カナリア Ingress では、ヘッダーに基づくトラフィック分割を有効化するために、以下の 3 つのアノテーションを使用します。

アノテーション	目的
`nginx.ingress.kubernetes.io/canary: 'true'`	この Ingress をカナリアルートとしてマーク
`nginx.ingress.kubernetes.io/canary-by-header: x-higress-tag`	ルーティング判断に使用するヘッダーを指定
`nginx.ingress.kubernetes.io/canary-by-header-value: gray`	`x-higress-tag: gray` を含むリクエストをカナリア Service にルーティング

ステップ 2：`frontend-gray` プラグインの構成

MSE コンソールにログインします。上部のナビゲーションバーからリージョンを選択します。
左側のナビゲーションウィンドウで、クラウドネイティブゲートウェイ > ゲートウェイ を選択します。[ゲートウェイ] ページで、対象のゲートウェイ ID をクリックします。
左側のナビゲーションウィンドウで、プラグインマーケットプレイス をクリックします。
プラグインマーケットプレイス ページで、frontend-gray を検索し、frontend-gray プラグインカードをクリックします。
プラグイン構成 タブをクリックし、ドメインレベルのプラグインルール を選択してから、ルールの追加 をクリックします。以下のルールを構成します。このルールは、userid 値が 00000002 および 00000003 のユーザーをカナリア (gray) バージョンにルーティングします。その他のすべてのユーザーは base バージョンを表示します。利用可能な構成フィールドの詳細については、「プラグイン構成リファレンス」およびHigress frontend-gray プラグインのドキュメントをご参照ください。
```
   grayKey: userid
   rules:
     - name: beta-user
       grayKeyValue:
         - "00000002"
         - "00000003"
   baseDeployment:
     version: base
   grayDeployments:
     - name: beta-user
       version: gray
       enabled: true
```

ステップ 3：結果の確認

ACK コンソールにログインします。左側のナビゲーションウィンドウで、クラスター をクリックします。作成したクラスターをクリックします。左側のナビゲーションウィンドウで、ネットワーク > Ingress を選択してパブリックエンドポイントを確認します。
パブリックエンドポイント（例：nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com）を開きます。admin/ice アカウントでログインします。ユーザー ID が 00000001 であり、ベースバージョンが表示されることを確認します。
user/ice アカウントでログインします。ユーザー ID が 00000002 であり、カナリアバージョンが表示されることを確認します。

ACK クラスターと MSE コンソールルート

この手法では、同じ Kubernetes ワークロードを使用しますが、ルーティングは Ingress リソースではなく MSE コンソールで構成します。

ステップ 1：ベースおよびカナリアアプリケーションのデプロイ

ACK クラスター内にベースおよびカナリアの Deployment および Service をデプロイします。[MSE Ingress ゲートウェイ手法] と同じ Deployment および Service マニフェストを使用しますが、Ingress リソースは除外します。詳細については、「Deployment を使用したステートレスアプリケーションの作成」をご参照ください。

YAML を展開

`frontend-base.yaml`

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

`frontend-gray.yaml`

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：`frontend-gray` プラグインの構成

[MSE Ingress ゲートウェイ手法] と同様のプラグイン構成手順に従ってください。

ステップ 3：サービスソースの追加

ACK クラスターをサービスソースとして登録することで、ゲートウェイが Kubernetes Service を検出できるようにします。

MSE コンソールにログインします。上部のナビゲーションバーからリージョンを選択します。
左側のナビゲーションウィンドウで、クラウドネイティブゲートウェイ > ゲートウェイ を選択します。対象のゲートウェイ ID をクリックします。
左側のナビゲーションウィンドウで、ルート をクリックし、ソース タブをクリックします。
ソースの追加 をクリックします。ソースの追加 パネルで、コンテナサービス を ソースタイプ として選択し、ACK/ASK/ACS クラスター のドロップダウンリストから ACK クラスターを選択して、OK をクリックします。

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

ベースおよびカナリアの Kubernetes Service をゲートウェイにインポートします。

MSE コンソールにログインします。上部のナビゲーションバーからリージョンを選択します。
左側のナビゲーションウィンドウで、クラウドネイティブゲートウェイ > ゲートウェイ を選択します。対象のゲートウェイ ID をクリックします。
左側のナビゲーションウィンドウで、ルート をクリックし、サービス タブをクリックします。
サービスの追加 をクリックします。サービスの追加 パネルでパラメーターを構成し、OK をクリックします。

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

デフォルトルートをベースフロントエンド Service に転送するルートを作成します。

MSE コンソールにログインします。上部のナビゲーションバーからリージョンを選択します。
左側のナビゲーションウィンドウで、クラウドネイティブゲートウェイ > ゲートウェイ を選択します。対象のゲートウェイ ID をクリックします。
左側のナビゲーションウィンドウで、ルート をクリックし、ルートの追加 をクリックします。
ルートの追加 ページでパラメーターを構成し、保存してアドバタイズ をクリックします。

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

カナリアトラフィックをカナリアフロントエンド Service に転送するルートを作成します。

MSE コンソールにログインします。上部のナビゲーションバーからリージョンを選択します。
左側のナビゲーションウィンドウで、クラウドネイティブゲートウェイ > ゲートウェイ を選択します。対象のゲートウェイ ID をクリックします。
左側のナビゲーションウィンドウで、ルート をクリックし、ルートの追加 をクリックします。
ルートの追加 ページでパラメーターを構成し、保存してアドバタイズ をクリックします。
説明
バージョンを gray に設定します。この値は、grayDeployments.version と frontend-gray プラグイン構成で一致します。

ステップ 7：結果の確認

MSE コンソールにログインします。上部のナビゲーションバーからリージョンを選択します。
左側のナビゲーションウィンドウで、クラウドネイティブゲートウェイ > ゲートウェイ を選択します。対象のゲートウェイ ID をクリックします。
概要ページで、エンドポイント タブをクリックしてパブリックエンドポイントを確認します。
パブリックエンドポイント（例：nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com）を開きます。admin/ice アカウントでログインします。ユーザー ID が 00000001 であり、ベースバージョンが表示されることを確認します。
user/ice アカウントでログインします。ユーザー ID が 00000002 であり、カナリアバージョンが表示されることを確認します。

ECS インスタンス

フロントエンドアプリケーションが Kubernetes ではなく Elastic Compute Service (ECS) インスタンス上で直接実行される場合に、この手法を使用します。

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

ベースおよびカナリアのバージョンを同一または個別の ECS インスタンスにデプロイします。

ベースバージョンのエンドポイント：120.***.137.243:80
カナリアバージョンのエンドポイント：120.***.137.243:8081

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

両方のフロントエンドバージョンを、ゲートウェイ上の固定アドレスサービスとして登録します。

MSE コンソールにログインします。上部のナビゲーションバーからリージョンを選択します。
左側のナビゲーションウィンドウで、クラウドネイティブゲートウェイ > ゲートウェイ を選択します。対象のゲートウェイ ID をクリックします。
左側のナビゲーションウィンドウで、ルート をクリックし、サービス タブをクリックします。
サービスの追加 をクリックします。サービスの追加 パネルで、Service Source のドロップダウンリストから 固定アドレス を選択し、パラメーターを構成してから、OK をクリックします。

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

MSE コンソールにログインします。上部のナビゲーションバーからリージョンを選択します。
左側のナビゲーションウィンドウで、クラウドネイティブゲートウェイ > ゲートウェイ を選択します。対象のゲートウェイ ID をクリックします。
左側のナビゲーションウィンドウで、ルート をクリックし、ルートの追加 をクリックします。
ルートの追加 ページでパラメーターを構成し、保存してアドバタイズ をクリックします。

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

MSE コンソールにログインします。上部のナビゲーションバーからリージョンを選択します。
左側のナビゲーションウィンドウで、クラウドネイティブゲートウェイ > ゲートウェイ を選択します。対象のゲートウェイ ID をクリックします。
左側のナビゲーションウィンドウで、ルート をクリックし、ルートの追加 をクリックします。
ルートの追加 ページでパラメーターを構成し、保存してアドバタイズ をクリックします。
説明
バージョンを gray に設定します。この値は、grayDeployments.version と frontend-gray プラグイン構成で一致します。

ステップ 5：`frontend-gray` プラグインの構成

MSE コンソールにログインします。上部のナビゲーションバーからリージョンを選択します。
左側のナビゲーションウィンドウで、クラウドネイティブゲートウェイ > ゲートウェイ を選択します。対象のゲートウェイ ID をクリックします。
左側のナビゲーションウィンドウで、プラグインマーケットプレイス をクリックします。
プラグインマーケットプレイス ページで、frontend-gray を検索し、frontend-gray プラグインカードをクリックします。
プラグイン構成 タブをクリックし、ドメインレベルのプラグインルール を選択してから、ルールの追加 をクリックします。利用可能な構成フィールドの詳細については、「プラグイン構成リファレンス」およびHigress frontend-gray プラグインのドキュメントをご参照ください。
```
   grayKey: userid
   rules:
     - name: beta-user
       grayKeyValue:
         - "00000002"
         - "00000003"
   baseDeployment:
     version: base
   grayDeployments:
     - name: beta-user
       version: gray
       enabled: true
```

ステップ 6：結果の確認

MSE コンソールにログインします。上部のナビゲーションバーからリージョンを選択します。
左側のナビゲーションウィンドウで、クラウドネイティブゲートウェイ > ゲートウェイ を選択します。対象のゲートウェイ ID をクリックします。
概要ページで、エンドポイント タブをクリックしてパブリックエンドポイントを確認します。
パブリックエンドポイント（例：nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com）を開きます。admin/ice アカウントでログインします。ユーザー ID が 00000001 であり、ベースバージョンが表示されることを確認します。
user/ice アカウントでログインします。ユーザー ID が 00000002 であり、カナリアバージョンが表示されることを確認します。

CDN または OSS

OSS でホストされるフロントエンドアセット（CDN 経由で配信される場合あり）に対して、この手法を使用します。frontend-gray プラグインは、リクエストパスを書き換えて、OSS のバージョン付きディレクトリからアセットを提供します。

ステップ 1：OSS のファイル構造の準備

OSS 内で、バージョンベースのディレクトリ構造でフロントエンドアセットを整理します。

YAML を展開

- app1                          # アプリケーション
  - dev                         # ベースバージョン（開発）
    - index.html
    - js/
    - css/
    - images/
  - 0.0.1                      # カナリアバージョン 1
    - index.html
    - js/
    - css/
    - images/
  - 0.0.2                      # カナリアバージョン 2
    - index.html
    - js/
    - css/
    - images/
- app2
  - dev/
  - 0.0.1/
  - 0.0.2/

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

OSS エンドポイントを、ゲートウェイ上の DNS ベースのサービスとして登録します。

MSE コンソールにログインします。上部のナビゲーションバーからリージョンを選択します。
左側のナビゲーションウィンドウで、クラウドネイティブゲートウェイ > ゲートウェイ を選択します。対象のゲートウェイ ID をクリックします。
左側のナビゲーションウィンドウで、ルート をクリックし、サービス タブをクリックします。
サービスの追加 をクリックします。サービスの追加 パネルで、Service Source のドロップダウンリストから DNS ドメイン名 を選択し、OSS エンドポイントを入力して、OK をクリックします。
重要
OSS とゲートウェイが同一リージョンにある場合は、パブリックネットワーク課金を回避するため、内部 OSS エンドポイントを使用してください。異なるリージョンの場合は、パブリックエンドポイントを使用します。

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

MSE コンソールにログインします。上部のナビゲーションバーからリージョンを選択します。
左側のナビゲーションウィンドウで、クラウドネイティブゲートウェイ > ゲートウェイ を選択します。対象のゲートウェイ ID をクリックします。
左側のナビゲーションウィンドウで、ルート をクリックし、ルートの追加 をクリックします。
ルートの追加 ページでパラメーターを構成し、保存してアドバタイズ をクリックします。

ステップ 4：`frontend-gray` プラグインの構成

MSE コンソールにログインします。上部のナビゲーションバーからリージョンを選択します。
左側のナビゲーションウィンドウで、クラウドネイティブゲートウェイ > ゲートウェイ を選択します。対象のゲートウェイ ID をクリックします。
左側のナビゲーションウィンドウで、プラグインマーケットプレイス をクリックします。
プラグインマーケットプレイス ページで、frontend-gray を検索し、frontend-gray プラグインカードをクリックします。

プラグイン構成 タブをクリックし、ドメインレベルのプラグインルール を選択してから、ルールの追加 をクリックします。CDN/OSS 手法では、以下のフィールドが他の手法と異なります。利用可能な構成フィールドの詳細については、「プラグイン構成リファレンス」およびHigress frontend-gray プラグインのドキュメントをご参照ください。

フィールド	説明
`rewrite.host`	フロントエンドアセットをホストする OSS エンドポイント
`rewrite.indexRouting`	URL パスを OSS のバージョン付き `index.html` ファイルにマップします。`{version}` プレースホルダーは、バージョン文字列（`dev` または `0.0.1`）に置き換えられます
`rewrite.fileRouting`	URL パスを OSS のバージョン付き静的アセットディレクトリにマップします
`baseDeployment.version`	`dev`（OSS 内のベースバージョンディレクトリ名）に設定
`grayDeployments[0].version`	`0.0.1`（OSS 内のカナリアバージョンディレクトリ名）に設定

   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：結果の確認

MSE コンソールにログインします。上部のナビゲーションバーからリージョンを選択します。
左側のナビゲーションウィンドウで、クラウドネイティブゲートウェイ > ゲートウェイ を選択します。対象のゲートウェイ ID をクリックします。
概要ページで、エンドポイント タブをクリックしてパブリックエンドポイントを確認します。
パブリックエンドポイント（例：nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com）を開きます。admin/ice アカウントでログインします。ユーザー ID が 00000001 であり、ベースバージョンが表示されることを確認します。
user/ice アカウントでログインします。ユーザー ID が 00000002 であり、カナリアバージョンが表示されることを確認します。

プラグイン構成リファレンス

以下の表は、frontend-gray プラグインの主な構成フィールドを示しています。完全なフィールドリファレンスについては、Higress frontend-gray プラグインのドキュメントをご参照ください。

フィールド	型	必須	説明
`grayKey`	string	いいえ	Cookie またはヘッダーからユーザー識別子を抽出するために使用するキー名。例：`userid`
`graySubKey`	string	いいえ	`grayKey` 値内の JSON サブキー。ユーザー識別子が JSON 形式の Cookie またはヘッダーに埋め込まれている場合に使用
`rules`	array	はい	カナリアルールのリスト。各ルールは、名前および照合対象となるユーザー識別子の値のセットを定義
`rules[].name`	string	はい	ルールの名前。`grayDeployments`
`rules[].grayKeyValue`	文字列の配列	いいえ	ユーザー識別子の値のリスト。一致する識別子を持つリクエストは、対応するカナリアバージョンにルーティングされます
`rules[].grayTagKey`	string	いいえ	照合の代替キー。ユーザー ID ベースではなくタグベースのルーティングに使用
`rules[].grayTagValue`	文字列の配列	いいえ	`grayTagKey`
`baseDeployment.version`	string	はい	ベース（本番）デプロイメントのバージョン識別子
`grayDeployments`	array	はい	カナリアデプロイメントのリスト
`grayDeployments[].name`	string	はい	カナリアデプロイメントの名前。`rules`
`grayDeployments[].version`	string	はい	このカナリアデプロイメントのバージョン識別子
`grayDeployments[].enabled`	boolean	はい	このカナリアデプロイメントが有効かどうか
`grayDeployments[].weight`	整数 (0–100)	いいえ	ルールに一致しなかったトラフィックのうち、このカナリアバージョンにルーティングする割合。デフォルト値は `0`
`rewrite`	object	いいえ	CDN/OSS デプロイメント向けのパス書き換え構成
`rewrite.host`	string	いいえ	OSS エンドポイントのホスト名
`rewrite.indexRouting`	map	いいえ	URL パスをバージョン付き `index.html` ファイルにマップ。プレースホルダーとして `{version}` を使用
`rewrite.fileRouting`	map	いいえ	URL パスをバージョン付き静的アセットディレクトリにマップ。プレースホルダーとして `{version}` を使用
`injection`	object	いいえ	HTML 注入構成。HTML エントリページにスクリプトまたはスタイルを注入
`injection.head`	文字列の配列	いいえ	`<head>` タグに注入する HTML スニペット
`injection.body.first`	文字列の配列	いいえ	`<body>` タグの先頭に注入する HTML スニペット
`injection.body.last`	文字列の配列	いいえ	`<body>` タグの末尾に注入する HTML スニペット

モニタリングおよびロールバック

カナリアリリースをデプロイした後は、すべてのユーザーに展開する前に、カナリアバージョンで問題がないかモニタリングします。

カナリアバージョンのモニタリング：

MSE ゲートウェイのログを確認し、カナリアルートにおけるエラー率をチェックします。ベースバージョンとカナリアバージョンのエラー率を比較します。
Cloud Monitor または Application Real-Time Monitoring Service (ARMS) を使用して、カナリアユーザーのページ読み込み時間、JavaScript エラー、API 成功率を追跡します。
HTTP 5xx エラー率の上昇や、カナリアルートにおけるページ読み込み遅延の増加など、異常なメトリックに対するアラートを設定します。

カナリアバージョンのロールバック：

カナリアバージョンに問題が見られた場合、カナリアデプロイメントを無効化することでロールバックできます。

MSE コンソールにログインします。ゲートウェイの プラグインマーケットプレイス に移動し、frontend-gray プラグイン構成を開きます。

enabled: false を grayDeployments セクションに設定するか、カナリアルールを完全に削除します。

   grayDeployments:
     - name: beta-user
       version: gray
       enabled: false    # カナリアルーティングを無効化；すべてのトラフィックはベースバージョンにルーティングされます

構成を保存します。すべてのトラフィックは即座にベースバージョンに戻ります。

カナリアバージョンの本番展開：

検証が成功した後は、ベースデプロイメントのイメージをカナリアバージョンのイメージに更新し、プラグイン構成からカナリアルールを削除することで、カナリアバージョンを本番展開できます。

よくある質問

書き換えポリシーとフロントエンドのカナリアリリースを同時に使用できますか？

サービスソースによって異なります。

CDN/OSS 以外のソース（ACK、ECS）：はい。書き換えポリシーとカナリアリリースは独立して動作し、競合しません。
CDN または OSS ソース：いいえ。frontend-gray プラグインは、rewrite 構成ブロックを通じてパス書き換えを内部的に処理します。個別の書き換えポリシーを追加すると競合が発生し、HTTP 403 エラーが返される可能性があります。

HTML ページにグローバル変数を注入できますか？

はい。injection 構成ブロックを使用して、HTML エントリページに JavaScript または CSS を注入できます。注入は以下の 3 つの位置をサポートします。

位置	説明
`injection.head`	`<head>` タグ内に注入。通常、CSS スタイルや meta タグに使用
`injection.body.first`	`<body>` タグの先頭に注入
`injection.body.last`	`<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>

この例では、重みベースのカナリアリリースも示しています。weight: 80 を設定すると、ルールに一致しなかったトラフィックの 80 % がカナリアバージョンに、20 % がベースバージョンにルーティングされます。

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

カナリアバージョンは、次回のフルページ読み込み時に有効になります（リアルタイムではありません）。ユーザー A がバージョン 0.0.1 を使用中であり、ユーザー A に一致するカナリアルールとともにバージョン 0.0.2 を公開した場合、ユーザー A がページを更新または再読み込みするまで、新しいバージョンは表示されません。

この動作は、以下の 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);
  }
}

重要な行は window.location.href = ... です。これによりフルページナビゲーションがトリガーされ、ブラウザーがページをゲートウェイから再要求します。frontend-gray プラグインはカナリアルールを評価し、正しいバージョンを提供します。

仕組み

前提条件

デプロイメント手法の選択

MSE Ingress ゲートウェイ

ステップ 1：ベースおよびカナリアアプリケーションのデプロイ

frontend-base.yaml

frontend-gray.yaml

ステップ 2：frontend-gray プラグインの構成

ステップ 3：結果の確認

ACK クラスターと MSE コンソールルート

ステップ 1：ベースおよびカナリアアプリケーションのデプロイ

frontend-base.yaml

frontend-gray.yaml

ステップ 2：frontend-gray プラグインの構成

ステップ 3：サービスソースの追加

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

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

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

ステップ 7：結果の確認

ECS インスタンス

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

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

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

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

ステップ 5：frontend-gray プラグインの構成

ステップ 6：結果の確認

CDN または OSS

ステップ 1：OSS のファイル構造の準備

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

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

ステップ 4：frontend-gray プラグインの構成

ステップ 5：結果の確認

プラグイン構成リファレンス

モニタリングおよびロールバック

よくある質問

書き換えポリシーとフロントエンドのカナリアリリースを同時に使用できますか？

HTML ページにグローバル変数を注入できますか？

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

ページのリフレッシュはいつ発生しますか？

`frontend-base.yaml`

`frontend-gray.yaml`

ステップ 2：`frontend-gray` プラグインの構成

`frontend-base.yaml`

`frontend-gray.yaml`

ステップ 2：`frontend-gray` プラグインの構成

ステップ 5：`frontend-gray` プラグインの構成

ステップ 4：`frontend-gray` プラグインの構成