Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: "クラウドリソースのプロビジョニング"
sidebar_position: 6
tmdTranslationSourceHash: 14aa0a06a6577684447440694dfb8ddd
tmdTranslationSourceHash: f478f189f68179b54c1919d629ea6ec3
---

このセクションでは、カートが使用しているインメモリデータベースをDynamoDBに置き換えます。WebApplicationのベーステンプレートを拡張してWebApplicationDynamoDB ResourceGraphDefinitionを構成することで実現します。
Expand Down Expand Up @@ -132,7 +132,7 @@ http://k8s-ui-ui-a9797f0f61.elb.us-west-2.amazonaws.com
ロードバランサーがプロビジョニングを完了したことを確認するには、次のコマンドを実行できます:

```bash timeout=610
curl --head -X GET --retry 30 --retry-all-errors --retry-delay 15 --connect-timeout 30 --max-time 60 \
$ curl --head -X GET --retry 30 --retry-all-errors --retry-delay 15 --connect-timeout 30 --max-time 60 \
-k $(kubectl get ingress -n ui ui -o jsonpath="{.status.loadBalancer.ingress[*].hostname}")
```

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: ラボのナビゲーション
sidebar_position: 30
tmdTranslationSourceHash: '19c60d21bd5821a49af31787350fabab'
tmdTranslationSourceHash: 'c7e58b83cd9dad8d1b1ebf524ecb56c6'
---

import Tabs from '@theme/Tabs';
Expand All @@ -22,7 +22,7 @@ import TabItem from '@theme/TabItem';

**AWS イベントに参加している場合**は、Workshop Studio のスタートページの下部にある *Event Outputs* セクションから IDE を開きます。

<img src="/img/fastpaths/ide-open.png" alt="Event Outputs copy/paste" width="500" />
<img src={require('@site/static/img/fastpaths/ide-open.png').default} alt="Event Outputs copy/paste" width="500" />

**自分のアカウントで実行している場合**は、CloudFormation スタックの Outputs タブで `IdeUrl` を見つけてください。詳細は[セットアップガイド](/docs/fastpaths/setup/your-account)を参照してください。

Expand All @@ -35,24 +35,24 @@ import TabItem from '@theme/TabItem';
## ヒント

### コピー/ペースト権限
ブラウザによっては、Code Server ターミナルへのコンテンツのコピー/ペーストの方法が異なる場合があります。
ブラウザによっては、VS Code Terminal へのコンテンツのコピー/ペーストの方法が異なる場合があります。

<Tabs>
<TabItem value="Google Chrome" label="Google Chrome (推奨)" default>
ターミナルでコンテンツを最初にペーストしようとすると、次のようなブラウザのポップアップが表示されます:

<img src="/docs/introduction/vscode-copy-paste.webp" alt="Chrome copy/paste" width="480" />
<img src={require('@site/static/docs/introduction/vscode-copy-paste.webp').default} alt="Chrome copy/paste" width="480" />

**Allow** ボタンをクリックして、この機能を有効にします。これ以降、コピー/ペーストは簡単になります。このワークショップでは、可能であれば Google Chrome の使用をお勧めします。
</TabItem>
<TabItem value="Firefox/Safari" label="Firefox/Safari">
ターミナルでコンテンツをペーストしようとするたびに、マウスポインタの隣に次のスクリーンショットに示すような小さなボタンが表示されます。コピーしたコンテンツを実際にペーストするには、それをクリックする必要があります。

<img src="/img/fastpaths/introduction/paste-in-firefox-safari.png" alt="Firefox/Safari copy/paste" width="480" />
<img src={require('@site/static/img/fastpaths/introduction/paste-in-firefox-safari.png').default} alt="Firefox/Safari copy/paste" width="480" />

さらに、エディタウィンドウの右下隅に次のポップアップボックスが表示される場合がありますが、これは閉じて無視してかまいません。

<img src="/img/fastpaths/introduction/paste-warning-in-firefox-safari.png" alt="Firefox/Safari copy/paste" width="480" />
<img src={require('@site/static/img/fastpaths/introduction/paste-warning-in-firefox-safari.png').default} alt="Firefox/Safari copy/paste" width="480" />
</TabItem>
</Tabs>

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: あなたのAWSアカウントで
sidebar_position: 30
tmdTranslationSourceHash: '816ae7a5604c47cc743c1eddcfcdadec'
tmdTranslationSourceHash: 'a9ac429d98a155726091877652b40b3a'
---

import Tabs from '@theme/Tabs';
Expand Down Expand Up @@ -33,37 +33,36 @@ import TabItem from '@theme/TabItem';

画面の下部までスクロールして、IAM通知を承認してください:

<img src="/docs/introduction/setup/your-account/acknowledge-iam.webp" alt="acknowledge IAM" width="600" />
<img src={require('@site/static/docs/introduction/setup/your-account/acknowledge-iam.webp').default} alt="acknowledge IAM" width="600" />

次に、**Create stack**ボタンをクリックします:

<img src="/docs/introduction/setup/your-account/create-stack.webp" alt="Create Stack" width="600" />
<img src={require('@site/static/docs/introduction/setup/your-account/create-stack.webp').default} alt="Create Stack" width="600" />

