バージョン管理から Cloud Run に Generative AI Node.js Genkit ウェブアプリケーションを自動的にデプロイする

1. 概要

初めてウェブ アプリケーションをデプロイするのは、気が重いかもしれません。最初のデプロイ後も、プロセスが複雑すぎると、アプリケーションの新しいバージョンのデプロイを避ける可能性があります。継続的デプロイを使用すると、アプリケーションの変更を簡単に自動的にデプロイできます。

このラボでは、ウェブ アプリケーションを作成し、アプリケーションのソースコードが変更されたときにアプリケーションを自動的にデプロイするように Cloud Run を構成します。その後、アプリケーションを変更して再度デプロイします。

学習内容

• Cloud Shell エディタでウェブ アプリケーションを作成する
• GitHub にアプリケーション コードを保存する
• アプリケーションを Cloud Run に自動的にデプロイする

• Genkit を使用して生成 AI をアプリケーションに追加する
• dotprompt ライブラリを使用して LLM プロンプトを管理する

2. 前提条件

1. Google アカウントをまだお持ちでない場合は、Google アカウントを作成する必要があります。
   • 仕事用または学校用アカウントではなく、個人アカウントを使用します。職場用アカウントと学校用アカウントには、このラボに必要な API を有効にできないようにする制限が設定されている場合があります。
2. GitHub アカウントをお持ちでない場合は、GitHub アカウントを作成する必要があります。
   • GitHub アカウントをお持ちの場合は、そのアカウントを使用してください。GitHub では、新しいアカウントが迷惑メールとしてブロックされることがよくあります。
   • GitHub アカウントで 2 要素認証を構成して、アカウントがスパムとしてマークされる可能性を減らしてください。

3. プロジェクトの設定

1. Google Cloud コンソールにログインします。
2. Cloud コンソールで課金を有効にします。
   • このラボを完了するのにかかる Cloud リソースの費用は 1 米ドル未満です。
   • このラボの最後の手順に沿ってリソースを削除すると、それ以上の料金は発生しません。
   • 新規ユーザーは、300 米ドル分の無料トライアルをご利用いただけます。
   • Gen AI for Devs イベントに参加しますか？1 米ドル相当のクレジットを利用できる場合があります。
3. 新しいプロジェクトを作成するか、既存のプロジェクトを再利用します。
4. Cloud Billing の [マイ プロジェクト] で課金が有効になっていることを確認します。
   • 新しいプロジェクトの Billing account 列に Billing is disabled と表示されている場合:
     1. Actions 列のその他アイコンをクリックします。
     2. [お支払い情報を変更] をクリックします。
     3. 使用する請求先アカウントを選択します
   • Gen AI for Devs イベントに参加している場合は、アカウントの名前が Google Cloud Platform Trial Billing Account になっている可能性があります。

4. Cloud Shell エディタを開く

1. Cloud Shell エディタに移動します。
2. ターミナルが画面の下部に表示されない場合は、開きます。
   • ハンバーガー メニュー をクリックします。
   • [Terminal] をクリックします。
   • [New Terminal] をクリックします。
3. ターミナルで、次のコマンドを使用してプロジェクトを設定します。
   • 形式:

     gcloud config set project [PROJECT_ID]
     

   • 例:

     gcloud config set project lab-project-id-example
     

   • プロジェクト ID を忘れた場合:
     • 次のコマンドを使用すると、すべてのプロジェクト ID を一覧表示できます。

       gcloud projects list | awk '/PROJECT_ID/{print $2}'
       

     
4. 承認を求められたら、[承認] をクリックして続行します。
5. 次のようなメッセージが表示されます。

   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 を構成する

1. グローバル Git ユーザーのメールを設定します。

   git config --global user.email "[e-mail]"
   

2. グローバル Git ユーザー名を設定します。

   git config --global user.name "Your Name"
   

3. グローバル Git のデフォルト ブランチを main に設定します。

   git config --global init.defaultBranch main
   

7. コードを記述する

Node.js でアプリケーションを作成するには:

1. ホーム ディレクトリに移動します。

   cd ~
   

2. codelab-genai ディレクトリを作成します。

   mkdir codelab-genai
   

3. codelab-genai ディレクトリに移動します。

   cd codelab-genai
   

4. index.js ファイルを作成します。

   touch index.js
   

5. package.json ファイルを作成します。

   npm init es6 -y
   

6. express を依存関係として追加する

   npm install express
   

7. node_modules のコミットを防ぐため .gitignore ファイルを追加

   echo node_modules/ >> .gitignore
   

