將 Firebase SDK 與您的網路應用程式整合

Firebase App Hosting 非常適合搭配 Firebase JavaScript SDK 和 Firebase Admin SDK for Node.js 建構的動態網頁應用程式。在功能完整的網頁應用程式中，Firebase SDK (例如 Authentication、Cloud Firestore 和 App Check) 扮演著重要角色。本指南說明一些重要策略，協助您最佳化 Firebase SDK，並開始在 Firebase App Hosting 上將 Firebase 建構至網頁應用程式。

自動初始化 Firebase Admin SDK 和網頁 SDK

Firebase App Hosting 等 Google 環境會在建構和執行階段，透過無引數建構函式呼叫，提供簡化的應用程式初始化作業。Node.js 專用 Firebase Admin SDK 和 Firebase JavaScript SDK 都提供這項功能。前者是伺服器端 SDK，可解鎖大量 Firebase 功能，在網頁應用程式中非常實用。

有了 initializeApp()，您可以讓 Firebase App Hosting 自動填入網頁應用程式設定，同時仍可選擇精細控制特定值，以便覆寫預設值。

不使用引數進行初始化

如要使用預設設定值初始化 Firebase Admin SDK 或 Firebase JavaScript SDK，請使用 initializeApp()，不提供任何引數。

Admin SDK

import { initializeApp } from 'firebase-admin/app';
const app = initializeApp();

對於 Admin SDK，這項初始化策略適用於 App Hosting 以及其他 Google 伺服器環境，包括 Cloud Run、App Engine 和 Cloud Run 函式。

JavaScript SDK

import { initializeApp } from 'firebase/app';
const app = initializeApp();

如果是 JavaScript SDK，這項初始化策略適用於 App Hosting。

注意：JavaScript SDK 的無引數初始化作業取決於 postinstall 指令碼，而 pnpm 預設會停用這類指令碼。如要選擇加入，請在 pnpm-workspace.yaml 中使用 allowBuilds 設定 (如果是 pnpm v10 以下版本，則使用 onlyBuiltDependencies)。

覆寫自動填入的值

您可以覆寫自動插入的預設設定。請注意，Admin SDK 和 JavaScript SDK 的選項不同。

Admin SDK 項覆寫設定

如要為 Realtime Database、Cloud Storage 或 Cloud Functions 等服務指定自訂初始化選項，請使用 FIREBASE_CONFIG 環境變數。如果 FIREBASE_CONFIG 變數的內容開頭為 { 字元，系統會將其剖析為 JSON 物件。否則 SDK 會假設字串是包含選項的 JSON 檔案路徑。

# apphosting.yaml

env:
  - variable: FIREBASE_CONFIG
    value: '{"databaseURL":"https://project-id-default-rtdb.firebaseio.com","projectId":"my-project-id"}'

JavaScript SDK 覆寫

如要覆寫 App Hosting 為 JavaScript SDK 初始化插入的預設 FIREBASE_WEBAPP_CONFIG 值，您可以在 apphosting.yaml 中指定值：

# apphosting.yaml

env:
  - variable: FIREBASE_WEBAPP_CONFIG
    value: '{"apiKey":"myApiKey","appId":"app:123","authDomain":"project-id.firebaseapp.com","databaseURL":"https://project-id-default-rtdb.firebaseio.com","messagingSenderId":"0123456789","projectId":"project-id","storageBucket":"project-id.firebasestorage.app"}'

在其他環境中使用自動初始化

安裝 Firebase JavaScript SDK 時，系統會使用 npm postinstall 指令碼設定自動初始化。postinstall 指令碼會尋找環境變數 FIREBASE_WEBAPP_CONFIG，該變數會在 App Hosting Cloud Build 建構環境中自動設定。

注意：postinstall 指令碼在 pnpm 中預設為停用。如要選擇加入，請在 pnpm-workspace.yaml 中使用 allowBuilds 設定 (如果是 pnpm v10 以下版本，則使用 onlyBuiltDependencies)。

如果是在 Cloud Build 以外的環境安裝 JS SDK，則必須在安裝 Firebase JavaScript SDK 時自行設定這個環境變數。

如要在安裝時手動設定環境，請按照下列步驟操作：

1. 從 Firebase 控制台複製 Firebase 網頁應用程式設定物件。

2. 在終端機中，先設定 FIREBASE_WEBAPP_CONFIG 環境變數，再執行 npm install 指令。

FIREBASE_WEBAPP_CONFIG="{...}" npm install firebase

每當您變更 Firebase 專案或網頁應用程式時，請重新執行這個指令。您可能也需要清除中繼快取 (例如 .next/cache)。

使用 FirebaseServerApp 進行 SSR

如果您在開發網頁應用程式時，曾使用 Firebase JS SDK 或其他 Firebase 用戶端 SDK，可能已熟悉 FirebaseApp 介面，以及如何使用該介面設定應用程式執行個體。為方便在伺服器端執行類似作業，Firebase 提供 FirebaseServerApp。

FirebaseServerApp 是 FirebaseApp 的變體，適用於伺服器端算繪 (SSR) 環境。其中包含工具，可延續跨越用戶端轉譯 (CSR) / 伺服器端轉譯 (SSR) 區隔的 Firebase 工作階段。

FirebaseServerApp 可用來：

• 在「使用者」情境中執行伺服器端程式碼，而非具有完整管理權限的 Firebase Admin SDK。
• 在 SSR 環境中啟用 App Check。
• 繼續在用戶端建立的 Firebase Auth 工作階段。

如要進一步瞭解如何將 FirebaseServerApp 用於這些用途，請參閱「在採用 SSR 的動態網頁應用程式中使用 Firebase」。

在網頁應用程式中啟用 App Check

您可以使用 App Check 強化 App Hosting 上動態網頁應用程式的安全性。只要實作「在採用 SSR 的動態網頁應用程式中使用 Firebase」一文所述的特定伺服器端策略，即可保護 App Hosting 後端免遭濫用。