生成 AI Angular ウェブ アプリケーションをバージョン管理から Cloud Run に自動的にデプロイする

1. 概要

初めてウェブ アプリケーションをデプロイするのは大変なことのように思えるかもしれませんが、最初のデプロイ後も、プロセスが負担が大きすぎる場合は、アプリケーションの新しいバージョンをデプロイしない可能性があります。継続的デプロイを使用すると、アプリケーションの変更を簡単に自動的にデプロイできます。

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

学習内容

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

• Vertex AI を使用して生成 AI をアプリケーションに追加する

2. 前提条件

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

3. プロジェクトの設定

1. Google Cloud コンソールにログインします。
2. Cloud コンソールで課金を有効にする。
   • このラボを完了しても、Cloud リソースの費用は 1 米ドル未満です。
   • このラボの最後にある手順に沿ってリソースを削除すると、それ以上の請求が発生しなくなります。
   • 新規ユーザーは、300 米ドル分の無料トライアルをご利用いただけます。
   • 生成 AI for Devs イベントに参加する予定ですか？1 米ドル分のクレジットが提供される場合があります。
3. 新しいプロジェクトを作成するか、既存のプロジェクトを再利用するかを選択します。
4. Cloud 課金システムの [マイ プロジェクト] で、課金が有効になっていることを確認します。
   • 新しいプロジェクトの 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 Angular アプリケーションを作成します。

   npx @angular/cli new codelab-genai \
       --minimal \
       --inline-template \
       --inline-style \
       --ssr \
       --defaults
   

3. @angular/cli のインストールを求めるメッセージが表示されたら、Enter を押して続行します。

   Need to install the following packages:
   @angular/cli@18.2.4
   Ok to proceed? (y)
   

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

   cd codelab-genai
   

