1. 概要
初めてウェブ アプリケーションをデプロイするのは大変なことのように思えるかもしれませんが、最初のデプロイ後も、プロセスが負担が大きすぎる場合は、アプリケーションの新しいバージョンをデプロイしない可能性があります。継続的デプロイを使用すると、アプリケーションの変更を簡単に自動的にデプロイできます。
このラボでは、ウェブ アプリケーションを作成し、アプリケーションのソースコードが変更されたときにアプリケーションを自動的にデプロイするように Cloud Run を構成します。その後、アプリケーションを変更して再デプロイします。
学習内容
- Cloud Shell エディタでウェブ アプリケーションを作成する
- アプリケーション コードを GitHub に保存する
- アプリケーションを Cloud Run に自動的にデプロイする
- Genkit を使用して生成 AI をアプリケーションに追加する
- dotprompt ライブラリを使用して LLM プロンプトを管理する
2. 前提条件
- Google アカウントをお持ちでない場合は、Google アカウントを作成する必要があります。
- 仕事用または学校用のアカウントではなく、個人アカウントを使用している。職場用アカウントや学校用アカウントには、このラボに必要な API を有効にできない制限が適用されている場合があります。
- GitHub アカウントがまだない場合は、GitHub アカウントを作成する必要があります。
- 既存の GitHub アカウントがある場合は、そのアカウントを使用します。GitHub では、新しいアカウントがスパムとしてブロックされる可能性が高くなります。
- アカウントがスパムと見なされる可能性を減らすため、GitHub アカウントで 2 要素認証を設定します。
3. プロジェクトの設定
- Google Cloud コンソールにログインします。
- Cloud コンソールで課金を有効にする。
- このラボを完了しても、Cloud リソースの費用は 1 米ドル未満です。
- このラボの最後にある手順に沿ってリソースを削除すると、それ以上の請求が発生しなくなります。
- 新規ユーザーは、300 米ドル分の無料トライアルをご利用いただけます。
- 生成 AI for Devs イベントに参加する予定ですか?1 米ドル分のクレジットが提供される場合があります。
- 新しいプロジェクトを作成するか、既存のプロジェクトを再利用するかを選択します。
- Cloud 課金システムの [マイ プロジェクト] で、課金が有効になっていることを確認します。
- 新しいプロジェクトの
Billing account
列にBilling is disabled
と表示されている場合:- [
Actions
] 列のその他アイコンをクリックします。 - [お支払い情報を変更] をクリックします。
- 使用する請求先アカウントを選択します。
- [
- Gen AI for Devs イベントに参加している場合、アカウントの名前は Google Cloud Platform Trial Billing Account になる可能性があります。
- 新しいプロジェクトの
4. Cloud Shell エディタを開く
- Cloud Shell エディタに移動します。
- ターミナルが画面の下部に表示されない場合は、開きます。
- ハンバーガー メニュー
をクリックします。
- [Terminal] をクリックします。
- [New Terminal] をクリックします。
- ハンバーガー メニュー
- ターミナルで、次のコマンドを使用してプロジェクトを設定します。
- 形式:
gcloud config set project [PROJECT_ID]
- 例:
gcloud config set project lab-project-id-example
- プロジェクト ID がわからない場合:
- すべてのプロジェクト ID を一覧表示するには、次のコマンドを使用します。
gcloud projects list | awk '/PROJECT_ID/{print $2}'
- すべてのプロジェクト ID を一覧表示するには、次のコマンドを使用します。
- 形式:
- 承認を求められたら、[承認] をクリックして続行します。
- 次のようなメッセージが表示されます。
Updated property [core/project].
WARNING
が表示され、Do you want to continue (Y/N)?
を求められた場合は、プロジェクト ID が正しく入力されていない可能性があります。N
キー、Enter
キーを押して、gcloud config set project
コマンドをもう一度実行してみてください。
5. API を有効にする
ターミナルで、API を有効にします。
gcloud services enable \
run.googleapis.com \
cloudbuild.googleapis.com \
aiplatform.googleapis.com
このコマンドが完了するまで数分かかる場合がありますが、最終的には次のような成功メッセージが表示されます。
Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.
6. Git を構成
- グローバル git ユーザーのメールアドレスを設定します。
git config --global user.email "you@example.com"
- グローバル Git ユーザー名を設定します。
git config --global user.name "Your Name"
- グローバル git のデフォルト ブランチを
main
に設定します。git config --global init.defaultBranch main
7. コードを記述する
Node.js でアプリケーションを作成するには:
- ホーム ディレクトリに移動します。
cd ~
codelab-genai
ディレクトリを作成します。mkdir codelab-genai
codelab-genai
ディレクトリに移動します。cd codelab-genai
index.js
ファイルを作成します。touch index.js
package.json
ファイルを作成します。npm init es6 -y
express
を依存関係として追加するnpm install express
node_modules
の commit を防ぐために.gitignore
ファイルを追加echo node_modules/ >> .gitignore
- Cloud Shell エディタで
index.js
ファイルを開きます。 画面上部に空のファイルが表示されます。このcloudshell edit index.js
index.js
ファイルを編集できます。 - 次のコードをコピーして、開いた
index.js
ファイルに貼り付けます。 数秒後、Cloud Shell エディタによってコードが自動的に保存されます。このコードは、http リクエストに「Hello world!」という応答メッセージで応答します。import express from 'express'; const app = express(); app.get('/', async (req, res) => { res.send('Hello world!'); }); const port = process.env.PORT || 8080; app.listen(port, () => { console.log(`codelab-genai: listening on port ${port}`); });
アプリケーションの初期コードが完成し、バージョン管理に保存できるようになりました。
8. リポジトリを作成する
- 画面の下部にある Cloud Shell ターミナルに戻ります。
- 正しいディレクトリにいることを確認します。
cd ~/codelab-genai
- Git リポジトリを初期化する
git init -b main
- GitHub CLI にログインする
gh auth login
Enter
キーを押してデフォルト オプションを受け入れ、GitHub CLI ツールの手順に沿って操作します。手順は次のとおりです。- ログインするアカウントを選択してください。
GitHub.com
- このホストでの Git オペレーションに使用するプロトコルは何ですか。
HTTPS
- GitHub 認証情報を使用して Git を認証しますか?
Y
(この項目が表示されない場合はスキップします)。 - GitHub CLI の認証方法を選択してください。
Login with a web browser
- ワンタイム コードをコピーする
- https://github.com/login/device を開きます。
- 1 回限りのコード
- [GitHub を承認] をクリックします。
- ログインを完了してください
- ログインするアカウントを選択してください。
- ログインしていることを確認します。
ログインに成功すると、GitHub のユーザー名が出力されます。gh api user -q ".login"
GITHUB_USERNAME
変数を作成するGITHUB_USERNAME=$(gh api user -q ".login")
- 環境変数が作成されたことを確認します。
変数が正常に作成されていれば、GitHub ユーザー名が出力されます。echo ${GITHUB_USERNAME}
codelab-genai
という名前の空の GitHub リポジトリを作成します。 次のエラーが表示される場合:gh repo create codelab-genai --private
GraphQL: Name already exists on this account (createRepository)
codelab-genai
という名前のリポジトリがすでに存在します。このチュートリアルを続行するには、次の 2 つの方法があります。- 既存の GitHub リポジトリを削除する
- 別の名前のリポジトリを作成し、次のコマンドで名前を変更してください。
codelab-genai
リポジトリをリモートorigin
として追加します。git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai
9. コードを共有する
- 正しいディレクトリにいることを確認します。
cd ~/codelab-genai
- 現在のディレクトリ内のすべてのファイルをこの commit に追加します。
git add .
- 最初の commit を作成します。
git commit -m "add http server"
- commit を
origin
リポジトリのmain
ブランチに push します。git push -u origin main
このコマンドを実行して、生成された URL にアクセスすると、GitHub でアプリケーション コードを確認できます。
echo -e "\n\nTo see your code, visit this URL:\n \
https://github.com/${GITHUB_USERNAME}/codelab-genai/blob/main/index.js \n\n"
10. 自動デプロイを設定する
- Cloud Shell エディタのタブを開いたままにします。このタブについては後で説明します。
- 新しいタブで Cloud Run ページにアクセスします。
- コンソールで正しい Google Cloud プロジェクトを選択
- [CONNECT REPO] をクリックします。
- [Cloud Build の設定] をクリックします。
- [リポジトリ プロバイダ] で [GitHub] を選択します。
- ブラウザで GitHub アカウントにログインしていない場合は、認証情報を使用してログインします。
- [認証]、[続行] の順にクリックします。
- ログインすると、Cloud Run ページに「GitHub アプリは、どのリポジトリにもインストールされていません。」というメッセージが表示されます。
- [INSTALL GOOGLE CLOUD BUILD] ボタンをクリックします。
- [インストールの設定] ページで [Only select repositories] を選択し、CLI で作成した codelab-genai リポジトリを選択します。
- [インストール] をクリックします。
- 注: GitHub リポジトリが多い場合は、読み込みに数分かかることがあります。
- [リポジトリ] として
your-user-name/codelab-genai
を選択します。- リポジトリがない場合は、[接続されたリポジトリを管理します] リンクをクリックします。
- [ブランチ] は
^main$
のままにします。 - [Go、Node.js、Python、Java、.NET Core、Ruby、PHP(Google Cloud の Buildpack を使用)] をクリックします。
- 他のフィールド(
Build context directory
、Entrypoint
、Function target
)はそのままにします。
- 他のフィールド(
- [保存] をクリックします。
- [リポジトリ プロバイダ] で [GitHub] を選択します。
- [認証] までスクロールします。
- [未認証の呼び出しを許可する] をクリックします。
- [作成] をクリックします。
ビルドが完了したら(数分かかることがあります)、次のコマンドを実行し、生成された URL にアクセスして、実行中のアプリケーションを表示します。
echo -e "\n\nOnce the build finishes, visit your live application:\n \
"$( \
gcloud run services list | \
grep codelab-genai | \
awk '/URL/{print $2}' | \
head -1 \
)" \n\n"
11. コードを変更する
Cloud Shell エディタに戻る
Cloud Shell エディタがまだ開いている場合は、これらの手順をスキップできます。
- Cloud Shell エディタに移動します。
- ターミナルが画面の下部に表示されない場合は、開きます。
- ハンバーガー メニュー
をクリックします。
- [Terminal] をクリックします。
- [New Terminal] をクリックします。
- ハンバーガー メニュー
- ターミナルで、次のコマンドを使用してプロジェクトを設定します。
- 形式:
gcloud config set project [PROJECT_ID]
- 例:
gcloud config set project lab-project-id-example
- プロジェクト ID がわからない場合:
- すべてのプロジェクト ID を一覧表示するには、次のコマンドを使用します。
gcloud projects list | awk '/PROJECT_ID/{print $2}'
- すべてのプロジェクト ID を一覧表示するには、次のコマンドを使用します。
- 形式:
- 承認を求められたら、[承認] をクリックして続行します。
- 次のようなメッセージが表示されます。
Updated property [core/project].
WARNING
が表示され、Do you want to continue (Y/N)?
を求められた場合は、プロジェクト ID が正しく入力されていない可能性があります。N
キー、Enter
キーを押して、gcloud config set project
コマンドをもう一度実行してみてください。
Genkit と Vertex AI をアプリケーションに追加する
- 画面の下部にある Cloud Shell ターミナルに戻ります。
- 正しいディレクトリにいることを確認します。
cd ~/codelab-genai
- Node.js Genkit SDK をインストールします。
npm install @genkit-ai/ai
- Vertex AI 用の Node.js Genkit SDK をインストールします。
npm install @genkit-ai/vertexai
- Cloud Shell エディタで
index.js
を再度開きます。cloudshell edit ~/codelab-genai/index.js
index.js
ファイル内のコードを次のコードに置き換えます。import express from 'express'; const app = express(); import { genkit } from 'genkit'; import { gemini15Flash, vertexAI } from '@genkit-ai/vertexai'; const ai = genkit({ plugins: [ vertexAI({ location: 'us-central1' }), ], }); app.get('/', async (req, res) => { const animal = req.query.animal || 'dog'; const prompt = `Give me 10 fun facts about ${animal}. Return this as html without backticks.` const llmResponse = await ai.generate({ model: gemini15Flash, prompt: prompt, }); const html = llmResponse.text; res.send(html); }); const port = process.env.PORT || 8080; app.listen(port, () => { console.log(`codelab-genai: listening on port ${port}`); });
- Cloud Shell で、まだ正しいディレクトリにいることを確認します。
cd ~/codelab-genai
- 次のコマンドを実行して、新しいバージョンのアプリケーションをローカルの git リポジトリに commit します。
git add . git commit -m "add latest changes"
- 変更を GitHub に push します。
git push
- ビルドが完了したら、次のコマンドを実行して、デプロイされたアプリケーションにアクセスします。
echo -e "\n\nOnce the build finishes, visit your live application:\n \ "$( \ gcloud run services list | \ grep codelab-genai | \ awk '/URL/{print $2}' | \ head -1 \ )" \n\n"
ビルドが完了して変更が反映されるまでに数分かかることがあります。
すべてのリビジョンの履歴は、https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions で確認できます。
12. (省略可)Genkit で .prompt ファイルを使用します。
- 画面の下部にある Cloud Shell ターミナルに戻ります。
- 正しいディレクトリにいることを確認します。
cd ~/codelab-genai
- プロンプトを保存する
prompts
フォルダを作成します。mkdir prompts
animal-facts.prompt
ファイルを作成して最初のプロンプトを作成します。touch prompts/animal-facts.prompt
- Cloud Shell エディタで
animal-facts.prompt
ファイルを開きます。cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
animal-facts.prompt
を編集して、次のコードを貼り付けます。--- model: vertexai/gemini-1.5-flash input: schema: animal: string --- Give me 10 fun facts about {{animal}}. Return the results as HTML without markdown backticks.
- Cloud Shell エディタで
index.js
ファイルを開きます。cloudshell edit ~/codelab-genai/index.js
index.js
ファイル内のコードを次のコードに置き換えます。import express from 'express'; const app = express(); import { genkit } from 'genkit'; import { vertexAI } from '@genkit-ai/vertexai'; const ai = genkit({ plugins: [ vertexAI({ location: 'us-central1' }), ], }); app.get('/', async (req, res) => { const animal = req.query.animal || 'dog'; const animalPrompt = ai.prompt('animal-facts'); const llmResponse = await animalPrompt({animal}); const html = llmResponse.text; res.send(html); }); const port = process.env.PORT || 8080; app.listen(port, () => { console.log(`codelab-genai: listening on port ${port}`); });
- Cloud Shell で、まだ正しいディレクトリにいることを確認します。
cd ~/codelab-genai
- 次のコマンドを実行して、新しいバージョンのアプリケーションをローカルの git リポジトリに commit します。
git add . git commit -m "add latest changes"
- 変更を GitHub に push します。
git push
- ビルドが完了したら、次のコマンドを実行して、デプロイされたアプリケーションにアクセスします。
echo -e "\n\nOnce the build finishes, visit your live application:\n \ "$( \ gcloud run services list | \ grep codelab-genai | \ awk '/URL/{print $2}' | \ head -1 \ )" \n\n"
ビルドが完了して変更が反映されるまでに数分かかることがあります。
すべてのリビジョンの履歴は、https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions で確認できます。
13. (省略可)システム プロンプトを使用する
この手順では、前の手順で .prompt
ファイルをすでに追加していることを前提としています。
- 画面の下部にある Cloud Shell ターミナルに戻ります。
- 正しいディレクトリにいることを確認します。
cd ~/codelab-genai
- Cloud Shell エディタで
animal-facts.prompt
ファイルを開きます。cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
animal-facts.prompt
を編集して、次のコードを貼り付けます。--- model: vertexai/gemini-1.5-flash config: temperature: 0.9 input: schema: animal: string --- role "system" The user should have submitted an animal. If the user requests anything besides animal fun facts, respond in a kind and firm manner that you only provide information about fun facts. Give the user 10 fun facts about the animal the user provided. All responses should be valid HTML without markdown backticks. role "user" {{animal}}
- Cloud Shell で、まだ正しいディレクトリにいることを確認します。
cd ~/codelab-genai
- 次のコマンドを実行して、新しいバージョンのアプリケーションをローカルの git リポジトリに commit します。
git add . git commit -m "add latest changes"
- 変更を GitHub に push します。
git push
- ビルドが完了したら、次のコマンドを実行して、デプロイされたアプリケーションにアクセスします。
echo -e "\n\nOnce the build finishes, visit your live application:\n \ "$( \ gcloud run services list | \ grep codelab-genai | \ awk '/URL/{print $2}' | \ head -1 \ )" \n\n"
ビルドが完了して変更が反映されるまでに数分かかることがあります。
すべてのリビジョンの履歴は、https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions で確認できます。
14. 完了
このラボでは、ウェブ アプリケーションを作成し、アプリケーションのソースコードが変更されたときにアプリケーションを自動的にデプロイするように Cloud Run を構成しました。その後、アプリケーションを変更して再デプロイしました。
このラボが気に入ったら、別のコーディング言語またはフレームワークでもう一度試してみてください。
学習を継続するためのオプションは次のとおりです。
- Genkit のドキュメント: スタートガイド
- Node.js アプリケーションにオブザーバビリティを追加する Codelab: JavaScript での生成 AI アプリケーションの実用的なオブザーバビリティ手法
- Next.js を使用してアプリケーションにフロントエンドを追加する Codelab: バージョン管理から Cloud Run に生成 AI Next.js ウェブアプリを自動的にデプロイする
- 関数呼び出しの使用方法を示す Codelab: Cloud Run で Gemini 関数呼び出しを使用する方法
- AI を使用して動画コンテンツを処理する Codelab: Cloud Run Jobs Video Intelligence API を使用して動画をシーンごとに処理する方法