監控及保護網頁應用程式

發布應用程式後，請監控並保護應用程式：

使用App Hosting可觀測性監控網站效能

Firebase Studio 的「應用程式總覽」面板會提供應用程式的重要指標和資訊，讓您使用 App Hosting 的內建可觀測性工具監控網頁應用程式的效能。網站推出後，按一下「發布」即可存取總覽。您可以在這個面板中執行下列操作：

  • 按一下「發布」，發布新版應用程式。
  • 分享應用程式連結，或直接在「前往您的應用程式」中開啟應用程式。
  • 查看應用程式過去 7 天的成效摘要，包括請求總數和最新推出版本的狀態。按一下「查看詳細資料」，即可在 Firebase 控制台中查看更多資訊。
  • 查看應用程式在過去 24 小時內收到的要求數圖表，並依 HTTP 狀態碼細分。

如果關閉「應用程式總覽」面板，隨時可以點選「發布」重新開啟。

如要進一步瞭解如何管理及監控App Hosting推出作業，請參閱「管理推出作業和發布版本」。

Genkit 監控已部署的功能

您可以為 AI 流程程式碼啟用遙測功能，監控 Genkit 功能步驟、輸入內容和輸出內容。Genkit 的遙測功能可讓你監控 AI 流程的效能和使用情況。這項資料有助於找出可改善的部分、排解問題、最佳化提示和流程，以提升效能和成本效益，以及追蹤流程的用量變化。

如要在 Genkit 中設定監控功能，請將遙測資料新增至 Genkit AI 流程，然後在 Firebase 控制台中查看結果。

步驟 1：在 Firebase Studio 中，將遙測資料新增至 Genkit 流程程式碼

如要在程式碼中設定監控功能，請按照下列步驟操作：

  1. 如果尚未進入 Code 檢視畫面，請按一下 程式碼切換 圖示「Switch to Code」(切換至程式碼) 開啟。

  2. 檢查 package.json，確認已安裝的 Genkit 版本。

  3. 開啟終端機 (Ctrl-Shift-C，或 MacOS 中的 Cmd-Shift-C)。

  4. 在終端機內按一下，然後使用與 package.json 檔案相符的版本，安裝 Firebase 外掛程式。舉例來說，如果 package.json 中的 Genkit 套件版本為 1.0.4，您應執行下列指令來安裝外掛程式：

    npm i --save @genkit-ai/firebase@1.0.4

  5. 在「Explorer」中展開 src > ai > flows。包含 Genkit 流程的一或多個 TypeScript 檔案會顯示在 flows 資料夾中。

  6. 按一下其中一個流程即可開啟。

  7. 在檔案的匯入部分底部，新增下列程式碼來匯入及啟用 FirebaseTelemetry：

    import { enableFirebaseTelemetry } from '@genkit-ai/firebase';

enableFirebaseTelemetry();

步驟 2：設定權限

Firebase Studio 在設定 Firebase 專案時，會為您啟用必要 API，但您也需要提供 App Hosting 服務帳戶的權限。

如何設定權限：

  1. 開啟 Google Cloud IAM 控制台，選取專案，然後將下列角色授予 App Hosting 服務帳戶：

    • 「Monitoring 指標寫入者」 (roles/monitoring.metricWriter)
    • Cloud Trace 代理程式 (roles/cloudtrace.agent)
    • 「記錄寫入者」 (roles/logging.logWriter)

  2. 重新發布應用程式至 App Hosting。

  3. 發布完成後，請載入應用程式並開始使用。五分鐘後，應用程式應該會開始記錄遙測資料。

步驟 3：在 Firebase 控制台中監控生成式 AI 功能

設定遙測後，Genkit 會記錄所有流程的要求數量、成功次數和延遲時間，並為每個特定流程收集穩定性指標、顯示詳細圖表，以及記錄擷取的追蹤記錄。Genkit

如要監控使用 Genkit 實作的 AI 功能，請按照下列步驟操作：

  1. 五分鐘後，開啟Firebase 控制台中的 Genkit，並查看 Genkit 的提示和回覆。

    Genkit 會編譯下列穩定性指標：

    • 要求總數：流程收到的要求總數。
    • 成功率：成功處理的要求百分比。
    • 第 95 個百分位數的延遲時間：流程的第 95 個百分位數延遲時間，也就是處理 95% 要求所需的時間。

    • 權杖用量：

      • 輸入權杖：提示中傳送給模型的權杖數量。
      • 輸出權杖：模型在回覆中生成的權杖數量。

    • 圖片使用方式：

      • 輸入圖片：提示中傳送給模型的圖片數量。
      • 輸出圖片：模型在回應中生成的圖片數量。

    展開穩定性指標後，即可查看詳細圖表：

    • 一段時間內的要求量。
    • 一段時間內的成功率。
    • 一段時間內的輸入和輸出權杖。
    • 一段時間內的延遲時間 (第 95 和第 50 個百分位數)。

