搭配 Cloud Functions for Firebase 使用 Genkit

Firebase Genkit 提供外掛程式，可協助你將流程部署至 Firebase Cloud Functions本頁將逐步說明 將預設範例流程部署至 Firebase

將流程部署為 Cloud 函式

  1. 安裝必要工具：

    1. 請務必使用 Node.js 20 以上版本 (執行 node --version 檢查)。

    2. 安裝 Firebase CLI。

  2. 透過 Firebase 控制台建立新的 Firebase 專案，或選擇現有專案。

    必須升級至 Blaze 方案，才能部署 Cloud 和 Cloud Functions

  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 函式提供 API 憑證。執行下列任一操作： 視您選擇的模型供應商而定：

    Gemini (Google AI)

    1. 請確認 Google AI 適用於您的地區。

    2. 產生 API 金鑰： 或 Google AI Studio 建立 Gemini 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 函式需要 存取這個密鑰值：

      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. 啟動使用者介面：

      cd $PROJECT_ROOT/functions
genkit start

    3. 在開發人員使用者介面 (http://localhost:4000/) 中，執行流程：

      1. 按一下「menusuggestionFlow」。

      2. 在「Input JSON」(輸入 JSON) 分頁中，提供模型的主旨：

        "AI app developers"

      3. 在「Auth JSON」分頁中，提供模擬驗證物件：

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

      4. 按一下「執行」。

  9. 如果目前一切運作正常，您可以部署流程：

    cd $PROJECT_ROOT
firebase deploy --only functions

您現在已將流程部署為 Cloud 函式！不過，您將無法 使用 curl 或類似服務存取已部署的端點，因為流程 授權政策。請前往下一節，瞭解如何安全使用 以便存取流程

試用已部署的流程

部署的每項流程都必須設定授權政策。不含 第一種是 成本最高的生成式 AI 流程 大家。

預設範例流程具有授權政策，如下所示：

firebaseAuth((user) => {
  if (!user.email_verified) {
    throw new Error('Verified email required to run flow');
  }
});

這項政策會使用 firebaseAuth() 輔助工具，僅允許使用者存取已註冊的內容 驗證你的應用程式使用者及已驗證的電子郵件地址。在用戶端方面，您必須 將 Authorization: Bearer 標頭設為符合的 Firebase ID 權杖 您的政策。Cloud Functions 用戶端 SDK 提供 可呼叫函式 可以自動執行這項作業

如要試用您的流程端點，您可以部署下列範例網路範例 應用程式：

  1. 在 專案設定 專區新增網頁應用程式，接著選取 也設定了託管功能

  2. 在 身分驗證 在 Firebase 控制台的專區啟用 Google 供應商，以便前往 本例使用

  3. 在專案目錄中設定 Firebase 託管，之後要部署在哪裡 操作範例應用程式：

    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 函式：

    cd $PROJECT_ROOT
firebase deploy

前往 deploy 指令輸出的網址，開啟網頁應用程式。應用程式 您必須使用 Google 帳戶登入，才能啟動 端點要求

使用 Firebase 本機模擬器套件進行開發

Firebase 提供一套用於本機開發的模擬器，可與 Genkit 搭配使用。

如要搭配使用 Genkit 和 Firebase 模擬器套件，請按照下列方式啟動 Firebase 模擬器：

GENKIT_ENV=dev firebase emulators:start --inspect-functions

這項操作會在模擬器中執行程式碼，並在開發模式下執行 Genkit 架構，藉此啟動並公開 Genkit 反射 API (而非開發人員 UI)。

接著，使用 --attach 選項啟動 Genkit Dev UI，將其連結至在 Firebase Emulator 中執行的程式碼：

genkit start --attach http://localhost:3100 --port 4001

如要在開發人員 UI 中查看 Firestore 的追蹤記錄，請前往「檢查」分頁，然後切換「開發人員/Prod」切換鈕。切換至「正式」時從 Firestore 載入追蹤記錄