App Design Center を使用してアプリを迅速にデプロイする

1. はじめに

この Codelab では、Google Cloud App Design Center（ADC）を使用してフルスタック アプリケーションをデプロイする方法を学びます。Vue 3 フロントエンド、FastAPI バックエンド、アプリケーションのデータを保持する MCP サーバーを含む「The Cymbal London Concierge」アプリケーションをデプロイします。

ADC を使用すると、アプリケーション アーキテクチャを視覚的に定義し、単一のユニットとしてデプロイして、依存関係と接続を自動的に管理できます。

演習内容

  • App Design Center を設定します。
  • アプリケーション コンポーネントを視覚的に組み立てます。
  • アプリケーション アーキテクチャをデプロイします。
  • 実行中のアプリケーションを確認します。
  • アプリケーションが App Hub に登録されていることを確認します。
  • Application Monitoring でアプリケーションの指標、トレース、ログを確認します。

必要なもの

  • ウェブブラウザ（Chrome など）。
  • 課金を有効にした Google Cloud プロジェクト

この Codelab は、初心者を含むあらゆるレベルのデベロッパーを対象としています。

推定所要時間: 45 分 推定費用: 2.00 米ドル未満

2. セットアップ

プロジェクトの設定

Google Cloud プロジェクトの作成

  1. Google Cloud コンソールのプロジェクト セレクタ ページで、Google Cloud プロジェクトを選択または作成します。
  2. Cloud プロジェクトに対して課金が有効になっていることを確認します。プロジェクトで課金が有効になっているかどうかを確認する方法をご覧ください。

Cloud Shell の起動

Cloud Shell は、必要なツールがプリロードされた Google Cloud で動作するコマンドライン環境です。

  1. Google Cloud コンソールの上部にある [Cloud Shell をアクティブにする] をクリックします。
  2. Cloud Shell に接続したら、認証を確認します。
    gcloud auth list
  3. プロジェクトが構成されていることを確認します。
    gcloud config get project
  4. プロジェクトが想定どおりに設定されていない場合は、設定します。
    export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

3. App Design Center を設定する

アプリケーションを組み立てる前に、ADC でワークスペースを設定する必要があります。

  1. Google Cloud コンソールで App Design Center を検索して、移動します。
  2. このプロジェクトで ADC を初めて使用する場合は、設定画面が表示されます。
  3. [設定に移動] をクリックします。

App Design Center を設定する

  1. 必要な API がまだ有効になっていない場合は、有効にするよう求められます。[有効にする] をクリックして続行します。

API を有効にする

4. ADC の機能を確認する

このタスクでは、ADC のコア コンポーネントであるスペース、カタログ、テンプレートについて学習します。

ADC スペース

スペースは、テンプレートを作成してアプリをデプロイする場所です。各スペースは Google Cloud プロジェクトに属します。ADC は初期設定時に default-space を作成しますが、後で別のリージョンに他のスペースを作成することもできます。

ターミナルでスペースを表示する手順は次のとおりです。

  1. Cloud Shell ツールバーの [エディタを開く] をクリックするか、ターミナルを使用します。
  2. 次のコマンドを実行します。
gcloud alpha design-center spaces list \
--project="your PROJECT ID" \
--location=us-central1

次のような出力が表示され、リージョンに default-space が存在することが示されます。

createTime: '20XXXX-XX-XXT09:19:29.456016967Z'
displayName: default-space
enableGcpSharedTemplates: true
name: projects/your-project-id/locations/us-central1/spaces/default-space

5. テンプレートを組み立てる

このステップでは、プラットフォーム チームのエンジニアの役割を担います。組織内のエージェント アプリケーション用に、再利用可能で安全かつコンプライアンスに準拠したテンプレートを作成することが目標です。コンポーネントを追加し、制限を構成して、このテンプレートからデプロイされたアプリケーションが会社のクラウド ポリシーに準拠するようにします。

1. 新しいデザインを作成する

  1. ADC コンソールで、[テンプレート] > [テンプレートの作成] をクリックします。
  2. このテンプレートは Cymbal London Concierge アプリケーションや他の同様のアプリケーションのデプロイに使用されるため、テンプレートに simple-3-tier-agentic-app という名前を付けます。テンプレートを作成

2. Data MCP サーバーを追加する