CloudFormationスタックのデプロイには約5分かかります。完了したら、**Outputs**タブから続行に必要な情報を取得できます:

<img src="/docs/introduction/setup/your-account/vscode-outputs.webp" alt="cloudformation outputs" width="600" />
<img src={require('@site/static/docs/introduction/setup/your-account/vscode-outputs.webp').default} alt="cloudformation outputs" width="600" />

`IdeUrl`出力には、IDEにアクセスするためにブラウザに入力するURLが含まれています。`IdePasswordSecret`には、IDE用に生成されたパスワードを含むAWS Secrets Managerシークレットへのリンクが含まれています。

パスワードを取得するには、`IdePasswordSecret`URLを開き、**Retrieve**ボタンをクリックします:

<img src="/docs/introduction/setup/your-account/vscode-password-retrieve.webp" alt="secretsmanager retrieve" width="600" />
<img src={require('@site/static/docs/introduction/setup/your-account/vscode-password-retrieve.webp').default} alt="secretsmanager retrieve" width="600" />

その後、パスワードをコピーできるようになります:

<img src="/docs/introduction/setup/your-account/vscode-password-visible.webp" alt="password in Secrets Manager" width="600" />
<img src={require('@site/static/docs/introduction/setup/your-account/vscode-password-visible.webp').default} alt="password in Secrets Manager" width="600" />

提供されたIDE URLを開くと、パスワードの入力を求められます:

<img src="/docs/introduction/setup/your-account/vscode-password.webp" alt="IDE password prompt" width="600" />
<img src={require('@site/static/docs/introduction/setup/your-account/vscode-password.webp').default} alt="IDE password prompt" width="600" />

パスワードを送信すると、最初のIDE画面が表示されます:

<img src="/docs/introduction/setup/your-account/vscode-splash.webp" alt="IDE initial screen" width="600" />
<img src={require('@site/static/docs/introduction/setup/your-account/vscode-splash.webp').default} alt="IDE initial screen" width="600" />

次のステップは、ラボ演習を実行するためのEKSクラスターを作成することです。以下のガイドのいずれかに従って、これらのラボの要件を満たすクラスターをプロビジョニングしてください:

