将 Web 框架与 Hosting 集成

Firebase Hosting 可与 Angular 和 Next.js 等主流的现代 Web 框架集成。通过将 Firebase Hosting 和 Cloud Functions for Firebase 与这些框架结合使用，您可以在自己首选的框架环境中开发应用和微服务，然后在一个安全的托管式服务器环境中部署这些应用和微服务。

此功能目前尚处在早期预览版阶段，在该阶段，我们提供以下功能：

  • 部署由静态 Web 内容构成的 Web 应用
  • 部署使用预呈现/静态网站生成 (SSG) 功能的 Web 应用
  • 部署使用服务器端呈现 (SSR) 功能的 Web 应用，该功能可按需实现完整的服务器呈现

Firebase 通过 Firebase CLI 提供此功能。通过命令行初始化 Hosting 时，您需要提供新的或现有的 Web 项目的相关信息，之后 CLI 会为您选择的 Web 框架设置合适的资源。

准备工作

在开始将应用部署到 Firebase 之前，请先了解以下要求和相关选项：

  • 拥有 Firebase CLI 12.1.0 或更高版本。请务必使用您首选的方法安装 CLI。
  • 可选：在 Firebase 项目中启用结算功能（如果您计划使用 SSR，则必须完成此操作）

在本地提供内容

您可以按照以下步骤在本地测试集成：

  1. 从终端运行 firebase emulators:start。这将使用 Firebase CLI 构建并提供您的应用。
  2. 使用 CLI 返回的本地网址（通常是 http://localhost:5000）打开您的 Web 应用。

将应用部署到 Firebase Hosting

当您准备好将更改共享给全世界用户后，将您的应用部署到实际网站：

  1. 从终端运行 firebase deploy。
  2. 通过 SITE_ID.web.app 或 PROJECT_ID.web.app（如果您设置了自定义网域，也可以通过您自己的网域）检查您的网站。

配置不同的环境

您可以为不同的项目环境（例如预演环境和生产环境）部署多组环境变量。

与 Cloud Functions for Firebase 类似，此工具支持 dotenv 文件格式，可加载 .env 文件中指定的环境变量。

  • 如果您的项目别名是 staging，则可以从 .env.staging 文件部署环境变量。
  • 如果您的项目别名是 production，则可以从 .env.production 文件部署环境变量。
  • 如果您的项目 ID 是 PROJECT_ID，则可以从 .env.PROJECT_ID 文件部署环境变量。

如需详细指南，请参阅 Cloud Functions 文档。

后续步骤

请参阅适用于您的首选框架的详细指南：