Cloud Functions for Firebase と Genkit

Firebase Genkit には、Firebase へのフローのデプロイに役立つプラグインが含まれています Cloud Functions。このページでは、例として Google Cloud で デフォルトのサンプルフローを Firebase にデプロイします。

フローを Cloud Functions の関数としてデプロイする

  1. 必要なツールをインストールします。

    1. Node.js バージョン 20 以降を使用していることを確認します（node --version を実行して、 チェック）。

    2. Firebase CLI をインストールします。

  2. Firebase コンソールを使用して新しい Firebase プロジェクトを作成するか、既存のプロジェクトを選択します。

    Cloud のデプロイに必要な Blaze プランにプロジェクトをアップグレードする 説明します。

  3. Firebase CLI でログインします。

    firebase login
firebase login --reauth # alternative, if necessary
firebase login --no-localhost # if running in a remote shell

  4. 新しいプロジェクト ディレクトリを作成します。

    export PROJECT_ROOT=~/tmp/genkit-firebase-project1
mkdir -p $PROJECT_ROOT

  5. フォルダ内の Genkit を使用して Firebase プロジェクトを初期化します。

    cd $PROJECT_ROOT
firebase init genkit
    • 先ほど作成したプロジェクトを選択します。
    • 使用するモデル プロバイダを選択します。

    残りのプロンプトについては、デフォルト値を受け入れます。genkit ツールは、 サンプルのソースファイルを使用して、独自の AI フローの開発を始めることができます。 ただし、このチュートリアルの残りの部分では、サンプル フローのデプロイのみを行います。

  6. Cloud Functions の関数で API 認証情報を利用できるようにします。次のいずれかを行う 以下のいずれかになります。

    Gemini（Google AI）

    1. Google AI がお住まいの地域で利用可能であることを確認してください。

    2. Google AI Studio を使用して Gemini API の API キーを生成します。

    3. API キーを Cloud Secret Manager に保存します。

      firebase functions:secrets:set GOOGLE_GENAI_API_KEY

      この手順は、誤って API キーが漏洩するのを防ぐために重要です。 これにより、従量制サービスを利用できる場合にアクセスできるようになります。

      機密性の高い構成情報の保存とアクセスをご覧ください。 シークレットの管理に関する詳細をご覧ください。

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

    1. Cloud コンソールで Vertex AI API を有効にする 追加します。

    2. IAM [デフォルトのコンピューティング サービス アカウント] に Vertex AI ユーザーロール。

    このチュートリアルで設定する必要があるシークレットはモデル プロバイダ用のものだけですが、一般的には、フローで使用する各サービスに対して同様の設定を行う必要があります。

  7. ウェブアプリからフローにアクセスする場合（ 次のセクションでは、httpsOptions パラメータで CORS ポリシーを設定します。

    export const menuSuggestionFlow = onFlow(
  {
    name: "menuSuggestionFlow",
    // ...
    httpsOptions: {
      cors: true,  // Add this line.
    },
  },
  async (subject) => {
    // ...
  }
);

    本番環境アプリでは、より厳格なポリシーが必要になる可能性がありますが、 説明します。

  8. 省略可: デベロッパー UI でフローを試します。

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

    2. UI を起動します。

      cd $PROJECT_ROOT/functions
genkit start

    3. デベロッパー UI（http://localhost:4000/）で次のフローを実行します。

      1. [menuSuggestionFlow] をクリックします。

      2. [Input JSON] タブで、モデルのサブジェクトを指定します。

        "AI app developers"

      3. [Auth JSON] タブで、シミュレートされた認証オブジェクトを入力します。

        {
  "uid": 0,
  "email_verified": true
}

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

  9. ここまでの作業ですべてが正常に動作していれば、フローをデプロイできます。

    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:

  1. プロジェクト設定 セクションで [新しいウェブアプリの追加] をクリックし、 Hosting も設定します。

  2. 認証 セクションで、Google プロバイダを有効にします。 使用します。

  3. プロジェクト ディレクトリで、Firebase Hosting を設定し、デプロイする 次のサンプル アプリケーションを実行します。

    cd $PROJECT_ROOT
firebase init hosting

    すべてのプロンプトでデフォルト値を受け入れます。

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

  5. ウェブアプリと 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 からトレースを読み込みます