このコンポーネントは、データベースのインタラクションとベクトル検索を処理します。

  1. [コンポーネントを追加] > [Cloud Run（サービス）] をクリックします。そのコンポーネントをクリックすると、右上隅にコンポーネント ID が表示されます。形式は cloud-run-1 です。コードビュー（後述）で編集して data-mcp-server に変更できますが、ここではそのままにしておきます。コンポーネントを追加
  2. サービス名（data-mcp-server）を入力します。
  3. [詳細設定を表示] で、[メンバー] を allUsers に設定します。（注: 本番環境では、この権限を制限する可能性が高いですが、ここでは Codelab を簡素化するために使用します）。
  4. [詳細設定を表示] で、[VPC アクセス] を設定し、[下り（外向き）] を PRIVATE_RANGES_ONLY に設定します。
  5. 必要に応じて、[詳細設定を表示] で [Prometheus サイドカーを有効にする] のチェックを外します。VPC アクセス
  6. [保存] をクリックします。

3. エージェント バックエンドを追加する

これは、エージェントの動作をオーケストレートする FastAPI アプリケーションです。

  1. [コンポーネントを追加] > [Cloud Run（サービス）] をクリックします。
  2. agent-backend という名前を付けます。
  3. [詳細フィールドを表示] で、[サービス アカウントを作成] をオンにし、[サービス アカウントのプロジェクト ロール] に次のロールを 1 つずつ追加します。
    • roles/monitoring.metricWriter
    • roles/logging.logWriter
    • roles/cloudtrace.agent
    • roles/telemetry.writer
    • roles/serviceusage.serviceUsageConsumer。これらのロールにより、エージェントは Cloud Monitoring、Cloud Logging、Cloud Trace を使用できます。コンプライアンス構成: プラットフォーム チームは、必要なロールを明示的にリストすることで、最小権限の原則を適用します。
    ロール
  4. [詳細設定を表示] で、[メンバー] を allUsers に設定します。
  5. [詳細設定を表示] で、[VPC アクセス] を設定し、[下り（外向き）] を PRIVATE_RANGES_ONLY に設定します。
  6. 必要に応じて、[詳細設定を表示] で [Prometheus サイドカー を有効にする] のチェックを外します。
  7. agent-backend から data-mcp-server に接続をドラッグして、agent-backend を data-mcp-server に接続します。
  8. [保存] をクリックします。

4. フロントエンドを追加する

フロントエンド UI。

  1. [コンポーネントを追加] > [Cloud Run（サービス）] をクリックします。
  2. サービス名（frontend）を入力します。
  3. [詳細設定を表示] で、[サービス アカウントを作成] のチェックを外します。
  4. [詳細設定を表示] で、[上り（内向き）] を INGRESS_TRAFFIC_INTERNAL_LOADBALANCER に設定します。コンプライアンス構成: フロントエンド コンテナへの直接パブリック アクセスがブロックされ、トラフィックがロードバランサ経由で強制的に転送されます。
  5. [詳細設定を表示] で、[メンバー] を allUsers に設定します。フロントエンド
  6. 必要に応じて、[詳細設定を表示] で [Prometheus サイドカー を有効にする] のチェックを外します。
  7. [保存] をクリックします。
  8. frontend から agent-backend に接続をドラッグして、frontend を agent-backend に接続します。

5. Vertex AI コンポーネントを追加する

  1. [コンポーネントを追加] > [Vertex AI] をクリックします。
  2. vertex-ai という名前を付けます。
  3. vertex-ai から agent-backend と data-mcp-server にそれぞれ 2 つの接続をドラッグして、agent-backend と data-mcp-server に接続します。aiplatform.user ロールは、Vertex AI コンポーネントに接続されているため、agent-backend と data-mcp-server のサービス アカウントにすでに割り当てられています。

6. グローバル ロードバランサを追加する

ロードバランサは、フロントエンドを公共のインターネットに公開します。ADC では、これはバックエンド コンポーネントとフロントエンド コンポーネントに分割されます。

A. ロードバランサのバックエンドを追加する

  1. [**コンポーネントを追加**] > [グローバル Cloud Load Balancing（バックエンド）] をクリックします。
  2. galb-backend という名前を付けます。
  3. [接続を追加] をクリックして、frontend に接続します。

B. ロードバランサのフロントエンドを追加する

  1. [**Add Component**] > [Global Cloud Load Balancing (Frontend)] をクリックします。
  2. galb-frontend という名前を付けます。
  3. [接続を追加] をクリックして、galb-backend に接続します。
  4. galb-frontend から galb-backend に接続をドラッグして、galb-frontend を galb-backend に接続します。

アプリ テンプレート

カタログでテンプレートを共有する

カタログを使用すると、さまざまなスペースでアプリ テンプレートを共有して、アーキテクチャ ガバナンスを実現できます。カタログは、プラットフォーム チームによって作成され、共有が承認されたテンプレートの中央リポジトリとして機能します。スペース間でカタログを共有すると、共通プロジェクトでの重複作業を回避し、起動時間を短縮できます。

