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

フロントエンドアプリケーションのカナリアリリースをモニタリングおよびロールバックポリシーと併用することで、システムの安定性を確保する強力なメカニズムを構築できます。これら 3 つのポリシーを連携させることで、アプリケーションの継続的な反復と更新を行いながら、フロントエンドアプリケーションの高いパフォーマンスと安定性を維持できます。このトピックでは、Microservices Engine (MSE) クラウドネイティブゲートウェイを構成して、フロントエンドアプリケーションでカナリアリリースを実装する方法について説明します。

エンドツーエンドカナリアリリースの実装

マイクロサービスシナリオでは、アプリケーション間の呼び出しはランダムです。デプロイした Spring Cloud アプリケーションまたは Dubbo アプリケーションに新しいバージョンがある場合、特定の特性を持つトラフィックがアプリケーションの新しいバージョンにルーティングされないことがあります。エンドツーエンドカナリアリリースを実装するには、フロントエンドアプリケーションのカナリアリリースを、MSE が提供するクラウドネイティブゲートウェイに基づくエンドツーエンドカナリアリリースと併用します。

フロントエンドユーザーからの各リクエストは、クラウドネイティブゲートウェイを通過します。リクエストが権限システムによって認証されると、その Cookie には userid: 001 のような一意のユーザー識別子が含まれます。

説明

ゲートウェイには frontend-gray プラグインがアタッチされています。このプラグインは、構成されたプラグインルールに基づいてカナリアトラフィックをマッピングし、転送します。

前提条件

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

MSE Ingress ゲートウェイを使用したフロントエンドアプリケーションでのカナリアリリースの実装

重要

MSE Ingress Controller をインストールし、MSE Ingress ゲートウェイを使用して ACK クラスターにアクセスします。詳細については、「MSE Ingress ゲートウェイを使用して ACK クラスターおよび ACS クラスターのサービスにアクセスする」をご参照ください。

ステップ 1: ACK クラスターにアプリケーションをデプロイする

アプリケーションのデプロイ方法の詳細については、「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

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

`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

---
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 コンソールでカナリアリリースプラグインを構成する

MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。
左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。[ゲートウェイ] ページで、ゲートウェイの ID をクリックします。
左側のナビゲーションウィンドウで、Plug-in Marketplace をクリックします。
Plug-in Marketplace ページで、frontend-gray キーワードを検索し、frontend-gray プラグインカードをクリックします。
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
```

ステップ 3: 結果を検証する

ACK コンソールにログインします。左側のナビゲーションウィンドウで、[クラスター] をクリックします。[クラスター] ページで、作成したクラスターをクリックします。クラスターの詳細ページで、左側のナビゲーションウィンドウから [ネットワーク] > [Ingress] を選択して、パブリックエンドポイントを表示します。
パブリックエンドポイント nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com にアクセスし、admin/ice アカウントを使用してログインし、ベースバージョンにアクセスします。ユーザー ID は 00000001 です。
パブリックエンドポイント nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com にアクセスし、user/ice アカウントを使用して一般ユーザーとしてログインしてカナリアリリースバージョンにアクセスし、ユーザー ID が 00000002 であることを確認します。

ACK クラスターを使用したフロントエンドアプリケーションでのカナリアリリースの実装

ステップ 1: ACK クラスターにアプリケーションをデプロイする

アプリケーションのデプロイ方法の詳細については、「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: MSE コンソールでカナリアリリースプラグインを構成する

MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。
左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。[ゲートウェイ] ページで、ゲートウェイの ID をクリックします。
左側のナビゲーションウィンドウで、Plug-in Marketplace をクリックします。
Plug-in Marketplace ページで、frontend-gray キーワードを検索し、frontend-gray プラグインカードをクリックします。
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
```

ステップ 3: ゲートウェイにサービスソースを追加する

MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。
左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。[ゲートウェイ] ページで、ゲートウェイの ID をクリックします。
左側のナビゲーションウィンドウで、Routes をクリックします。次に、[ソース] タブをクリックします。
Add Source をクリックします。Add Source パネルで、[ソースタイプ] に [Container Service] を選択し、[ACK/ASK/ACS クラスター] ドロップダウンリストから作成したクラスターを選択して、OK をクリックします。

ステップ 4: サービスを追加する

MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。
左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。
ゲートウェイリスト ページで、ゲートウェイの ID をクリックします。
左側のナビゲーションウィンドウで、Routes をクリックします。次に、[サービス] タブをクリックします。
Add Service をクリックします。Add Service パネルで、パラメーターを構成し、[OK] をクリックします。

ステップ 5: ベースルートを追加する

MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。
左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。[ゲートウェイ] ページで、ゲートウェイの ID をクリックします。
左側のナビゲーションウィンドウで、Routes タブをクリックします。[ルート] タブで、Add Route をクリックします。
Add Route ページで、パラメーターを構成し、Save and Advertise をクリックします。

ステップ 6: カナリアルートを追加する

MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。
左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。[ゲートウェイ] ページで、ゲートウェイの ID をクリックします。
左側のナビゲーションウィンドウで、Routes タブをクリックします。[ルート] タブで、Add Route をクリックします。
Add Route ページで、パラメーターを構成し、Save and Advertise をクリックします。
説明
gray はカナリアリリースバージョンを示し、grayDeployments.version に対応します。これは frontend-gray プラグインの構成です。

ステップ 7: 結果を検証する

MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。
左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。[ゲートウェイ] ページで、ゲートウェイの ID をクリックします。
Overview ページで、アクセスポイント タブをクリックして、パブリックエンドポイントを表示します。
パブリックエンドポイント nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com にアクセスし、admin/ice アカウントを使用してログインしてベースバージョンにアクセスし、ユーザー ID が 00000001 であることを確認します。
パブリックエンドポイント nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com にアクセスし、user/ice アカウントを使用して一般ユーザーとしてログインしてカナリアリリースバージョンにアクセスし、ユーザー ID が 00000002 であることを確認します。

ECS インスタンスを使用したフロントエンドアプリケーションでのカナリアリリースの実装

ステップ 1: ECS インスタンスに 2 つのフロントエンドアプリケーションバージョンをデプロイする

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

ステップ 2: サービスを追加する

MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。
左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。
ゲートウェイリスト ページで、ゲートウェイの ID をクリックします。
左側のナビゲーションウィンドウで、Routes をクリックします。次に、[サービス] タブをクリックします。
Add Service をクリックします。Add Service パネルで、[サービスソース] ドロップダウンリストから [固定アドレス] を選択し、パラメーターを構成してから [OK] をクリックします。

ステップ 3: ベースルートを追加する

MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。
左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。
ゲートウェイリスト ページで、ゲートウェイの ID をクリックします。
左側のナビゲーションウィンドウで、Routes タブをクリックします。[ルート] タブで、Add Route をクリックします。
Add Route ページで、パラメーターを構成し、Save and Advertise をクリックします。

ステップ 4: カナリアルートを追加する

MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。
左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。
ゲートウェイリスト ページで、ゲートウェイの ID をクリックします。
左側のナビゲーションウィンドウで、Routes タブをクリックします。[ルート] タブで、Add Route をクリックします。
[ルートの追加] ページで、パラメーターを構成し、Save and Advertise をクリックします。
説明
gray はカナリアバージョンを示し、frontend-gray プラグインの構成における grayDeployments.version に対応します。

ステップ 5: MSE コンソールで frontend-gray プラグインを構成する

MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。
左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。
ゲートウェイリスト ページで、ゲートウェイの ID をクリックします。
左側のナビゲーションウィンドウで、Plug-in Marketplace をクリックします。
Plug-in Marketplace ページで、frontend-gray キーワードを検索し、frontend-gray プラグインカードをクリックします。
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
```

ステップ 6: 結果を検証する

MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。
左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。[ゲートウェイ] ページで、ゲートウェイの ID をクリックします。
Overview ページで、アクセスポイント タブをクリックして、パブリックエンドポイントを表示します。
パブリックエンドポイント nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com にアクセスし、admin/ice アカウントを使用してログインしてベースバージョンにアクセスし、ユーザー ID が 00000001 であることを確認します。
パブリックエンドポイント nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com にアクセスし、user/ice アカウントを使用して一般ユーザーとしてログインしてカナリアリリースバージョンにアクセスし、ユーザー ID が 00000002 であることを確認します。

CDN または OSS を使用したフロントエンドアプリケーションでのカナリアリリースの実装

ステップ 1: OSS ファイルを準備する

YAML コードの表示

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

ステップ 2: サービスを追加する

MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。
左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。
ゲートウェイリスト ページで、ゲートウェイの ID をクリックします。
左側のナビゲーションウィンドウで、Routes をクリックします。次に、[サービス] タブをクリックします。
Add Service をクリックします。Add Service パネルで、[サービスソース] ドロップダウンリストから [DNS ドメイン名] を選択し、OSS のエンドポイントを入力してから [OK] をクリックします。
重要
OSS とゲートウェイが同じリージョンにデプロイされている場合は、OSS の内部エンドポイントを入力することをお勧めします。OSS とゲートウェイが同じリージョンにデプロイされていない場合は、パブリックエンドポイントを入力します。

ステップ 3: ルートを追加する

MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。
左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。
ゲートウェイリスト ページで、ゲートウェイの ID をクリックします。
左側のナビゲーションウィンドウで、Routes タブをクリックします。[ルート] タブで、Add Route をクリックします。
Add Route ページで、パラメーターを構成し、Save and Advertise をクリックします。

ステップ 4: MSE コンソールで frontend-gray プラグインを構成する

MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。
左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。
ゲートウェイリスト ページで、ゲートウェイの ID をクリックします。
左側のナビゲーションウィンドウで、Plug-in Marketplace をクリックします。
Plug-in Marketplace ページで、frontend-gray キーワードを検索し、frontend-gray プラグインカードをクリックします。

表示されたページで、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: 結果を検証する

MSE コンソールにログインします。上部のナビゲーションバーで、リージョンを選択します。
左側のナビゲーションウィンドウで、Cloud-Native Gateway > ゲートウェイリスト を選択します。[ゲートウェイ] ページで、ゲートウェイの ID をクリックします。
Overview ページで、アクセスポイント タブをクリックして、パブリックエンドポイントを表示します。
パブリックエンドポイント nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com にアクセスし、admin/ice アカウントを使用してログインしてベースバージョンにアクセスし、ユーザー ID が 00000001 であることを確認します。
パブリックエンドポイント nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com にアクセスし、user/ice アカウントを使用して一般ユーザーとしてログインしてカナリアリリースバージョンにアクセスし、ユーザー ID が 00000002 であることを確認します。

よくある質問

フロントエンドアプリケーションで再書き込みポリシーとカナリアリリースを同時に構成できますか？

サービスソースが 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>

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

ユーザー A の現在のフロントエンドバージョンが 0.0.1 で、新しいフロントエンドバージョン 0.0.2 を公開したとします。ユーザー A がカナリアリリースルールにヒットした場合、新しいバージョンはすぐに有効になりますか？

これには、次の理由があります:

カナリアバージョンをリアルタイムで有効にする必要がある場合、バックエンドはバージョンを動的に制御する必要があります。フロントエンドリリースはバックエンドリリースから切り離すことはできません。ページの安定性はインターフェイスに強く依存するため、CDN アクセラレーションは実行できません。
カナリアバージョンがリアルタイムで有効になる場合、顧客が特定の機能を使用しているときに、使用中のボタンがいつでも利用できなくなる可能性があります。これにより、ユーザーエクスペリエンスが低下します。

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

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

ページにログインするときに、ページをリフレッシュして最新のカナリアリリース情報を取得します。次のコードは、フロントエンドアプリケーションのログイン例を示しています。

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);
      // ログイン失敗時に返されるエラーメッセージを構成します。次のコードはエラーメッセージのサンプルです。
      setLoginResult(result);
    } catch (error) {
      message.error('Logon failed. Try again. ');
      console.log(error);
    }
  }