このページは Cloud Translation API によって翻訳されました。

Firebase Genkit を使用して、データを活用する生成 AI 機能を構築する

1. 始める前に

この Codelab では、Firebase Genkit を使用して生成 AI をアプリに統合する方法を学びます。Firebase Genkit は、プロダクションレディな AI 搭載アプリを構築、デプロイ、モニタリングするオープンソースフレームワークです。

Genkit は、アプリデベロッパー向けに設計されており、使い慣れたパターンとパラダイムを使用して、強力な AI 機能をアプリに簡単に統合できます。Firebase チームが、世界中の何百万人ものデベロッパーが使用しているツールの構築で培った経験を活かして開発しました。

前提条件

Firestore、Node.js、TypeScript に精通している。

学習内容

Firestore の高度なベクトル類似性検索機能を使用して、よりスマートなアプリを作成する方法。
Firebase Genkit を使用して、アプリに生成 AI を実装する方法。
ソリューションをデプロイと統合の準備にします。

必要なもの

任意のブラウザ（Google Chrome など）
コードエディタとターミナルを備えた開発環境
Firebase プロジェクトの作成と管理に使用する Google アカウント

2. 使用されているウェブアプリとクラウドサービスを確認します。

このセクションでは、この Codelab で作成するウェブアプリを確認します。また、使用するクラウドサービスについても説明します。

ウェブアプリ

この Codelab では、Compass というアプリのコードベースを操作します。Compass は、ユーザーが旅行先を選び、旅行先のアクティビティを閲覧し、旅行の旅行プランを作成できるアプリです。

この Codelab では、アプリのホームページでのユーザーエンゲージメントを高めるための 2 つの新機能を実装します。どちらの機能も生成 AI を活用しています。

アプリでは現在、デスティネーションの静的なリストが表示されます。動的に変更します。
自動入力された旅行プランを実装して、ユーザーの滞在時間を長くします。

使用するサービス

この Codelab では、Firebase と Cloud の多くのサービスと機能を使用します。それらのスターターコードのほとんどは用意されています。次の表に、使用するサービスとその理由を示します。

Service	使用の理由
Firebase Genkit	Genkit を使用すると、生成 AI を Node.js / Next.js アプリケーションに導入できます。
Cloud Firestore	データを Cloud Firestore に保存し、ベクトル類似性検索に使用します。
Google Cloud の Vertex AI	Vertex AI の基盤モデル（Gemini など）を使用して AI 機能を強化します。
Firebase App Hosting	必要に応じて、新しい Firebase App Hosting を使用して、動的 Next.js ウェブアプリ（GitHub リポジトリに接続）を提供できます。

3. 開発環境を設定する

Node.js バージョンを確認する

ターミナルで、Node.js バージョン 20.0.0 以降がインストールされていることを確認します。
```
node -v
```
Node.js バージョン 20.0.0 以降がインストールされていない場合は、最新の LTS バージョンをダウンロードしてインストールします。

Codelab のソースコードを取得する

GitHub アカウントをお持ちの場合:

github.com/FirebaseExtended/codelab-ai-genkit-rag のテンプレートを使用して、新しいリポジトリを作成します。
作成した Codelab の GitHub リポジトリのローカルクローンを作成します。
```
git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
```

git がインストールされていない場合、または新しいリポジトリを作成しない場合:

GitHub リポジトリを ZIP ファイルとしてダウンロードします。

フォルダ構造を確認する

ローカルマシンで、クローンを作成したリポジトリを見つけて、フォルダ構造を確認します。

フォルダ	説明
`load-firestore-data`	Firestore コレクションにすばやく事前入力するためのヘルパーコマンドラインツール
*その他	Next.js ウェブアプリのコード

ルートフォルダには、簡素化された手順でウェブアプリを実行するためのクイックスタートを提供する README.md ファイルが含まれています。初めて学習する場合は、この Codelab を完了することをおすすめします。この Codelab には、最も包括的な手順が含まれています。

この Codelab の手順に沿ってコードを正しく適用したかどうか不明な場合は、end git ブランチで解答コードを確認できます。

Firebase CLI をインストールする

