搭配 Firebase Cloud Functions 使用的 Genkit

Firebase Genkit 提供外掛程式,可協助您將流程部署至 Firebase Cloud Functions。本頁面會舉例說明將預設流程範例部署至 Firebase 的程序。

將流程部署為 Cloud 函式

  1. 安裝必要工具:

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

    2. 安裝 Firebase CLI

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

    將專案升級至 Blaze 方案,該方案是部署 Cloud 函式的必要項目。

  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. 使用 Google AI Studio 為 Gemini API 產生 API 金鑰

    3. GOOGLE_GENAI_API_KEY 環境變數設為您的金鑰:

      export GOOGLE_GENAI_API_KEY=<your API key>
      
    4. 編輯 src/index.ts,並在現有匯入作業後方加入以下內容:

    import {defineSecret} from "firebase-functions/params";
    defineSecret("GOOGLE_GENAI_API_KEY");
    

    現在,當您部署這個函式時,您的 API 金鑰會儲存在 Cloud Secret Manager 中,並且可從 Cloud Functions 環境使用。

    Gemini (Vertex AI)

    1. 在 Cloud 控制台中,為您的 Firebase 專案啟用 Vertex AI API

    2. 在「IAM」(身分與存取權管理) 頁面中,確認已向「Default compute service account」(預設運算服務帳戶) 授予「Vertex AI 使用者」角色。

    3. 選用:如果您想在本機執行流程 (如下一個步驟所示),請設定其他環境變數,並使用 gcloud 工具設定應用程式預設憑證:

      export GCLOUD_PROJECT=<your project ID>
      export GCLOUD_LOCATION=us-central1
      gcloud auth application-default login
      

    在本教學課程中,唯一需要為模型供應商設定的密鑰。但是一般來說,您必須針對流程使用的每項服務執行類似操作。

  7. 如果您要從網頁應用程式存取流程 (您將在下一節進行),請在 httpsOptions 參數中設定 CORS 政策:

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

    您可能想要針對正式版應用程式設定更嚴格的政策,但本教學課程將採用此設定。

  8. 選用:請在開發人員 UI 中試用您的流程:

    1. 啟動使用者介面:

      cd $PROJECT_ROOT/functions
      genkit start
      
    2. 在開發人員使用者介面 (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. 在 Firebase 控制台的「Project settings」部分新增網頁應用程式,選取一併設定託管的選項。

  2. 在 Firebase 控制台的「Authentication」(驗證) 部分啟用「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」切換鈕。如果切換至「prod」,系統會載入 Firestore 的追蹤記錄。