次に、テンプレートをカタログに追加します。

  1. [カタログ] タブをクリックします。
  2. [テンプレートを追加] をクリックし、simple-3-tier-agentic-app テンプレートを選択します。
  3. [カタログに追加] をクリックします。カタログに追加

テンプレートは、[Google テンプレート]（事前定義されたパターン）、[共有テンプレート]（組織全体で共有）、[テンプレート]（スペース内のカスタム ブループリント）の 3 つの場所にあります。

6. アプリケーションをデプロイする

次に、このテンプレートを使用して cymbal-london-concierge アプリケーションをデプロイするアプリ デベロッパーの役割を演じます。

  1. ADC コンソールで、[テンプレート] タブでテンプレートを再度開き、[アプリを構成] ボタンをクリックします。アプリの設定
  2. [新しいアプリケーションを作成] をクリックします。
  3. アプリケーションを構成します。
    • アプリケーション名: cymbal-london-concierge
    • デプロイ プロジェクト: プロジェクト ID
    • リージョン: us-central1
    • 入力属性> 環境: Development
    • 入力属性> 重要度: Low
  4. [Create Application] をクリックします。本番環境へのデプロイの場合は、[Environment] で [Production] を選択し、[Criticality] で [High] を選択します。これらのタグは、SRE と運用チームが問題が発生したときに作業を分類して優先順位を付けるのに役立ちます。
  5. これにより、アプリケーション テンプレートを含むデプロイの詳細ページが開きます。これはテンプレートにすぎないため、アプリケーション固有の構成を追加する必要があります。
  6. フロントエンドを構成しましょう。フロントエンド コンポーネントをクリックします。
    1. [Containers] > [Edit Container] をクリックします。
    2. 汎用コンテナ イメージを、アプリケーションで使用するイメージに置き換える必要があります。
    3. [コンテナ イメージ] を us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/frontend:codelab-c2c6-v1コンテナ イメージの変更 に設定します。
    4. ポート http1 を 80 に設定します。
    5. 次の環境変数を設定します。
      • API_BASE_URL: module.cloud-run-2.service_uri（cloud-run-2 がエージェント バックエンド コンポーネントの名前であることを確認します。そうでない場合は、コンポーネントの実際の名前に置き換えます）。
    6. [保存] をクリックします。
  7. エージェントのバックエンドを構成しましょう。agent-backend コンポーネントをクリックします。
    1. [Containers] > [Edit Container] をクリックします。
    2. 汎用コンテナ イメージを、アプリケーションで使用するイメージに置き換える必要があります。
    3. [コンテナ イメージ] を us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/agent:codelab-c2c6-v1 に設定します。
    4. 次の環境変数を設定します。
    5. GOOGLE_CLOUD_PROJECT:
    6. GOOGLE_CLOUD_LOCATION: us-central1
    7. DATA_BACKEND_URL: module.cloud-run-1.service_uri（cloud-run-1 がデータ mcp サーバー コンポーネントの名前であることを確認します。そうでない場合は、コンポーネントの実際の名前に置き換えます）
    8. ポート http1 を 8000 に設定します。
    9. [保存] をクリックします。
  8. データ mcp サーバーを構成しましょう。data-mcp-server コンポーネントをクリックします。
    1. [Containers] > [Edit Container] をクリックします。
    2. 汎用コンテナ イメージを、アプリケーションで使用するイメージに置き換える必要があります。
    3. [コンテナ イメージ] を us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/data_mcp:codelab-c2c6-v1 に設定します。
    4. 次の環境変数を設定します。
    5. GOOGLE_CLOUD_PROJECT:
    6. GOOGLE_CLOUD_LOCATION: us-central1
    7. DB_TYPE: sqlite
    8. EMBEDDING_MODEL: text-embedding-005
    9. ポート http1 を 8002 に設定します。
    10. [保存] をクリックします。
    実際の運用シナリオでは、CloudSQL や AlloyDB などのデータベースも構成し、データ mcp サーバーのデータベース接続文字列を指定します。ただし、このラボではメモリ内データベースを使用します。また、mcp サーバーとデータベースを非公開にして、エージェント バックエンドまたはネットワーク内からのみアクセスできるようにします。
  9. ページ上部の [コード] ボタンをクリックして、アプリケーションの Terraform コードを表示します。[Get Code] ボタンをクリックして、アプリケーションの Terraform コードをダウンロードし、コードベースに保存することもできます。アプリ テンプレート
  10. ページの右上にある [Deploy] ボタンをクリックして、アプリケーションをデプロイします。
  11. デプロイ ページで、デプロイ パイプライン用のサービス アカウントを作成するか、既存のサービス アカウントを選択するよう求められます。[サービス アカウントを作成] をクリックし（名前が自動入力されます）、[続行] をクリックします。新しいサービス アカウントの作成には数秒かかります。