5. Cloud Shell エディタで app.component.ts ファイルを開きます。

   cloudshell edit src/app/app.component.ts
   

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

   import { Component } from '@angular/core';
   import { RouterOutlet } from '@angular/router';
   
   @Component({
       selector: 'app-root',
       standalone: true,
       imports: [RouterOutlet],
       template: `
           <h1>Hello world!</h1>
   
           <router-outlet />
       `,
       styles: [],
   })
   export class AppComponent { }
   

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

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

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. 1 回限りのコード
   8. [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/src/app/app.component.ts \n\n"

10. 自動デプロイを設定する

1. Cloud Shell エディタのタブを開いたままにします。このタブについては後で説明します。
2. 新しいタブで Cloud Run ページにアクセスします。
3. コンソールで正しい Google Cloud プロジェクトを選択
4. [CONNECT REPO] をクリックします。
5. [Cloud Build の設定] をクリックします。
   1. [リポジトリ プロバイダ] で [GitHub] を選択します。
      • ブラウザで GitHub アカウントにログインしていない場合は、認証情報を使用してログインします。
   2. [認証]、[続行] の順にクリックします。
   3. ログインすると、Cloud Run ページに「GitHub アプリは、どのリポジトリにもインストールされていません。」というメッセージが表示されます。
   4. [INSTALL GOOGLE CLOUD BUILD] ボタンをクリックします。
      • [インストールの設定] ページで [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 の Buildpack を使用）] をクリックします。
      • 他のフィールド（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 コマンドをもう一度実行してみてください。

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

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

   cd ~/codelab-genai
   

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

   npm install @google-cloud/vertexai
   

4. Node.js Google Auth SDK をインストールします。

   npm install google-auth-library
   

5. Cloud Shell エディタで server.ts を再度開きます。

   cloudshell edit server.ts
   

6. server.ts ファイル内のコードを次のコードに置き換えます。

   // server.ts
   import { APP_BASE_HREF } from '@angular/common';
   import { CommonEngine } from '@angular/ssr';
   import express from 'express';
   import { fileURLToPath } from 'node:url';
   import { dirname, join, resolve } from 'node:path';
   import bootstrap from './src/main.server';
   
   import { VertexAI } from '@google-cloud/vertexai';
   import { GoogleAuth } from 'google-auth-library';
   
   
   // The Express app is exported so that it can be used by serverless Functions.
   export function app(): express.Express {
       const server = express();
       const serverDistFolder = dirname(fileURLToPath(import.meta.url));
       const browserDistFolder = resolve(serverDistFolder, '../browser');
       const indexHtml = join(serverDistFolder, 'index.server.html');
       const commonEngine = new CommonEngine();
   
       const auth = new GoogleAuth();
   
       server.set('view engine', 'html');
       server.set('views', browserDistFolder);
   
       // Example Express Rest API endpoints
       server.get('/api/facts', async (req, res) => {
           const project = await auth.getProjectId();
   
           const vertex = new VertexAI({ project: project });
           const generativeModel = vertex.getGenerativeModel({
               model: 'gemini-1.5-flash',
               generationConfig: { responseMimeType: 'application/json' }
           });
   
           const animal = req.query['animal'] || 'dog';
           const prompt = `Give me 10 fun facts about ${animal}. 
                           Return as json as an array in the format ['fact 1', 'fact 2']
                           Remove backticks and other markdown formatting.`;
   
           const resp = await generativeModel.generateContent(prompt);
           let factArray = '';
   
           if (resp.response.candidates) {
               factArray = JSON.parse(resp.response.candidates[0].content.parts[0].text || '');
           }
           res.send(factArray);
       });
   
       // Serve static files from /browser
       server.get('**', express.static(browserDistFolder, {
           maxAge: '1y',
           index: 'index.html',
       }));
   
       // All regular routes use the Angular engine
       server.get('**', (req, res, next) => {
           const { protocol, originalUrl, baseUrl, headers } = req;
   
           commonEngine
               .render({
                   bootstrap,
                   documentFilePath: indexHtml,
                   url: `${protocol}://${headers.host}${originalUrl}`,
                   publicPath: browserDistFolder,
                   providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
               })
               .then((html) => res.send(html))
               .catch((err) => next(err));
       });
   
       return server;
   }
   
   function run(): void {
       const port = process.env['PORT'] || 4000;
   
       // Start up the Node server
       const server = app();
       server.listen(port, () => {
           console.log(`Node Express server listening on http://localhost:${port}`);
       });
   }
   
   run();
   

7. Cloud Shell エディタで app.component.ts を開きます。

   cloudshell edit src/app/app.component.ts
   

8. app.components.ts ファイル内のコードを次のコードに置き換えます。

   // app.component.ts
   import { Component, signal } from '@angular/core';
   import { FormsModule } from '@angular/forms';
   import { RouterOutlet } from '@angular/router';
   
   @Component({
       selector: 'app-root',
       standalone: true,
       imports: [RouterOutlet, FormsModule],
       template: `
           <section>
               <input
                   type="text"
                   placeholder="dog"
                   [(ngModel)]="animal"
                   class="text-black border-2 p-2 m-2 rounded"
               />
               <button
                   (click)="getNewFunFacts()"
               >
                   Get New Fun Facts
               </button>
               <ol>
                   @for(fact of facts(); track fact) {
                       <li>{{fact}}</li>  
                   } @empty {
                       <li>No facts are available</li>
                   }
               </ol>
           </section>
       `,
       styles: '',
   })
   export class AppComponent {
       animal = '';
       facts = signal<string[]>([]);
   
       getNewFunFacts() {
           fetch(`/api/facts?animal=${this.animal}`).then(response => response.json()).then(facts => {
               this.facts.set(facts);
           });
       }
   }
   

12. 再デプロイ

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. （省略可）Vertex AI の使用状況を監査する

他の Google Cloud サービスと同様に、Vertex AI オペレーションを監査できます。監査ログは「誰が、いつ、どこで何をしたか」の確認に役立ちます。Vertex AI の管理監査ログはデフォルトで有効になっています。コンテンツを生成するためのリクエストを監査するには、データアクセス監査ログを有効にする必要があります。

データ監査ログを使用すると追加費用が発生する場合があります。

1. Google Cloud コンソールで、[監査ログ] ページに移動します。
   監査ログに移動
   検索バーを使用してこのページを検索する場合は、小見出しが [IAM と管理] である結果を選択します。
2. Cloud Run アプリケーションを作成する既存の Google Cloud プロジェクトであることを確認します。
3. [データアクセス監査ログの構成] テーブルで、[サービス] 列から Vertex AI API を選択します。
4. [ログタイプ] タブで、データアクセス監査ログの種類 Admin read と Data read を選択します。
5. [保存] をクリックします。

有効にすると、アプリケーションの呼び出しごとに監査ログを確認できます。呼び出しの詳細を含む監査ログを表示する手順は次のとおりです。

1. デプロイされたアプリケーションに戻り、ページを更新してログをトリガーします。
2. Google Cloud コンソールで、[ログ エクスプローラ] ページに移動します。
   ログ エクスプローラに移動
   
3. クエリ ウィンドウで、次のように入力します。

   LOG_ID("cloudaudit.googleapis.com%2Fdata_access")
   protoPayload.serviceName="aiplatform.googleapis.com"
   

4. [クエリを実行] をクリックします。

監査ログには Vertex AI API の使用状況がキャプチャされますが、プロンプトやレスポンスの詳細など、ワークロード関連のデータは確認できません。

14. （省略可）AI ワークロードのオブザーバビリティを向上させる

監査ログには、ワークロード関連の情報はキャプチャされません。ワークロードのオブザーバビリティを高めるには、この情報を明示的にロギングする必要があります。任意のロギング フレームワークを使用してこれを行うことができます。次の手順では、ネイティブの Node.js ロギング メカニズムを使用してこれを行う方法を示します。

1. Cloud Shell エディタで server.ts を再度開きます。

   cloudshell edit ~/codelab-genai/server.ts
   

2. await generativeModel.generateContent(prompt) の呼び出し（行 19）の後に、次の行を追加します。

   console.log(JSON.stringify({
       severity: 'DEBUG',
       message: 'Content is generated',
       prompt: prompt,
       response: resp.response,
   }));
   

   このコードは、生成されたコンテンツに関する情報を 構造化ロギング形式で stdout に書き込みます。Cloud Run の Logging エージェントは、stdout に出力された出力をキャプチャし、この形式を Cloud Logging に書き込みます。
3. Cloud Shell を再び開き、次のコマンドを入力して、正しいディレクトリにいることを確認します。

   cd ~/codelab-genai
   

4. 変更を commit します。

   git commit -am "observe generated content"
   

5. 変更を GitHub に push して、変更されたバージョンの再デプロイをトリガーします。

   git push
   

新しいバージョンがデプロイされると、Vertex AI への呼び出しに関するデバッグ情報を確認できます。

アプリケーション ログを表示する手順は次のとおりです。

1. Google Cloud コンソールで、[ログ エクスプローラ] ページに移動します。
   ログ エクスプローラに移動
   
2. クエリ ウィンドウで、次のように入力します。

   LOG_ID("run.googleapis.com%2Fstdout")
   severity=DEBUG
   

3. [クエリを実行] をクリックします。

クエリの結果には、安全対策のモニタリングに使用できる「安全性評価」を含むプロンプトと Vertex AI レスポンスを含むログが表示されます。

プロンプトをログに記録する際は注意してください。プロンプトには、観察対象ではない機密情報が含まれている可能性があります。この情報はマスキングするか、非表示にすることをおすすめします。詳しくは、DLP のドキュメントをご覧ください。

15. （省略可）クリーンアップ

サービスが使用されていない場合、Cloud Run の料金は発生しませんが、コンテナ イメージを Artifact Registry に保存すると課金される場合があります。Cloud プロジェクトを削除して、料金が発生しないようにすることができます。Cloud プロジェクトを削除すると、そのプロジェクト内で使用されているすべてのリソースに対する課金が停止します。

必要に応じて、プロジェクトを削除します。

gcloud projects delete $GOOGLE_CLOUD_PROJECT

cloudshell ディスクから不要なリソースを削除することもできます。次のことが可能です。

1. Codelab プロジェクト ディレクトリを削除します。

   rm -rf ~/codelab-genai
   

2. 警告: この操作は元に戻せません。Cloud Shell 上のすべてのファイルを削除して空き容量を確保する場合は、ホーム ディレクトリ全体を削除します。残しておきたいものはすべて別の場所に保存してください。

   sudo rm -rf $HOME
   

16. 完了

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

このラボが気に入ったら、別のコーディング言語またはフレームワークでもう一度試してみてください。

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

本日ご利用いただいたプロダクトの改善に役立つユーザー エクスペリエンス（UX）調査にご協力いただける場合は、こちらからご登録ください。

学習を継続するためのオプションは次のとおりです。

• ドキュメント: Firebase GenKit を柔軟なモデル抽象化として使用すると、任意のモデル API を簡単に統合し、コミュニティが管理するモデルを使用できます。
• Codelab: Gemini を搭載したチャットアプリを Cloud Run にデプロイする方法
• Cloud Run で Gemini 関数呼び出しを使用する方法
• Cloud Run Jobs Video Intelligence API を使用して動画をシーンごとに処理する方法
• オンデマンド ワークショップ: Google Kubernetes Engine オンボーディング