- **(推奨)** [eksctl](./using-eksctl.md)
- (近日公開予定!) [Terraform](./using-terraform.md)、興味がありますか? [GitHubリポジトリ](https://github.com/aws-samples/eks-workshop-v2/issues)でお知らせください
- (近日公開予定!) CDK

Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
---
title: "カナリアデプロイメント"
sidebar_position: 30
tmdTranslationSourceHash: '9d9e00ea1be46189ef41abc4586cd177'
---

Gateway API は、重み付けトラフィック分割をネイティブにサポートしており、追加のツールや Service Mesh インフラストラクチャなしでカナリアデプロイメントを可能にします。このセクションでは、UI アプリケーションの新しいバージョンをデプロイし、HTTPRoute の重み付けを使用して、元のバージョンから新しいバージョンへトラフィックを段階的に移行します。

従来の Kubernetes Ingress では、重み付けトラフィック分割はネイティブにサポートされていません。これを実現するには、Istio や App Mesh のような Service Mesh が必要になります。Gateway API は、`backendRefs` の weight フィールドを通じて、これを第一級の機能として提供します。

## 新しい UI バージョンのデプロイ

まず、UI アプリケーションの第 2 バージョン(`ui-v2`)をデプロイします。これはオレンジ色のテーマを使用しており、元の青色のテーマと視覚的に区別できます。

::yaml{file="manifests/modules/exposing/gateway-api/canary/deployment-ui-v2.yaml" paths="metadata.name,spec.template.spec.containers.0.env"}

主な違いは `RETAIL_UI_THEME=orange` 環境変数で、これにより視覚的に異なるオレンジ色のテーマの UI が生成されます。

また、新しい Pod にトラフィックをルーティングするための Service も必要です。

::yaml{file="manifests/modules/exposing/gateway-api/canary/service-ui-v2.yaml" paths="metadata.name,spec.selector"}

両方のリソースを適用します。

```bash
$ kubectl apply -f ~/environment/eks-workshop/modules/exposing/gateway-api/canary/deployment-ui-v2.yaml
$ kubectl apply -f ~/environment/eks-workshop/modules/exposing/gateway-api/canary/service-ui-v2.yaml
```

新しい Pod が準備完了になるまで待ちます。

```bash timeout=120
$ kubectl wait --for=condition=Ready pods -l app.kubernetes.io/version=v2 -n ui --timeout=120s
```

## 90/10 カナリアルートの適用

次に、既存の `ui-route` HTTPRoute を、元の UI に 90%、ui-v2 に 10% のトラフィックを送信する重み付けバージョンに置き換えます。

::yaml{file="manifests/modules/exposing/gateway-api/canary/httproute-ui-canary.yaml" paths="spec.rules.0.backendRefs"}

`backendRefs` フィールドに、明示的な `weight` 値を持つ 2 つのエントリが含まれていることに注目してください。Gateway コントローラーは、これらの重み付けに基づいてトラフィックを比例的に分散します。

カナリア HTTPRoute を適用します。

```bash hook=canary hookTimeout=180
$ kubectl apply -f ~/environment/eks-workshop/modules/exposing/gateway-api/canary/httproute-ui-canary.yaml
```

## トラフィック分割のテスト

Gateway に複数のリクエストを送信し、分散を観察します。約 10% のレスポンスがオレンジ色のテーマの ui-v2 から返されるはずです。

```bash timeout=60
$ export GATEWAY_URL=$(kubectl get gateway retail-store-gateway -n ui -o jsonpath='{.status.addresses[0].value}')
$ for i in $(seq 1 20); do curl -s $GATEWAY_URL | grep "theme" ; done
href="/assets/css/theme-default.css"theme: {
href="/assets/css/theme-default.css"theme: {
href="/assets/css/theme-default.css"theme: {
href="/assets/css/theme-default.css"theme: {
href="/assets/css/theme-default.css"theme: {
href="/assets/css/theme-orange.css"theme: {
href="/assets/css/theme-default.css"theme: {
href="/assets/css/theme-default.css"theme: {
href="/assets/css/theme-default.css"theme: {
href="/assets/css/theme-default.css"theme: {
href="/assets/css/theme-default.css"theme: {
href="/assets/css/theme-default.css"theme: {
href="/assets/css/theme-default.css"theme: {
href="/assets/css/theme-orange.css"theme: {
href="/assets/css/theme-default.css"theme: {
href="/assets/css/theme-orange.css"theme: {
href="/assets/css/theme-default.css"theme: {
href="/assets/css/theme-default.css"theme: {
href="/assets/css/theme-default.css"theme: {
href="/assets/css/theme-orange.css"theme: {
```

ほとんどのレスポンスが `theme-default` を返し、20 回のリクエストのうち約 1〜2 回が `theme-orange` を返すことが確認でき、90/10 のトラフィック分割が機能していることがわかります。

## 50/50 へのトラフィック増加

新しいバージョンが正しく動作していることを確認したら、カナリアの重み付けを 50% に増やします。

::yaml{file="manifests/modules/exposing/gateway-api/canary/httproute-canary-50-50.yaml" paths="spec.rules.0.backendRefs"}

```bash
$ kubectl apply -f ~/environment/eks-workshop/modules/exposing/gateway-api/canary/httproute-canary-50-50.yaml
```

再度テストして、均等な分割を確認します。

```bash timeout=60
$ for i in $(seq 1 20); do curl -s $GATEWAY_URL | grep "theme" ; done
```

レスポンスの約半分がオレンジ色のテーマを返すことが確認できるはずです。

## ロールアウトの完了

新しいバージョンに満足したら、重み付けを 0/100 に設定して、すべてのトラフィックを ui-v2 に移行します。

::yaml{file="manifests/modules/exposing/gateway-api/canary/httproute-canary-0-100.yaml" paths="spec.rules.0.backendRefs"}

```bash
$ kubectl apply -f ~/environment/eks-workshop/modules/exposing/gateway-api/canary/httproute-canary-0-100.yaml
```

すべてのトラフィックが新しいバージョンに移行したことを確認します。

```bash timeout=60
$ for i in $(seq 1 20); do curl -s $GATEWAY_URL | grep "theme" ; done
```

すべてのレスポンスがオレンジ色のテーマを返し、ui-v2 への完全な切り替えが確認できるはずです。

<Browser url="http://k8s-ui-retailst-xxxxxxxxxx.us-west-2.elb.amazonaws.com">
<img src={require('@site/static/img/sample-app-screens/home-orange.webp').default}/>
</Browser>

## まとめ

このセクションでは、Gateway API のネイティブな重み付けトラフィック分割を使用して、段階的なカナリアデプロイメントを実行しました。

1. 視覚的に区別できる新しいバージョンの UI をデプロイ
2. リスクを最小限に抑えるために 90/10 の分割で開始
3. 新しいバージョンを検証した後、50/50 に増加
4. 0/100 の分割でロールアウトを完了

### Gateway API と Ingress の比較

| 機能 | Gateway API | Kubernetes Ingress |
|---|---|---|
| 重み付けトラフィック分割 | `backendRefs` の重み付けによりネイティブサポート | ネイティブにサポートされていない |
| カナリアデプロイメント | 組み込み済み、追加ツール不要 | Service Mesh またはアノテーションが必要 |
| クロスネームスペースルーティング | `parentRefs` によりネイティブサポート | IngressGroup などの回避策が必要 |
| ロール指向モデル | GatewayClass → Gateway → HTTPRoute | 単一の Ingress リソース |
| ルートごとの複数バックエンド | 重み付けとフィルターによりネイティブサポート | パスごとに単一のバックエンドに制限 |
| 段階的ロールアウト | 宣言的な重み付け更新 | 外部コントローラーが必要 |

Gateway API のネイティブなトラフィック分割により、カナリアデプロイメントが簡潔かつ宣言的になり、従来の Ingress で必要とされる追加の Service Mesh インフラストラクチャやカスタムアノテーションが不要になります。

Loading