Firebase CLI がインストールされており、バージョンが 13.6 以降であることを確認します。
```
firebase --version
```
Firebase CLI がインストールされているがバージョン 13.6 以降でない場合は、更新します。
```
npm update -g firebase-tools
```
Firebase CLI がインストールされていない場合は、インストールします。
```
npm install -g firebase-tools
```

権限エラーが原因で Firebase CLI を更新またはインストールできない場合は、npm のドキュメントをご覧ください。または、別のインストールオプションを使用してください。

Firebase にログインする

ターミナルで Firebase にログインします。
```
firebase login
```
ターミナルに Firebase にすでにログインしているというメッセージが表示された場合は、この Codelab のFirebase プロジェクトを設定するセクションに進んでください。
ターミナルで、Firebase にデータを収集させるかどうかに応じて、Y または N を入力します。（この Codelab ではどちらのオプションでも使用できます）。
ブラウザで Google アカウントを選択し、[許可] をクリックします。

Google Cloud の gcloud CLI をインストールする

gcloud CLI をインストールします。
ターミナルで Google Cloud にログインします。
```
gcloud auth login
```

4. Firebase プロジェクトを設定する

このセクションでは、Firebase プロジェクトを設定し、Firebase ウェブアプリを登録します。また、この Codelab の後半では、サンプルウェブアプリで使用されるいくつかのサービスを有効にします。

このセクションの手順はすべて Firebase コンソールで行います。

Firebase プロジェクトを作成する

前の手順で使用したのと同じ Google アカウントを使用して Firebase コンソールにログインします。
[プロジェクトを作成] をクリックし、プロジェクト名（Compass Codelab など）を入力します。
Firebase プロジェクトに自動的に割り当てられたプロジェクト ID を覚えておいてください（または、編集アイコンをクリックして、お好みのプロジェクト ID を設定してください）。この ID は、Firebase CLI で Firebase プロジェクトを識別するために後で必要になります。ID を忘れた場合は、[プロジェクトの設定] でいつでも確認できます。
[続行] をクリックします。
Firebase の利用規約が表示されたら、内容を読み、同意し、[続行] をクリックします。
この Codelab では Google アナリティクスは不要であるため、Google アナリティクスのオプションをオフに切り替えます。
[プロジェクトを作成] をクリックし、プロジェクトがプロビジョニングされるのを待ってから、[続行] をクリックします。

Firebase プロジェクトにウェブアプリを追加する

Firebase プロジェクトの [プロジェクトの概要] 画面に移動し、 [ウェブ] をクリックします。
[アプリのニックネーム] テキストボックスに、覚えやすいアプリのニックネーム（My Compass Codelab App など）を入力します。Firebase Hosting の設定チェックボックスはオフのままにします。この Codelab の最後のステップで、必要に応じてホスティングサービスを設定します。
[アプリを登録 > コンソールに進む] をクリックします。

これで、これで、新しい Firebase プロジェクトにウェブアプリが登録されました。

Firebase の料金プランをアップグレードする

Firebase Genkit と Vertex AI（およびそれらの基盤となるクラウドサービス）を使用するには、Firebase プロジェクトが従量課金制（Blaze）のお支払いプランに含まれている必要があります。つまり、Cloud 請求先アカウントにリンクされている必要があります。

Cloud 請求先アカウントには、クレジットカードなどのお支払い方法が必要です。
Firebase と Google Cloud を初めて使用する場合は、$300 のクレジットと無料トライアル用 Cloud 請求先アカウントを利用できるかどうかご確認ください。
この Codelab をイベントの一環として実施する場合は、利用可能な Cloud クレジットがあるかどうかを主催者に確認してください。

Vertex AI の料金の詳細を確認する。

プロジェクトを Blaze プランにアップグレードする手順は次のとおりです。

Firebase コンソールで、プランをアップグレードを選択します。
Blaze プランを選択します。画面上の手順に沿って、Cloud 請求先アカウントをプロジェクトにリンクします。
このアップグレードの一環として Cloud 請求先アカウントを作成する必要があった場合は、Firebase コンソールのアップグレードフローに移動してアップグレードを完了する必要があります。

Cloud Firestore を設定する

