クイックスタート: Vertex AI Studio プロンプトをウェブ アプリケーションとしてデプロイする

Vertex AI Studio では、プロンプトを設計して反復処理し、さまざまな構成とモデルの結果を比較できます。プロンプトのエンジニアリングが完了したら、プロンプトをウェブ アプリケーションとしてデプロイし、共同編集者やターゲット ユーザーと共有して、ウェブ アプリケーションをテストしてもらうことができます。ウェブ アプリケーションは Cloud Run でホストされ、 Google Cloud コンソールの外部で使用できます。

このクイックスタートでは、次のことを行います。

  • プロンプト変数を使用してプロンプトを作成する
  • プロンプトをウェブ アプリケーションとしてデプロイする
  • デプロイの進行状況をモニタリングし、デプロイされたアプリケーションをテストする
  • プロンプトを更新して再デプロイする
  • マルチモーダル サポートでプロンプト送信をテストする

始める前に

Vertex AI Studio を使用したことがない場合は、別のクイックスタート ガイドに沿って操作するか、Google Cloud Skills Boost コースを受講して、Vertex AI Studio の基本を学習してください。このガイドでは、次のものが必要です。

  1. 課金が有効になっている Google Cloud プロジェクトが作成されている
  2. Vertex AI API が有効になっている

権限の付与が複数回必要です

Vertex AI Studio を使用するための既存の権限に加えて、プロンプトをデプロイするには、次の権限が必要です。

