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

Firebase App Hosting 非常適合使用 Firebase JavaScript SDK 和 Node.js Firebase Admin SDK 建構的動態網頁應用程式。在功能齊全的網頁應用程式中，Firebase SDK (例如 Authentication、Cloud Firestore 和 App Check) 扮演重要角色。本指南說明幾項重要策略，協助您最佳化 Firebase SDK，並開始在 Firebase App Hosting的網頁應用程式中建構 Firebase。

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

Google 環境 (例如 Firebase App Hosting) 可在建構和執行階段，透過無引數建構函式呼叫簡化應用程式初始化作業。這項功能適用於 Firebase Admin SDK for Node.js (伺服器端 SDK，可解鎖大量 Firebase 功能，在網頁應用程式中非常實用) 和 Firebase JavaScript SDK。

有了 initializeApp()，您就能讓 Firebase App Hosting 自動填入網頁應用程式設定，同時保留對特定值進行精細控制的選項，以便覆寫預設值。

初始化時不使用任何引數

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

Admin SDK

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

JavaScript SDK

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

這項 Admin SDK 初始化策略也適用於 App Hosting，以及其他 Google 伺服器環境，包括 Cloud Run、App Engine 和 Cloud Functions。如果是 JavaScript SDK，這項策略適用於 App Hosting。

覆寫自動填入的值

您可以覆寫自動插入的預設設定。請注意，這些選項在 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: '{"credential: applicationDefault()","databaseURL":"https://project-id-default-rtdb.firebaseio.com"}'

覆寫 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 環境中自動設定。

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

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

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

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

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

每當您變更 Firebase 專案或網頁應用程式時，請重新執行這項指令。

使用 FirebaseServerApp 進行伺服器端算繪

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

FirebaseServerApp 是 FirebaseApp 的變體，適用於伺服器端算繪 (SSR) 環境。這項功能包含多種工具，可繼續進行跨用戶端轉譯 (CSR) / 伺服器端轉譯的 Firebase 工作階段。

FirebaseServerApp 可用來：

  • 在「user」環境中執行伺服器端程式碼，與具有完整管理權限的 Firebase Admin SDK 相反。
  • 在 SSR 環境中啟用 App Check。
  • 繼續在用戶端建立的 Firebase 驗證工作階段。

如要瞭解如何使用 FirebaseServerApp 達成這些目的，請參閱「在動態網頁應用程式中使用 Firebase 進行 SSR」。

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

您可以使用 App Check 加強 App Hosting 上動態網頁應用程式的安全性。實作這篇文章中介紹的特定伺服器端策略，即可保護 App Hosting 後端免於遭到濫用。