Firebase コンソールの左側のパネルで [ビルド] を展開し、[Firestore データベース] を選択します。
[データベースを作成] をクリックします。
[データベース ID] は (default) に設定したままにします。
データベースのロケーションを選択し、[次へ] をクリックします。
実際のアプリの場合は、ユーザーに近いロケーションを選択します。
[テストモードで開始] をクリックします。セキュリティルールに関する免責条項を確認します。
データベースのセキュリティルールを追加せずに、アプリを配布または公開しないでください。
[作成] をクリックします。

Vertex AI を有効にする

gcloud CLI を使用して Vertex AI を設定します。このページのすべてのコマンドでは、YOUR_PROJECT_ID を Firebase プロジェクトの ID に置き換えてください。

ターミナルで、Google Cloud SDK のデフォルトプロジェクトを設定します。
```
gcloud config set project YOUR_PROJECT_ID
```
「WARNING: Your active project does not match the quota project in your local Application Default Credentials file. 予期しない割り当ての問題が発生する可能性があります。」というメッセージが表示された場合は、次のコマンドを実行して割り当てプロジェクトを設定します。
```
gcloud auth application-default set-quota-project YOUR_PROJECT_ID
```
プロジェクトで Vertex AI サービスを有効にします。
```
gcloud services enable aiplatform.googleapis.com
```

5. ウェブアプリを設定する

ウェブアプリを実行するには、ターミナルでコマンドを実行し、コードエディタでコードを追加する必要があります。このページのすべてのコマンドでは、YOUR_PROJECT_ID を Firebase プロジェクトの ID に置き換えてください。

プロジェクトをターゲットとする Firebase CLI を構成する

ターミナルで、Codelab プロジェクトのルートディレクトリに移動します。
Firebase CLI で Firebase プロジェクトに対してすべてのコマンドを実行するには、次のコマンドを実行します。
```
firebase use YOUR_PROJECT_ID
```

サンプルデータを Firestore に読み込む

すぐに使用を開始できるように、この Codelab では Firestore 用に事前生成されたサンプルデータが用意されています。

ローカルコードベースで通常はサービスアカウントを使用するコードを実行できるようにするには、ターミナルで次のコマンドを実行します。
```
gcloud auth application-default login
```
ブラウザで新しいタブが開きます。前の手順で使用したのと同じ Google アカウントでログインします。
Firestore のサンプルデータをインポートするには、次のコマンドを実行します。
```
cd load-firestore-data
npm ci
node index.js YOUR_PROJECT_ID
cd ..
```
Firebase コンソールで Firebase プロジェクトの [Firestore] セクションに移動して、データがデータベースに正常に追加されたことを確認します。インポートされたデータスキーマとその内容が表示されます。

ウェブアプリを Firebase プロジェクトに接続する

データベースなどのサービスを利用できるようにするには、ウェブアプリのコードを正しい Firebase プロジェクトに関連付ける必要があります。そのためには、Firebase 構成をアプリのコードベースに追加する必要があります。この構成には、プロジェクト ID、アプリの API キー、アプリ ID などの必須の値と、アプリが Firebase とやり取りできるようにするその他の値が含まれます。

アプリの Firebase 構成を取得します。
1. Firebase コンソールで、Firebase プロジェクトに移動します。
2. 左側のパネルで [プロジェクトの概要] の横にある歯車アイコンをクリックし、[プロジェクトの設定] を選択します。
3. [アプリ] カードでウェブアプリを選択します。
4. [SDK の設定と構成] で [Config] オプションを選択します。
5. スニペットをコピーします。const firebaseConfig ... で始まります。
Firebase 構成をウェブアプリのコードベースに追加します。
1. コードエディタで src/lib/genkit/genkit.config.ts ファイルを開きます。
2. 該当するセクションを、コピーしたコードに置き換えます。
3. ファイルを保存します。

ブラウザでウェブアプリをプレビューする

ターミナルで依存関係をインストールし、ウェブアプリを実行します。
```
npm install
npm run dev:next
```
ブラウザでローカルにホストされている Hosting URL に移動して、ウェブアプリを表示します。たとえば、ほとんどの場合、URL は http://localhost:3000/ などです。

コンパスアプリのホーム画面

Compass は、React Server Components を使用する Next.js アプリです。これはホームページです。