8. Cloud Shell エディタで index.js ファイルを開きます。

   cloudshell edit index.js
   

   画面の上部に空のファイルが表示されます。この index.js ファイルを編集できます。
9. 次のコードをコピーして、開いた index.js ファイルに貼り付けます。

   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}`);
   });
   

   数秒後に、Cloud Shell エディタがコードを自動的に保存します。このコードは、「Hello world!」という応答メッセージで HTTP リクエストに応答します。

アプリケーションの初期コードが完成し、バージョン管理に保存できるようになりました。

8. リポジトリを作成する

1. 画面下部の Cloud Shell ターミナルに戻ります。
2. 正しいディレクトリにいることを確認します。

   cd ~/codelab-genai
   

3. Git リポジトリを初期化する

   git init -b main
   

4. GitHub CLI にログインします

   gh auth login
   

   Enter を押してデフォルトのオプションを承認し、GitHub CLI ツールに表示される手順に沿って操作します。手順には次のものがあります。
   1. ログインするアカウントを選択してください。 GitHub.com
   2. このホストでの Git オペレーションに使用するプロトコルは何ですか？ HTTPS
   3. GitHub 認証情報を使用して Git を認証しますか？Y（表示されない場合はスキップします）。
   4. GitHub CLI の認証方法を選択してください。 Login with a web browser
   5. ワンタイム コードをコピーする
   6. https://github.com/login/device を開きます。
   7. ワンタイム コードを貼り付ける
   8. [Authorize github] をクリックします。
   9. ログインを完了する
5. ログインしていることを確認します。

   gh api user -q ".login"
   

   正常にログインできていると、GitHub ユーザー名が表示されます。
6. GITHUB_USERNAME 変数を作成する

   GITHUB_USERNAME=$(gh api user -q ".login")
   

7. 環境変数が作成されたことを確認します。

   echo ${GITHUB_USERNAME}
   

   変数が正常に作成されていると、GitHub ユーザー名が表示されます。
8. codelab-genai という名前の空の GitHub リポジトリを作成します。

   gh repo create codelab-genai --private
   

   次のエラーが表示された場合:

   GraphQL: Name already exists on this account (createRepository)
   

   この場合、codelab-genai という名前のリポジトリはすでに存在します。このチュートリアルを続行するには、次の 2 つの方法があります。
   • 既存の GitHub リポジトリを削除する
   • 別の名前でリポジトリを作成し、次のコマンドで変更してください。
9. codelab-genai リポジトリをリモート origin として追加します。

   git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai
   

9. コードを共有する

1. 正しいディレクトリにいることを確認します。

   cd ~/codelab-genai
   

2. 現在のディレクトリ内のすべてのファイルをこの commit に追加します。

   git add .
   

3. 最初の commit を作成します。

   git commit -m "add http server"
   

4. 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. 自動デプロイを設定する

1. Cloud Shell エディタのタブは開いたままにします。このタブには後で戻ります。
2. 新しいタブで、Cloud Run ページにアクセスします。
3. コンソール で正しい Google Cloud プロジェクトを選択します。
4. [リポジトリを接続] をクリックします。
5. [Cloud Build の設定] をクリックします。
   1. [リポジトリ プロバイダ] で [GitHub] を選択します。
      • ブラウザで GitHub アカウントにログインしていない場合は、認証情報を使用してログインします。
   2. [認証]、[続行] の順にクリックします。
   3. ログインすると、Cloud Run ページに「GitHub アプリは、どのリポジトリにもインストールされていません。」というメッセージが表示されます。
   4. [Google Cloud Build をインストール] ボタンをクリックします。
      • [Installation Setup] ページで、[Only select repositories] を選択し、CLI で作成した codelab-genai リポジトリを選択します。
      • [インストール] をクリックします。
      • 注: GitHub リポジトリが多い場合、読み込みに数分かかることがあります。
   5. [リポジトリ] として your-user-name/codelab-genai を選択します。
      • リポジトリが表示されない場合は、[接続されたリポジトリを管理します] リンクをクリックします。
   6. [ブランチ] は ^main$ のままにします。
   7. [Go、Node.js、Python、Java、.NET Core、Ruby、PHP（Google Cloud の Buildpacks を使用）] をクリックします。
      • 他のフィールド（Build context directory、Entrypoint、Function target）はそのままにします。
   8. [保存] をクリックします。
6. [認証] まで下にスクロールします。
7. [未認証の呼び出しを許可する] をクリックします。
8. [作成] をクリックします。

ビルドが完了したら（数分かかります）、次のコマンドを実行し、結果の 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 エディタがまだ開いている場合は、これらの手順をスキップできます。

1. Cloud Shell エディタに移動します。
2. ターミナルが画面の下部に表示されない場合は、開きます。
   • ハンバーガー メニュー をクリックします。
   • [Terminal] をクリックします。
   • [New Terminal] をクリックします。
3. ターミナルで、次のコマンドを使用してプロジェクトを設定します。
   • 形式:

     gcloud config set project [PROJECT_ID]
     

   • 例:

     gcloud config set project lab-project-id-example
     

   • プロジェクト ID を忘れた場合:
     • 次のコマンドを使用すると、すべてのプロジェクト ID を一覧表示できます。

       gcloud projects list | awk '/PROJECT_ID/{print $2}'
       

     
4. 承認を求められたら、[承認] をクリックして続行します。
5. 次のようなメッセージが表示されます。

   Updated property [core/project].
   

   WARNING が表示され、Do you want to continue (Y/N)? と表示された場合は、プロジェクト ID が正しく入力されていない可能性があります。N を押して Enter を押し、gcloud config set project コマンドを再実行します。

アプリケーションに Genkit と Vertex AI を追加する

1. 画面下部の Cloud Shell ターミナルに戻ります。
2. 正しいディレクトリにいることを確認します。

   cd ~/codelab-genai
   

3. Node.js Genkit SDK をインストールします。

   npm install @genkit-ai/ai
   

4. Vertex AI 用の Node.js Genkit SDK をインストールします。

   npm install @genkit-ai/vertexai
   

5. Cloud Shell エディタで index.js を再度開く

   cloudshell edit ~/codelab-genai/index.js
   

6. 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}`);
   });
   

