Firebase Genkit には、Firebase へのフローのデプロイに役立つプラグインが含まれています Cloud Functions。このページでは、例として Google Cloud で デフォルトのサンプルフローを Firebase にデプロイします。
フローを Cloud Functions の関数としてデプロイする
必要なツールをインストールします。
Node.js バージョン 20 以降を使用していることを確認します(
node --version
を実行して、 チェック)。Firebase CLI をインストールします。
Firebase コンソールを使用して新しい Firebase プロジェクトを作成するか、既存のプロジェクトを選択します。
Cloud のデプロイに必要な Blaze プランにプロジェクトをアップグレードする 説明します。
Firebase CLI でログインします。
firebase login
firebase login --reauth # alternative, if necessary
firebase login --no-localhost # if running in a remote shell
新しいプロジェクト ディレクトリを作成します。
export PROJECT_ROOT=~/tmp/genkit-firebase-project1
mkdir -p $PROJECT_ROOT
フォルダ内の Genkit を使用して Firebase プロジェクトを初期化します。
cd $PROJECT_ROOT
firebase init genkit
- 先ほど作成したプロジェクトを選択します。
- 使用するモデル プロバイダを選択します。
残りのプロンプトについては、デフォルト値を受け入れます。
genkit
ツールは、 サンプルのソースファイルを使用して、独自の AI フローの開発を始めることができます。 ただし、このチュートリアルの残りの部分では、サンプル フローのデプロイのみを行います。Cloud Functions の関数で API 認証情報を利用できるようにします。次のいずれかを行う 以下のいずれかになります。
Gemini(Google AI)
Google AI がお住まいの地域で利用可能であることを確認してください。
Google AI Studio を使用して Gemini API の API キーを生成します。
API キーを Cloud Secret Manager に保存します。
firebase functions:secrets:set GOOGLE_GENAI_API_KEY
この手順は、誤って API キーが漏洩するのを防ぐために重要です。 これにより、従量制サービスを利用できる場合にアクセスできるようになります。
機密性の高い構成情報の保存とアクセスをご覧ください。 シークレットの管理に関する詳細をご覧ください。
src/index.ts
を編集して、既存のインポートの後に以下を追加します。import {defineSecret} from "firebase-functions/params"; const googleAIapiKey = defineSecret("GOOGLE_GENAI_API_KEY");
次に、フロー定義で、Cloud Functions 関数に アクセスすることもできます。
export const menuSuggestionFlow = onFlow( { name: "menuSuggestionFlow", // ... httpsOptions: { secrets: [googleAIapiKey], // Add this line. }, }, async (subject) => { // ... } );
この関数をデプロイすると、API キーが Cloud Secret Manager であり、Cloud Functions の関数から できます。
Gemini(Vertex AI)
Cloud コンソールで Vertex AI API を有効にする 追加します。
IAM [デフォルトのコンピューティング サービス アカウント] に Vertex AI ユーザーロール。
このチュートリアルで設定する必要があるシークレットはモデル プロバイダ用のものだけですが、一般的には、フローで使用する各サービスに対して同様の設定を行う必要があります。
ウェブアプリからフローにアクセスする場合( 次のセクションでは、
httpsOptions
パラメータで CORS ポリシーを設定します。export const menuSuggestionFlow = onFlow( { name: "menuSuggestionFlow", // ... httpsOptions: { cors: true, // Add this line. }, }, async (subject) => { // ... } );
本番環境アプリでは、より厳格なポリシーが必要になる可能性がありますが、 説明します。
省略可: デベロッパー UI でフローを試します。
API 認証情報をローカルで使用できるようにします。次のいずれかを行います。 モデルプロバイダによって異なります
Gemini(Google AI)
GOOGLE_GENAI_API_KEY
環境変数を自分の鍵に設定します。export GOOGLE_GENAI_API_KEY=<your API key>
Gemini(Vertex AI)
いくつかの追加の環境変数を設定し、
gcloud
ツールを設定する 認証情報をローカルに保持します。export GCLOUD_PROJECT=<your project ID>
export GCLOUD_LOCATION=us-central1
gcloud auth application-default login
UI を起動します。
cd $PROJECT_ROOT/functions
genkit start
デベロッパー UI(http://localhost:4000/)で次のフローを実行します。
[menuSuggestionFlow] をクリックします。
[Input JSON] タブで、モデルのサブジェクトを指定します。
"AI app developers"
[Auth JSON] タブで、シミュレートされた認証オブジェクトを入力します。
{ "uid": 0, "email_verified": true }
[実行] をクリックします。
ここまでの作業ですべてが正常に動作していれば、フローをデプロイできます。
cd $PROJECT_ROOT
firebase deploy --only functions
これで、フローが Cloud Functions の関数としてデプロイされました。ただし、
デプロイされたエンドポイントにアクセスするには、フローのフローにより、curl
などを使用します。
適用できます。次のセクションに進んで、Google Cloud で
できます。
デプロイされたフローを試す
デプロイするすべてのフローで認可ポリシーを設定することが重要です。なし 1 つ目は、費用が高くなる可能性のある生成 AI のフローを、 できます。
デフォルトのサンプルフローには、次のような認可ポリシーがあります。
firebaseAuth((user) => {
if (!user.email_verified) {
throw new Error('Verified email required to run flow');
}
});
このポリシーでは、firebaseAuth()
ヘルパーを使用して、登録済みのユーザーのみにアクセスを許可します。
検証済みのメールアドレスでアプリのユーザーに提供されます。クライアントサイドでは
Authorization: Bearer
ヘッダーを、次の条件を満たす Firebase ID トークンに設定します。
指定できます。Cloud Functions クライアント SDK は、
呼び出し可能関数
自動化する方法を学びました
フローのエンドポイントを試すには、次の最小限のサンプル ウェブをデプロイ app:
プロジェクト設定 セクションで [新しいウェブアプリの追加] をクリックし、 Hosting も設定します。
認証 セクションで、Google プロバイダを有効にします。 使用します。
プロジェクト ディレクトリで、Firebase Hosting を設定し、デプロイする 次のサンプル アプリケーションを実行します。
cd $PROJECT_ROOT
firebase init hosting
すべてのプロンプトでデフォルト値を受け入れます。
public/index.html
を次のように置き換えます。<!doctype html> <html> <head> <title>Genkit demo</title> </head> <body> <div id="signin" hidden> <button id="signinBtn">Sign in with Google</button> </div> <div id="callGenkit" hidden> Subject: <input type="text" id="subject" /> <button id="suggestMenuItem">Suggest a menu theme</button> <p id="menuItem"></p> </div> <script type="module"> import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.10.0/firebase-app.js'; import { getAuth, onAuthStateChanged, GoogleAuthProvider, signInWithPopup, } from 'https://www.gstatic.com/firebasejs/10.10.0/firebase-auth.js'; import { getFunctions, httpsCallable, } from 'https://www.gstatic.com/firebasejs/10.10.0/firebase-functions.js'; const firebaseConfig = await fetch('/__/firebase/init.json'); initializeApp(await firebaseConfig.json()); async function generateMenuItem() { const menuSuggestionFlow = httpsCallable( getFunctions(), 'menuSuggestionFlow' ); const subject = document.querySelector('#subject').value; const response = await menuSuggestionFlow(subject); document.querySelector('#menuItem').innerText = response.data; } function signIn() { signInWithPopup(getAuth(), new GoogleAuthProvider()); } document .querySelector('#signinBtn') .addEventListener('click', signIn); document .querySelector('#suggestMenuItem') .addEventListener('click', generateMenuItem); const signinEl = document.querySelector('#signin'); const genkitEl = document.querySelector('#callGenkit'); onAuthStateChanged(getAuth(), (user) => { if (!user) { signinEl.hidden = false; genkitEl.hidden = true; } else { signinEl.hidden = true; genkitEl.hidden = false; } }); </script> </body> </html>
ウェブアプリと Cloud Functions の関数をデプロイします。
cd $PROJECT_ROOT
firebase deploy
deploy
コマンドで出力された URL にアクセスして、ウェブアプリを開きます。アプリ
Google アカウントでログインする必要があります。ログインすると、
リクエストをルーティングします。
Firebase Local Emulator Suite を使用した開発
Firebase には、Genkit で使用できるローカル開発用のエミュレータ スイートが用意されています。
Firebase Emulator Suite で Genkit を使用するには、次のように Firebase エミュレータを起動します。
GENKIT_ENV=dev firebase emulators:start --inspect-functions
これにより、エミュレータでコードが実行され、開発モードで Genkit フレームワークが実行されます。これにより、Genkit リフレクション API が起動して公開されます(Dev UI は提供されません)。
次に、--attach
オプションを指定して Genkit Dev UI を起動し、Firebase Emulator 内で実行されているコードに接続します。
genkit start --attach http://localhost:3100 --port 4001
Dev UI で Firestore のトレースを確認するには、[Inspect] タブに移動して [Dev/Prod] を切り替えます。スイッチ。「prod」に切り替えた場合Firestore からトレースを読み込みます