[夢の旅を探す] をクリックします。現在、一部の固定デスティネーションのハードコードされたデータが表示されています。

夢の旅を探す画面

ぜひお試しください。続行する準備ができたら、右上にあるホームボタンをクリックします。

6. Genkit で生成 AI を学ぶ

これで、アプリケーションで生成 AI のパワーを活用する準備が整いました。この Codelab のセクションでは、ユーザーが提供するインスピレーションに基づいて目的地を提案する機能を実装します。生成モデルのプロバイダとして Firebase Genkit と Google Cloud の Vertex AI を使用します（Gemini を使用します）。

Genkit は、トレース状態とフロー状態を保存できます（これにより、Genkit フローの実行結果を検査できます）。この Codelab では、Firestore を使用してこれらのトレースを保存します。

この Codelab の最後のステップとして、Genkit アプリを Firebase App Hosting にデプロイします。

Genkit アプリを Firebase プロジェクトに接続する

前の手順で src/lib/genkit/genkit.config.ts を編集して、Genkit をプロジェクトに接続しました。

Genkit デベロッパー UI を起動する

Genkit には、LLM、Genkit フロー、リトリーバー、その他の AI コンポーネントを操作できるウェブベースの UI が用意されています。

ターミナルで次のコマンドを実行します。

npm run dev:genkit

ブラウザで、ローカルにホストされている Genkit の URL に移動します。ほとんどの場合、http://localhost:4000/ です。

Gemini を操作する

これで、Genkit のデベロッパー UI を使用して、サポートされているモデルや、プロンプト、リトリバ、Genkit フローなどの他の AI コンポーネントを操作できるようになりました。

たとえば、Gemini に休暇をおすすめしてもらいましょう。システム指示を使用して、特定のニーズに基づいてモデルの動作を制御する方法を確認します。これは、システム指示をネイティブにサポートしていないモデルにも適用されます。

Genkit デベロッパー UI で Gemini モデルを操作する

メッセージを管理する

Firebase Genkit には、生成 AI プロンプトの作成と管理を効率化するように設計されたプラグインとテキスト形式である Dotprompt が導入されています。Dotprompt の基本的な考え方は、プロンプトをコードとして扱うことです。これにより、アプリケーションコードとともにプロンプトを作成、維持、バージョン管理できます。

Dotprompt を使用するには、まず hello-world を作成します。

コードエディタで prompts/1-hello-world.prompt ファイルを開きます。
Genkit デベロッパー UI で prompts/1-hello-world を開きます。
使い慣れた言語名またはコードを使用するか、空の文字列のままにします。
[実行] をクリックします。
いくつかの値を試してみてください。大規模言語モデルは、このような簡単なクエリで省略形、スペルミス、不完全なプロンプトを理解するのに適しています。

構造化データを使用して出力を拡充する

Genkit では、単なるテキストの生成だけでなく、出力を構造化して、アプリの UI 内での表示と統合を強化できます。スキーマを定義することで、目的の形式に沿った構造化データを生成するよう LLM に指示できます。

出力スキーマの確認

LLM 呼び出しの出力スキーマを指定することもできます。

コードエディタでプロンプトファイルを調べます。
1. prompts/2-simple-itinerary.prompt ファイルを開きます。
2. 定義された入力スキーマと出力スキーマを確認します。
UI を操作する:
1. Genkit デベロッパー UI で、[prompts/2-simple-itinerary] セクションに移動します。
2. place フィールドと interests フィールドにサンプルデータを入力して入力します。
```
{
    "interests": [
        "Museums"
    ],
    "place": "Paris"
}
```
3. [実行] をクリックします。

Dotprompt を使用して出力スキーマを指定する

スキーマドリブン出力の理解

生成された出力が定義されたスキーマに準拠していることに注意してください。目的の構造を指定して、簡単に解析してアプリケーションに統合できるデータを生成するように LLM に指示しました。Genkit は、出力をスキーマと照合して自動的に検証し、データの整合性を確保します。

また、出力がスキーマと一致しない場合、出力の再試行または修復を試行するように Genkit を構成できます。

出力スキーマの主なメリット