1. Cloud Shell で正しいディレクトリにいることを確認します。

   cd ~/codelab-genai
   

2. 次のコマンドを実行して、アプリケーションの新しいバージョンをローカルの git リポジトリに commit します。

   git add .
   git commit -m "add latest changes"
   

3. 変更を GitHub に push します。

   git push
   

4. ビルドが完了したら、次のコマンドを実行して、デプロイされたアプリケーションにアクセスします。

   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 ファイルを使用する

1. 画面下部の Cloud Shell ターミナルに戻ります。
2. 正しいディレクトリにいることを確認します。

   cd ~/codelab-genai
   

3. プロンプトを保存する prompts フォルダを作成します。

   mkdir prompts
   

4. animal-facts.prompt ファイルを作成して、最初のプロンプトを作成します。

   touch prompts/animal-facts.prompt
   

5. Cloud Shell エディタで animal-facts.prompt ファイルを開きます。

   cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
   

6. 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.
   

7. Cloud Shell エディタで index.js ファイルを開きます。

   cloudshell edit ~/codelab-genai/index.js
   

8. 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}`);
   });
   

1. Cloud Shell で正しいディレクトリにいることを確認します。

   cd ~/codelab-genai
   

2. 次のコマンドを実行して、アプリケーションの新しいバージョンをローカルの git リポジトリに commit します。

   git add .
   git commit -m "add latest changes"
   

3. 変更を GitHub に push します。

   git push
   

4. ビルドが完了したら、次のコマンドを実行して、デプロイされたアプリケーションにアクセスします。

   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 ファイルを追加済みであることを前提としています。

1. 画面下部の Cloud Shell ターミナルに戻ります。
2. 正しいディレクトリにいることを確認します。

   cd ~/codelab-genai
   

3. Cloud Shell エディタで animal-facts.prompt ファイルを開きます。

   cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
   

4. 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}}
   

1. Cloud Shell で正しいディレクトリにいることを確認します。

   cd ~/codelab-genai
   

2. 次のコマンドを実行して、アプリケーションの新しいバージョンをローカルの git リポジトリに commit します。

   git add .
   git commit -m "add latest changes"
   

3. 変更を GitHub に push します。

   git push
   

4. ビルドが完了したら、次のコマンドを実行して、デプロイされたアプリケーションにアクセスします。

   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 を構成しました。その後、アプリケーションを変更して再度デプロイしました。

このラボが気に入った場合は、別のコーディング言語またはフレームワークで再度お試しください。

• Python
• Node.js
• Go
• Java
• Angular
• Next.js

学習を継続するためのオプションをいくつかご紹介します。

• 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 を使用して動画をシーンごとに処理する方法