将 Firebase SDK 与您的 Web 应用集成

Firebase App Hosting 非常适合使用 Firebase JavaScript SDK 和 Firebase Admin SDK 构建的动态 Web 应用。在功能齐全的 Web 应用中，Firebase SDK（例如 Authentication、Cloud Firestore 和 App Check）发挥着重要作用。本指南介绍了一些关键策略，可帮助优化 Firebase SDK，并开始在 Firebase App Hosting 上将 Firebase 构建到您的 Web 应用中。

自动初始化 Firebase Admin SDK 和 Web SDK

Firebase App Hosting 等 Google 环境可在构建时和运行时通过无参数构造函数调用来简化应用初始化。Firebase Admin SDK for Node.js（一种服务器端 SDK，可解锁大量 Firebase 功能，在 Web 应用中非常有用）和 Firebase JavaScript SDK 均具有此功能。

借助 initializeApp()，您可以让 Firebase App Hosting 自动填充 Web 应用配置，同时仍可选择对特定值进行精细控制（如果您想替换默认值）。

使用无参数初始化

如需使用默认配置值初始化 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。

替换自动填充的值

您可以替换自动注入的默认配置。请注意，这些选项在 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 替换

如需替换 FIREBASE_WEBAPP_CONFIG App Hosting 为 JavaScript SDK 初始化注入的默认值，您可以在 apphosting.yaml 中指定值：App Hosting

# 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 时自行设置此环境变量。

如需在安装时手动设置环境，请执行以下操作：

从 Firebase 控制台中复制您的 Firebase Web 应用配置对象。
在终端中，先设置 FIREBASE_WEBAPP_CONFIG 环境变量，然后再运行 npm install 命令。

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

每当您更改 Firebase 项目或 Web 应用时，请重新运行此命令。您可能还需要清除中间缓存（例如 .next/cache）。

使用 `FirebaseServerApp` 进行 SSR

如果您在开发 Web 应用时使用过 Firebase JS SDK 或其他 Firebase 客户端 SDK，那么您可能会熟悉 FirebaseApp 接口以及如何使用它来配置应用实例。为了在服务器端实现类似操作，Firebase 提供了 FirebaseServerApp。

FirebaseServerApp 是 FirebaseApp 的变体，在服务器端渲染 (SSR) 环境中使用。它包含的一些工具可用于继续跨客户端渲染 (CSR) / 服务器端渲染 (SSR) 进行连接的 Firebase 会话。

使用 FirebaseServerApp 可执行以下操作：

在用户上下文中执行服务器端代码，这与具有完全管理权限的 Firebase Admin SDK 相反。
在 SSR 环境中启用 App Check。
继续在客户端中创建的 Firebase Auth 会话。

如需详细了解如何使用 FirebaseServerApp 实现这些目的，请参阅 Use Firebase in dynamic web apps with SSR。

在 Web 应用中启用 App Check

您可以使用 App Check 来增强 App Hosting 上动态 Web 应用的安全性。通过实现一些在在具有 SSR的动态 Web 应用中使用 Firebase 中介绍的特定服务器端策略，您可以保护App Hosting 后端免遭滥用。