統合の簡素化: 構造化データをアプリの UI 要素に簡単に組み込むことができます。
データの検証: 生成された出力の精度と一貫性を確保します。
エラー処理: スキーマの不一致に対処するメカニズムを実装します。

出力スキーマを活用すると、Genkit の利便性が向上し、より豊かでダイナミックなユーザーエクスペリエンスを実現するために、カスタマイズされた構造化データを作成できます。

マルチモーダル入力を活用する

ユーザーが魅力的だと感じた画像に基づいて、カスタマイズされた休暇先をアプリが提案するとします。Genkit とマルチモーダル生成モデルを組み合わせることで、このビジョンを実現できます。

コードエディタでプロンプトファイルを調べます。
1. prompts/imgDescription.prompt ファイルを開きます。
2. {{media url=this}} が含まれていることに注目してください。これは、画像をプロンプトに簡単に組み込むことができる Handlebars 構文要素です。
UI を操作する:
1. Genkit デベロッパー UI で、prompts/imgDescription プロンプトを開きます。
2. 画像の URL を貼り付けて、imageUrls フィールドに画像の URL を入力します。たとえば、エッフェル塔を写したウィキペディアのサムネイル画像を使用できます。
```
{
    "imageUrls": [
        "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
    ]
}
```
3. [実行] をクリックします。

7. ベクトル類似性検索による取得を実装する

AI モデルを使用してクリエイティブなコンテンツを生成することは素晴らしいことですが、実用的なアプリケーションでは、出力を特定のコンテキストに根ざしたものにする必要があります。

この Codelab では、目的地（場所とアクティビティ）のデータベースがあり、Gemini モデルによって生成された候補が、このデータベース内のエントリのみを参照するようにします。

非構造化クエリと関連コンテンツのギャップを埋めるには、生成されたエンベディングに対するベクトル類似性検索の威力を利用します。

エンベディングとベクトルの類似性

ベクトル: ベクトルはデータポイントの数値表現であり、テキストや画像などの複雑な情報をモデル化するためによく使用されます。ベクトルの各ディメンションは、データの特定の特徴に対応しています。
エンベディングモデル: これらの特殊な AI モデルは、テキストなどの入力データを高次元ベクトルに変換します。興味深いのは、類似した入力が、この高次元空間内で互いに近いベクトルにマッピングされることです。
ベクトル類似性検索: この手法では、エンベディングベクトルの近接性を利用して、関連するデータポイントを特定します。入力クエリに基づいて、エンベディングベクトルが類似し、意味的な関連性を示しているエントリをデータベース内で検索します。

復元プロセスの仕組み

クエリのエンベディング: ユーザーの入力（「パリのロマンチックなディナー」など）がエンベディングモデルに渡され、クエリベクトルが生成されます。
データベースエンベディング: 理想的には、リンク先のデータベースを前処理して、エントリごとにエンベディングベクトルを作成します。
類似度計算: 類似度指標（コサイン類似度など）を使用して、クエリベクトルとデータベース内の各エンベディングベクトルが比較されます。
取得: クエリベクトルとの近接度に基づいて、データベースから最も類似したエントリが関連する候補として取得されます。

この取得メカニズムをアプリケーションに組み込むことで、Gemini モデルを活用して、創造的であるだけでなく、特定のデータセットにしっかりと根付いた候補を生成できます。このアプローチにより、生成された出力はコンテキストに沿って関連性を保ち、データベースで利用可能な情報と整合するようになります。

Firestore でベクトル類似性検索を有効にする

この Codelab の前のステップでは、Firestore データベースにサンプルの場所とアクティビティを入力しました。各場所エントリには、注目すべき属性を説明する knownFor テキストフィールドと、この説明のベクトル表現を含む対応する embedding フィールドが含まれています。

これらのエンベディングでベクトル類似性検索の機能を活用するには、Firestore インデックスを作成する必要があります。このインデックスを使用すると、エンベディングベクトルと指定されたクエリの類似性に基づいて、場所を効率的に取得できます。

ターミナルで次のコマンドを実行して、最新の アルファ版コンポーネントをインストールします。バージョン 2024.05.03 以降が必要です。
```
gcloud components install alpha
```