サービス アカウントを作成する

  1. サービス アカウントが作成されると、ページが更新され、[サービス アカウントを選択] の横にチェックマークが表示されます。

作成されたサービス アカウント

  1. ページの下部にある [デプロイ] をクリックします。
  2. 完了するまでに数分かかります。デプロイが完了すると、各コンポーネントの横に緑色のチェックマークが表示されます。[ログへのリンク] ボタンをクリックして、クラウドビルドのログを開き、デプロイのステータスを確認することもできます。ボタンが表示されるまでに数分かかることがあります。
![Deployment Logs](./img/10b_logs.png)
  1. クラウド ビルドログを表示して、デプロイのステータスや、アプリケーションのデプロイ中に発生する可能性のあるエラーを確認できます。Google Cloud コンソールで Cloud Build を検索し、[履歴] をクリックして、Cloud Build ログに直接移動することもできます。アプリケーションのデプロイには約 5 ～ 8 分かかります。
![Cloud Build](./img/10c_cloudbuild.png)
  1. デプロイが完了すると、[デプロイ ステータス] フィールドの横に緑色のチェックマークが表示されます。
![Deployment Complete](./img/11_deployed.png)

7. アプリケーションを確認する

エージェントが動作しているかどうかをテストしてみましょう。デプロイの詳細ページの [出力] セクションに、フロントエンド コンポーネントの URL が表示されます。その URL をコピーしてブラウザに貼り付けます。https ではなく http を使用してください。また、フロントエンドで http を使用しているため、ブラウザで表示される可能性のある警告も受け入れます。

アプリとチャットして、ロンドン旅行の旅程を作成するよう依頼します。

フロントエンド

8. App Hub と Application Monitoring

  1. ADC コンソールで、ページの右上にある [View app in App Hub] ボタンをクリックします。

App Hub

  1. App Hub でアプリが開きます。App Hub は、すべてのアプリケーションを表示して管理するための一元的な場所であり、リソース中心のビューからアプリケーション中心のビューに移行できます。ADC を使用してアプリを作成すると、App Hub にアプリが自動的に作成されます。アプリケーションを構成するすべてのワークロードとサービスがここに表示されます。クラウド内のリソースを個々のリソースとして表示するのではなく、単一のアプリケーションの一部として表示することで、管理とガバナンスを簡素化できます。

App Hub

  1. [オブザーバビリティで表示] ボタンをクリックします。これにより、オブザーバビリティ コンソールでアプリケーションが開きます。
  2. ダッシュボード ビューを開きます。このダッシュボードでは、リクエスト率、エラー率、レイテンシ、飽和度などの 4 つのゴールデン シグナルなどの指標を提供することで、アプリケーションのパフォーマンスと健全性の概要を確認できます。このアプリケーション中心のモニタリングは、信頼性を維持するために不可欠です。アプリケーションのログとトレースを表示することもできます。これにより、シグナルを関連付けてボトルネックを特定できます。これは、Vertex AI や Data MCP サーバーからの応答が遅いとユーザー エクスペリエンスが低下する可能性がある、このような複雑なエージェント アプリケーションでは特に重要です。

ダッシュボード

  1. ガイド付き探索: アプリでエージェントに具体的な質問をします（例: 「ロンドンのおすすめの観光スポットはどこですか？」）。次に、オブザーバビリティ コンソールに戻り、[トレース] リストを表示します。リクエストに対応するトレースを見つけます。クリックすると、詳細なウォーターフォール ビューが表示されます。フロントエンド、エージェント バックエンド、Vertex AI への呼び出しで費やされた時間を確認する方法に注目してください。これにより、レイテンシが発生している場所を正確に特定できます。

9. 完了

おめでとうございます！ADC を使用して 3 階層アプリケーション アーキテクチャをデプロイしました。

学習した内容

  • ADC を使用してクラウド アーキテクチャを視覚的に組み立てる方法。
  • UI を使用して ADC を設定し、API を有効にする方法。
  • ADC を使用してアプリケーションをデプロイする方法。
  • リソースのアプリケーション中心のビューに App Hub を使用する方法。
  • オブザーバビリティ ダッシュボードを使用してアプリケーションの健全性をモニタリングする方法。

リファレンス ドキュメント