如要進一步瞭解 Genkit，請前往 Genkit。

使用 Firebase App Check 保護應用程式

如果您已將 Firebase 或 Google Cloud 服務整合至應用程式，Firebase App Check 有助於防止未經授權的用戶端存取 Firebase 資源，保護應用程式後端免於遭到濫用。這項服務可與 Google 服務 (包括 Firebase 和 Google Cloud 服務) 和您自己的自訂後端搭配使用，確保資源安全無虞。

建議您在公開發布的任何應用程式中加入 App Check，以免後端資源遭到濫用。

本節將逐步說明如何使用 reCAPTCHA Enterprise，在 App Prototyping agent 建立的 Web 應用程式中設定 App CheckFirebase Studio，但您也可以在任何實作 Firebase 服務且可實作自訂供應商的應用程式中設定 App Check。如要瞭解詳情，請前往 Firebase App Check。

ReCAPTCHA Enterprise 最多可免費提供 10,000 次評估。

步驟 1：為應用程式設定 reCAPTCHA Enterprise

  1. 開啟 Google Cloud 控制台的「reCAPTCHA Enterprise」部分。

  2. 在 Google Cloud 控制台專案挑選器中，選取 Firebase 專案名稱。

  3. 如果系統提示您啟用 reCAPTCHA Enterprise API，請啟用。

  4. 按一下「開始使用」，然後為 reCAPTCHA 網站金鑰新增「顯示名稱」。

  5. 接受預設的「Web」「應用程式類型」金鑰。

  6. 按一下「新增網域」並新增網域。您需要新增 App Hosting 網域 (例如 studio--PROJECT_ID.REGION.hosted.app)，以及您用於或打算用於應用程式的任何自訂網域。

  7. 點選「下一步」。

  8. 取消選取「您會使用驗證問題嗎？」。

  9. 按一下 [Create key] (建立金鑰)。

  10. 複製並儲存「金鑰 ID」，然後繼續設定 App Check。

步驟 2：設定 App Check

  1. 開啟 Firebase 控制台，然後依序點選導覽選單中的「Build」 >「App Check」。

  2. 依序點選「開始使用」和應用程式旁的「註冊」。

  3. 按一下展開「ReCAPTCHA」，然後貼上您為 reCAPTCHA Enterprise 產生的金鑰 ID。

  4. 按一下 [儲存]。

步驟 3：在程式碼中新增 App Check

  1. 返回 Firebase Studio，在 Code 檢視畫面中，將產生的網站金鑰新增至 .env 檔案：

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  2. 如果您尚未將 Firebase 設定儲存至 .env，請取得設定：

    • 在 Firebase 控制台中開啟「專案設定」，然後在對應應用程式的部分中找到該設定。

    • 從 Code 檢視畫面中的終端機：

      1. 登入 Firebase：firebase auth login
      2. 選取專案： firebase use FIREBASE_PROJECT_ID
      3. 取得 Firebase 設定：firebase apps:sdkconfig

  3. 在 .env 檔案中新增設定，如下所示：

    NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN
NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID
NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  4. 在應用程式程式碼中加入 App Check。您可以要求 Gemini 在應用程式中新增 reCAPTCHA Enterprise (請務必指定「reCAPTCHA Enterprise」並仔細檢查！)，或按照「初始化App Check」一節中的步驟操作。App Check

  5. 重新發布協作平台至 App Hosting。請嘗試測試 Firebase 功能，產生一些資料。

  6. 開啟「Build」(建構) >「App Check」(應用程式檢查)，確認 App Check 是否在 Firebase 控制台中收到要求。

  7. 按一下即可檢查 Firebase 服務。確認收到要求後，按一下「強制執行」，強制執行 App Check。

  8. 針對 Firebase Authentication 重複驗證和強制執行程序。

如果您已為應用程式註冊 App Check，但想在 App Check 通常不會歸類為有效的環境中執行應用程式 (例如在本機開發期間，或從持續整合 (CI) 環境執行)，可以建立應用程式的偵錯版本，使用 App Check 偵錯供應器，而非實際的認證供應器。詳情請參閱在網頁應用程式中使用 App Check 搭配偵錯供應器。

後續步驟