アクション 必要な権限 目的
追加の API を有効にする serviceusage.services.enable 次の API を有効にします。
  • Cloud Run Admin API(run.googleapis.com
  • Identity-Aware Proxy API(iap.googleapis.com
  • Artifact Registry API(artifactregistry.googleapis.com
  • Cloud Build API(cloudbuild.googleapis.com
  • Cloud Logging API(logging.googleapis.com
サービス アカウントに権限を付与する resourcemanager.projects.setIamPolicy Compute Engine のデフォルト サービス アカウントに次のロールを付与します。
特定の権限をデプロイする
  • storage.buckets.create
  • run.services.create
  • artifactregistry.repositories.create
  • run.services.setIamPolicy
デプロイ中に、一連のソースコードが Cloud Storage にアップロードされ、新しいサービスが作成されて Cloud Run にデプロイされます。コンテナ イメージのリポジトリを作成するには、artifactregistry.repositories.create が必要です。サービスを一般公開するには、run.services.setIamPolicy が必要です。

プロジェクトのオーナーである場合は、追加の操作を行う必要はありません。Vertex AI Studio のガイドに沿って操作してください。プロジェクトのオーナーでない場合は、最初の 2 つのアクションを実行し、編集者roles/editor)ロールと Cloud Run 管理者roles/run.admin)ロールを付与するようプロジェクト管理者に依頼してください。

プロンプト変数を使用してプロンプトを作成する

Vertex AI Studio のプロンプト作成ページに移動し、プロンプト入力ボックスで [変数を追加] をクリックします。

[プロンプト変数の管理] ダイアログで、変数名を入力して値を指定します。[適用] をクリックします。

[プロンプト変数の管理] ダイアログ

プロンプト入力ボックスで、変数を使用してプロンプトを作成し、他のパラメータを調整します。たとえば、Google 検索によるグラウンディングを有効にして、「常にウェブから現在の天気を取得する」をシステム指示として設定できます。

プロンプトをウェブ アプリケーションとしてデプロイする

プロンプトをウェブ アプリケーションとしてデプロイするには、右上にある [コードで構築] ボタンをクリックします。[アプリとしてデプロイ] をクリックします。

[build with code] ボタンをクリックし、[deploy as app] をクリックします。

プロンプトを保存

プロンプトをデプロイする前に保存する必要があるため、保存を求めるダイアログがポップアップ表示されます。プロンプトが保存されると、デプロイ ダイアログが自動的に開きます。

デプロイする前にプロンプトを保存する

最初のデプロイで API を有効にして権限を付与する

  1. プロンプトが保存されると、デプロイ プロセスが続行されます。初めてデプロイする場合は、必要な API を有効にするためのダイアログが表示されます。[必要な API を有効にする] をクリックします。
  2. API が有効になると、[ウェブアプリを作成] ダイアログが表示されます。[認証を必須にする(Identity Aware Proxy 経由)] または [公開アクセスを許可する] を選択できます。
    • 認証が必要な場合は、アクセス権を付与するガイドに沿って操作します(自分自身も含む)。
    • 公開アクセスを許可すると、誰でもアプリにアクセスできるようになります。そのため、プロンプトに機密情報や個人を特定できる情報(PII)を含めないでください。[このアプリが公開でデプロイされることを理解しました] チェックボックスをオンにして、確認します。
  3. [アプリを作成] をクリックして、デプロイを開始します。
  4. これが最初のデプロイの場合、サービス アカウントに必要なロールを付与するように求める別のダイアログが表示されます。[すべて許可] をクリックして次に進みます。

これが最初のデプロイの場合、別のダイアログがポップアップ表示され、サービス アカウントに必要なロールを付与するように求められます。[すべて許可] をクリックして続行します。

デプロイが開始される

Vertex AI Studio は、ウェブ アプリケーションのソースコードを含む zip ファイルを作成し、その zip ファイルを Cloud Storage バケットにアップロードします。デプロイが開始されると、[ウェブアプリを管理] ダイアログがポップアップ表示され、アプリケーションの名前、最終デプロイ日時、デプロイ ステータスなど、デプロイに関する情報が表示されます。

アプリの管理ダイアログ

デプロイ ステータスのモニタリング

デプロイが完了するまでに 2 ~ 3 分かかります。デプロイ ステータスは、[ウェブアプリの管理] ダイアログの [ステータス] 列に表示されます。[ウェブアプリを管理] ダイアログを閉じた場合は、[コードで構築] ボタンの下のメニューから再び開くことができます。

デプロイが完了すると、ステータス列が [Ready] に変わり、アプリケーション名の横に [Open] ボタンが表示されます。

アプリ名の横に [アプリを開く] ボタンが表示される

アクセス制御とシークレット キー

ウェブ アプリケーションは、デフォルトで認証されていないアクセスを許可するアクセス制御が有効になった状態でデプロイされます。この設定をオフにするには、[] 鉛筆アイコン ボタンをクリックします。詳細については、一般公開アクセスを無効にするをご覧ください。

基本的な保護を提供するために、ウェブ アプリケーションでは、プロンプトを送信する URL に秘密鍵を追加する必要があります。秘密鍵は [Secret Key] 列で確認できます。Vertex AI Studio からウェブ アプリケーションを開くと、キーが URL に自動的に追加されます。

ウェブ アプリケーションを開いてプロンプトを送信する

[ウェブアプリの管理] ダイアログで [開く] をクリックして、デプロイされたアプリケーションにアクセスします。アプリは、秘密鍵が ?key=SECRET_KEY の形式で URL に追加された状態で開かれる必要があります。

アプリの管理ダイアログからウェブ アプリケーションを開きます。シークレット キーが URL に追加されます。

変数に値を入力し、[送信] をクリックします。右側に結果が表示されます。

ウェブアプリからプロンプトを送信する

[コードで構築] ボタンメニューからウェブ アプリケーションを開く

ウェブ アプリケーションの準備ができたら、[コードで構築] ボタンメニューから開くこともできます。

[コードで構築] ボタンメニューからアプリを開く

Cloud Run はサーバーレス サービスです。つまり、アプリケーションのコンテナがアクティブに使用されていない場合はシャットダウンされます。そのため、ウェブ アプリケーションの読み込みに数秒かかることがあります。また、ウェブ アプリケーションを長時間アイドル状態のままにしておくと、送信が機能しなくなることがあります。ページを更新すると、この問題は解決されるはずです。

通知ベルからステータスをモニタリングする

ベルアイコンをクリックして、[通知] メニューからステータスをモニタリングすることもできます。デプロイが正常に完了すると、ベルアイコンの読み込みアニメーションが停止し、緑色の円が表示されます。

通知ベルからステータスをモニタリングする

通知をクリックすると、Cloud Run ページにリダイレクトされます。Cloud Run ページの URL に秘密鍵が付加されていません。?key=SECRET_KEY の形式で手動で追加する必要があります。

Cloud Run ページのアプリリンクにキーが付加されない

プロンプトを更新して再デプロイする

Vertex AI Studio でプロンプトをさらに編集して、プロンプトを会話に変換できます。[コードでビルド] ボタンをクリックし、[アプリを管理] をクリックして、[ウェブアプリの管理] ダイアログを開きます。[アプリを更新] をクリックして、更新されたプロンプトでウェブ アプリケーションを再デプロイします。

確認のダイアログが表示されます。再デプロイすると、Vertex AI Studio の外部(Cloud Run ソースコード エディタなど)でデプロイされたウェブ アプリケーションに加えた変更が失われることを示すメッセージが表示されます。[確認] をクリックして続行します。

[ウェブアプリを管理] ダイアログが再び表示されます。このプロセスは、初期デプロイと似ています。進行状況は、初回デプロイと同じ方法でモニタリングできます。

更新が完了したら、ウェブ アプリケーションを再度開くことができます。プロンプト変数を含む会話 UI が表示されます。値を入力し、空でないコンテンツを入力して会話を続けます。

更新されたアプリにはチャット UI があります

マルチモーダル コンテンツを挿入する

画像、動画、音声、ドキュメントなどの入力を会話 UI に挿入できます。サポートされている入力は、プロンプト用に選択したモデルによって異なります。各モデルのマルチモーダル サポートに関するドキュメントをご覧ください。

ファイルを挿入するには、会話の入力ボックスにあるクリップ アイコン ボタン をクリックします。

マルチモーダル入力を挿入する

提供した入力を使用してモデルを操作できます。

マルチモーダル入力を使用してモデルを操作する

詳細トピック

デプロイ プロセスに慣れたら、次の操作を検討できます。

Cloud Run でソースコードを編集する

ウェブ アプリケーションをカスタマイズする場合は、Cloud Run でソースコードを変更できます。行の末尾にある [その他] アイコン ボタンをクリックして、[ウェブ アプリを管理] ダイアログから Cloud Run ソースコード ページを開きます。ウェブアプリの管理ダイアログからオープンソース コードエディタを開く

または、ウェブ アプリケーションから [ソースコード エディタ] リンクをクリックして、セキュリティ ページに移動することもできます。

Cloud Run のソースコード ページで、[ソースを編集] をクリックして編集モードを開始します。完了したら、[保存して再デプロイ] をクリックします。

再デプロイが完了したら、Vertex AI Studio からアプリケーションを開く必要があります。[Vertex AI からデプロイ] バッジのリンクから Vertex AI Studio ページに移動できます。

アクセスを許可

ユーザーまたはグループにアプリへのアクセス権を付与する手順は次のとおりです。

  1. [Manage Web App] ダイアログを開きます。
  2. [アクセス制御] 列の鉛筆アイコン をクリックします。Cloud Run のセキュリティ ページが新しいタブで開きます。
  3. Cloud Run の [セキュリティ] ページで、Identity-Aware Proxy(IAP)のチェックボックスを見つけます。チェックされていることを確認し、[ポリシーを編集] をクリックします。
  4. アクセス権を編集するためのサブタスクが表示されます。[プリンシパル] フィールドにユーザーまたはグループのメールアドレスを入力します。組織内のユーザーは、同じ組織のユーザーのみを追加できます。
    IAP を編集するサブタスク
  5. アクセスレベル フィールドは空のままにします。
  6. [保存] をクリックします。
  7. サブタスクが閉じたら、Cloud Run ページで [保存] をもう一度クリックします。
    Cloud Run UI で再度保存する

公開アクセスをオフにする

ウェブ アプリケーションを一般公開する必要がない場合は、Cloud Run で無効にできます。[ウェブアプリの管理] ダイアログを開き、[アクセス制御] 列の 鉛筆アイコンをクリックします。Cloud Run のセキュリティ ページが新しいタブで開きます。

ウェブ アプリケーションから [セキュリティ設定] リンクをクリックして、セキュリティ ページに移動することもできます。

ウェブ アプリケーションに対応する Cloud Run サービスの [セキュリティ] ページで、[Cloud IAM を使用して受信リクエストを認証する] をオンにして、[認証を必須にする] を選択します。[保存] をクリックします。

これにより、ウェブ アプリケーションに URL を介してアクセスできなくなります。アクセスしようとすると、[Error: Forbidden] ページが表示されます。

公開アクセスを再度有効にする

一般公開アクセスを再度有効にする場合は、[Cloud IAM を使用して受信リクエストを認証する] チェックボックスをオフにして保存します。[認証されていない呼び出しを許可する] を選択した場合、プロジェクトが組織に属していると機能しません。詳細については、Cloud Run での認証をご覧ください。

開発用にローカル アクセスを設定する

パブリック プレビューでは、アクセス制御はまだサポートされていません。したがって、公開アクセスをオフにすると、ウェブ アプリケーションにアクセスする唯一の方法はローカル プロキシを設定することです。これは、gcloud コマンドを使用して行うことができます。まず、 Google Cloud コンソールの右上にある ターミナル アイコン ボタンをクリックして、Cloud Shell を開きます。Cloud Shell の承認を求められます。[Authorize] をクリックして続行します。

完了したら、[ウェブアプリの管理] ダイアログを開き、行の末尾にある その他アイコン ボタンをクリックして、その他の操作を表示します。[Cloud Shell 経由でローカル アクセスを設定] をクリックします。ウェブアプリの管理ダイアログからローカル アクセス設定コマンドを取得

コマンドが Cloud Shell に追加されます。Enter キーを押して、印刷が完了するまで待ちます。Click on the link to preview で始まる行のリンクをクリックします。申請内容を確認できます。このリンクは、gcloud コマンドが実行されている場合にのみ機能します。Cloud Shell のローカル アクセス リンク

一般的な問題

認証エラー: 秘密鍵がない

次のエラーが表示された場合は、URL にシークレット キーが付加されていないことを意味します。手順に沿って Vertex AI Studio からウェブ アプリケーションを開くか、[アプリの管理] ダイアログから秘密鍵をコピーして、?key=SECRET_KEY の形式で URL に追加します。

秘密鍵がない場合のエラー

認証エラー: 秘密鍵が無効です

次のエラーは、URL に追加されたキーが無効であることを意味します。シークレット キーはプロンプトごとに一意です。別のプロンプトのシークレット キーは使用できません。ウェブ アプリケーションを正しく開く手順に沿って操作します。

無効なキーのエラー

400 無効な引数: 空の入力

次のエラーは、プロンプト変数に入力があるにもかかわらず、チャットが空の場合に発生します。400 エラー メッセージが表示されます。この問題を解決するには、空でない値を入力して再送信します。

空のコンテンツのエラー

400 無効な引数: mimeType がサポートされていません

モデルがサポートしていないファイル形式を選択すると、400 エラーが返されます。これは想定どおりの動作です。モデルでサポートされている他の種類のファイルを使用する必要があります。 各モデルのマルチモーダル サポートに関するドキュメントをご覧ください。

サポートされていない MIME タイプのエラー

次のステップ