インデックスを作成します。YOUR_PROJECT_ID はプロジェクトの ID に置き換えてください。

gcloud firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config field-path=embedding,vector-config='{"dimension":"768","flat": "{}"}'

Genkit デベロッパー UI で retrievers/placesRetriever を開きます。
[実行] をクリックします。プレースホルダテキストを含むスキャフォールディングされたオブジェクトを調べ、取得ロジックを実装する場所を確認します。
コードエディタで src/lib/genkit/placesRetriever.ts ファイルを開きます。

一番下にスクロールし、プレースホルダ placesRetriever を次のように置き換えます。

export const placesRetriever = defineFirestoreRetriever({
  name: 'placesRetriever',
  firestore,
  collection: 'places',
  contentField: 'knownFor',
  vectorField: 'embedding',
  embedder: textEmbeddingGecko,
  distanceMeasure: 'COSINE',
});

取得ツールをテストする

Genkit デベロッパー UI で、retrievers/placesRetriever 取得ツールを開きます。

次のクエリを指定します。

{
    "content": [
        {
            "text": "UNESCO"
        }
    ]
}

オプションを指定することもできます。たとえば、取得ツールが返すドキュメントの数を指定するには、次の操作を行います。
```
{
    "limit": 4
}
```
[実行] をクリックします。

類似性以外のデータに対して追加のフィルタリングを行うには、[オプション] に where 句を追加します。

8. Genkit を使用した検索拡張生成（RAG）

前のセクションでは、テキスト、JSON、画像を処理し、ユーザー向けの魅力的なコンテンツ（旅行先など）を生成する個別のプロンプトを作成しました。また、Firestore データベースから関連するデスティネーションを取得するプロンプトも実装しました。次に、これらのコンポーネントをオーケストレートして、一貫性のある検索拡張生成（RAG）フローを作成します。

このセクションでは、フローという重要な Genkit のコンセプトについて説明します。フローは、厳密な型付けが施されたストリーミング可能な関数で、ローカルとリモートの両方で呼び出し可能で、完全なオブザーバビリティを備えています。フローの管理と呼び出しは、Genkit の CLI と Genkit デベロッパー UI の両方から行うことができます。

コードエディタで、旅行プランのプロンプトを確認します。
1. prompts/itineraryGen.prompt ファイルを開きます。
2. プロンプトが拡張され、追加の入力（特に、取得ツールから取得したアクティビティ データ）を受け付けるようになっています。
Genkit デベロッパー UI で、src/lib/genkit/itineraryFlow.ts ファイル内の Genkit フローを表示します。
ヒント: デバッグを効率化するには、長いフローを管理しやすい小さなステップに分割することを検討してください。
「画像の説明」ステップを統合してフローを強化します。
1. TODO: 2 コメント（81 行目付近）を見つけます。フロー強化の対象となる部分です。
2. 空の imgDescription プレースホルダは、imgDescription プロンプト呼び出しによって生成された出力に置き換えます。
フローをテストします。
1. flows/itineraryFlow に移動します。
2. 次の入力を使用して、新しく追加したステップで itineraryFlow が正常に実行されることをテストします。
```
{
    "request": "Sightseeing in Paris",
    "imageUrls": [
        "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
    ]
}
```
3. [実行] をクリックします。
4. 生成された出力を確認します。出力には、画像の説明が旅行プランの候補に組み込まれているはずです。
エラーや予期しない動作が発生した場合は、[検査] タブで詳細を確認します。このタブを使用して、Trace Store の実行履歴を確認することもできます。

ウェブアプリケーションの RAG

ブラウザで http://localhost:3000/ にアクセスして、ウェブアプリがまだ実行されていることを確認します。
ウェブアプリが実行されていない場合は、ターミナルで次のコマンドを実行します。
```
npm install
npm run dev
```
Dream Your Vacation ウェブアプリページ（http://localhost:3000/gemini）を確認します。
Next.js 統合の例については、ソースコード（src/app/gemini/page.tsx）をご覧ください。

9. Firebase App Hosting を使用してアプリケーションをデプロイする

このチュートリアルの最後のステップは、ウェブアプリのデプロイです。フレームワーク対応のホスティングソリューションである Firebase App Hosting を使用して、Next.js アプリと Angular アプリをサーバーレスバックエンドに簡単にデプロイします。

