AI Studio から Cloud Run にデプロイする

1. 概要

AI を利用した構築はどこから始めればよいですか？ほとんどの場合、簡単な質問から始まります。「ずっと考えていた問題の解決策を短時間でプロトタイピングできるか？」そこで役立つのが Google AI Studio です。迅速なプロトタイピングのためのプラットフォームです。この Codelab では、バイブ コーディングを使用してシンプルなウェブ アプリケーションを構築し、Cloud Run にデプロイします。

前提条件

• ウェブ アプリケーションに関する基礎知識。

学習内容

この Codelab では、以下の方法を学びます。

1. バイブ コーディングを使用して Google AI Studio でシンプルなウェブ アプリケーションを構築します。
2. アプリケーションが想定どおりに動作することをテストします。
3. 構築したアプリケーションを Cloud Run にデプロイする。

要件

• ウェブブラウザ（Chrome、Firefox など）

2. 始める前に

1. Google アカウントをまだお持ちでない場合は、Google アカウントを作成する必要があります。
   • 仕事用または学校用のアカウントではなく、個人用アカウントを使用します。仕事用または学校用のアカウントには、このラボに必要な API を有効にできないという制限が課されている場合があります。
2. Google AI Studio に移動し、利用規約を確認します。
3. Google Cloud スターター ティアでは、2 つのフルスタック アプリケーションまで無料でデプロイできます。

3. プロトタイプ

Google AI Studio で、右上にある [設定] パネルを確認します。ここでは、モデルとデフォルトのフレームワークを選択し、システム指示を指定できます。

設定に問題がなければ、作成するアプリケーションの説明を入力して、[ビルド] をクリックします。

Create a formal looking frontend application that has two buttons: "Snowflakes" and "Balloons".  
If the user clicks on the "Snowflakes" button, snowflakes of medium size should start falling on the screen from top to bottom for 5 seconds.  
If the user clicks on the "Balloons" button, balloons of medium size should start floating from the bottom of the screen and float to the top for 5 seconds.

この説明に基づいて、AI Studio はウェブ アプリケーションを構築します。生成プロセスには 2 ～ 3 分かかります。このプロセス中に、デザイン オプションの選択を求められることがあります。

アプリケーションで問題が発生した場合は、追加のプロンプトを入力して動作を調整できます（例: Increase the size of the snowflakes to twice their current size）。

次の画像は、生成されたアプリケーションのスナップショットを示しています。

4. Cloud Run にデプロイする

アプリケーションの準備ができたので、Cloud Run にデプロイします。

1. ページの右上にある [公開] をクリックします。

2. [Google Cloud にアプリをデプロイ] ダイアログが開きます。

Google Cloud スターター ティア アカウントには、2 つのデプロイが無料で提供されます。

3. [Select a Cloud Project] プルダウンをクリックしてプロジェクトを選択するか、[Default Gemini Project] を使用して続行します。
4. プルダウンからプロジェクトを選択します。プロジェクトが見つからない場合は、[プロジェクトをインポート] をクリックし、[プロジェクトをインポート] ペインからプロジェクトを選択します。
5. プロンプトが表示されたら、組織の種類として [個人] を選択し、住所を入力します。

6. [アプリを公開] をクリックし、アプリケーションが Cloud Run にデプロイされるまで待ちます。AI Studio は Cloud Run サービス名を自動的に生成します。

7. デプロイには数分かかります。完了したら、[アプリの URL] をクリックして、デプロイされたウェブ アプリケーションを開きます。

5. クリーンアップ

この Codelab で使用したリソースに対して Google Cloud アカウントで課金されないようにするには、[アプリの公開を停止] をクリックします。

6. 完了

おめでとうございます！Google AI Studio でウェブ アプリケーションのバイブ コーディングを行い、Cloud Run にデプロイしました。

AI Studio と Cloud Run の統合により、アプリケーションを Google Cloud に簡単に直接デプロイできます。Cloud Run を使用すると、サーバーレス環境のすべてのメリットが得られ、インフラストラクチャ管理の複雑さが解消されます。

次のステップ

これでこのラボは完了です。アプリケーション フレームワークの準備が整ったら、次の公式ガイドでプロジェクトの機能を拡張する方法を確認してください。

推奨ドキュメントとガイド

• プロンプト設計戦略: プロンプトの構造化、システム指示の使用、少数ショットの例の実装、出力形式の制御に関する基本原則を学びます。
• Gemini API を使用した関数呼び出し: デプロイを外部ツールや API に接続し、Gemini モデルが構造化データを出力して現実世界のアプリケーション ロジックをトリガーできるようにします。
• Text-to-Speech の生成: Gemini API を使用して音声オーディオを生成する方法、音声スタイルを制御する方法、Google AI Studio の音声ライブラリを使用して音声をテストする方法について説明します。