変更をローカルの Git リポジトリに commit してから、GitHub に push します。
Firebase コンソールで、Firebase プロジェクト内の [アプリのホスティング] に移動します。
[使ってみる] > [GitHub に接続する] をクリックします。
GitHub アカウントとリポジトリを選択します。[Next] をクリックします。
[デプロイ設定 > ルートディレクトリ] で、デフォルト値のままにします。
[ライブブランチ] で、GitHub リポジトリの [main] ブランチを選択します。[Next] をクリックします。
バックエンドのID を入力します（例: compass）。
[Firebase ウェブアプリを作成または関連付ける] のメッセージが表示されたら、[既存の Firebase ウェブアプリを選択] を選択し、この Codelab の前半のステップで作成したアプリを選択します。
[Finish and Deploy] をクリックします。

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

デプロイプロセスには数分かかります。進行状況は、Firebase コンソールの [App Hosting] セクションで確認できます。

サービスアカウントに権限を付与する

Node.js バックエンドが Vertex AI リソースにアクセスするには、アプリのサービスアカウントに aiplatform.user ロールを割り当てる必要があります。

gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
--member "serviceAccount:firebase-app-hosting-compute@YOUR_PROJECT_ID.iam.gserviceaccount.com" \
--role "roles/aiplatform.user"

完了すると、ユーザーはウェブアプリにアクセスできるようになります。

自動再デプロイ

Firebase App Hosting を使用すると、今後のアップデートを効率化できます。GitHub リポジトリのメインのブランチに変更を push するたびに、Firebase App Hosting によってアプリが自動的に再ビルド、再デプロイされるため、ユーザーは常に最新バージョンを利用できます。

10. まとめ

この包括的な Codelab を完了しました。

Firebase Genkit、Firestore、Vertex AI の機能を活用して、ユーザーの好みやインスピレーションに基づいてパーソナライズされた休暇のおすすめを生成できる高度な「フロー」を作成しました。このフローでは、アプリのデータに基づいておすすめを生成します。

この演習では、堅牢な生成 AI アプリケーションの構築に不可欠なソフトウェアエンジニアリングパターンの実践的な経験を積みました。これらのパターンには次のようなものがあります。

プロンプトの管理: プロンプトをコードとして整理、維持し、コラボレーションとバージョン管理を改善します。
マルチモーダルコンテンツ: 画像やテキストなど、さまざまなデータ型を統合して AI のインタラクションを強化します。
入出力スキーマ: アプリケーションでシームレスに統合して検証できるようにデータを構造化します。
ベクトルストア: ベクトルエンベディングを活用して、効率的な類似検索と関連情報の取得を行います。
データの取得: データベースからデータを取得して AI 生成コンテンツに組み込むメカニズムを実装します。
検索拡張生成（RAG）: 検索手法と生成 AI を組み合わせて、コンテキストに関連する正確な出力を生成します。
フロー計測: 複雑な AI ワークフローを構築してオーケストレートし、シームレスでオブザーバブルな実行を実現します。

これらのコンセプトをマスターし、Firebase エコシステム内で適用することで、独自の生成 AI の冒険に乗り出す準備が整います。広大な可能性を探り、革新的なアプリケーションを構築し、生成 AI で実現できることの限界を押し広げましょう。

代替のデプロイオプションの検討

Genkit には、特定のニーズに合わせてさまざまなデプロイオプションが用意されています。

Cloud Functions for Firebase
Cloud Run
Next.js
任意の Node.js 環境
Genkit は Go もサポートしています

適切なものを 1 つ選択します。そのためには、（package.json）ノードフォルダ内で次のコマンドを実行します。

npx genkit init

次のステップ

Google AI Studio または Vertex AI Studio でプロンプトをテストし、大きなコンテキストウィンドウを活用します。
詳しくは、AI 検索拡張生成（RAG）検索をご覧ください。
Firebase Genkit の公式ドキュメントをご覧ください。
Firestore の類似性検索機能と Cloud SQL for PostgreSQL の詳細を確認する。
関数呼び出しを使用して、genAI フローをさらに深く理解する。