App Hosting 使用入门

如果您在 GitHub 代码库中有一个现有的 Next.js 或 Angular 应用（Next.js 版本 13.5.x 或更高版本或 Angular 18.2.x 或更高版本），那么只需创建 App Hosting 后端，然后通过推送到实时分支来开始发布，即可轻松开始使用 App Hosting。如果您没有应用，请使用我们的某个示例应用来逐步完成本指南中所述的步骤。

准备工作

您必须先创建一个 Firebase 项目（如果您还没有），然后升级到 Blaze 方案，才能设置 Firebase App Hosting。

如需创建项目，请执行以下操作：

  1. 在 Firebase 控制台中，点击添加项目。

    • 如需将 Firebase 资源添加到现有 Google Cloud 项目，请输入该项目的名称或从下拉菜单中选择该项目。

    • 如需创建新项目，请输入项目名称。您也可以视需要修改项目名称下方显示的项目 ID。

  2. 如果看到相关提示，请查看并接受 Firebase 条款。

  3. 点击继续。

  4. （可选）为您的项目设置 Google Analytics，以便在使用下列 Firebase 产品时能获得最佳体验：Firebase A/B Testing、Cloud Messaging、Crashlytics、In-App Messaging 和 Remote Config（包括个性化）。

    选择现有的 Google Analytics 账号，或者创建一个新账号。如果您选择创建一个新账号，请选择 Analytics 报告位置，然后接受项目的数据共享设置和 Google Analytics 条款。

  5. 点击创建项目（或者，如果您要将 Firebase 添加到现有 Google Cloud 项目，则点击添加 Firebase）。

Firebase 会自动为您的 Firebase 项目预配资源。完成此过程后，您将进入 Firebase 控制台中该 Firebase 项目的概览页面。

第 0 步（可选）：创建 GitHub 代码库和 Web 应用

如果您还没有位于 GitHub 代码库中的 Web 应用，或者您想通过示例应用试用该流程，请先初始化我们的某个示例（Next.js 或 Angular）：

npm init @apphosting

您可以使用 next dev 或 ng start 在本地运行示例应用。如需继续，请创建一个新的 GitHub 代码库，并将新初始化的示例代码推送到该代码库。

第 1 1 步：创建 App Hosting 后端

App Hosting 后端是 App Hosting 为构建和运行 Web 应用而创建的一组受管理的资源。

Firebase 控制台：在构建菜单中，选择 App Hosting，然后点击开始。

CLI：（版本 13.15.4 或更高版本）如需创建后端，请从本地项目目录的根目录运行以下命令，并提供您的 projectID 作为实参：

firebase apphosting:backends:create --project PROJECT_ID

无论是使用控制台还是 CLI，都请按照提示选择区域、设置 GitHub 连接，并配置以下基本部署设置：

  • 设置应用的根目录（默认为 /）

    这通常是 package.json 文件所在的位置。

  • 设置实时分支

    这是 GitHub 代码库中将部署到您的有效网址的分支。通常，功能分支或开发分支会合并到此分支中。

  • 接受或拒绝自动发布

    自动推出功能默认处于启用状态。后端创建完成后，您可以选择立即将应用部署到 App Hosting。

  • 为后端分配名称。

第 2 步：查看已部署的应用

创建后端时，Firebase 会为您提供一个免费的子网域，供最终用户访问您的 Web 应用。该子网域的格式为 backend-id--project-id.us-central1.hosted.app。

如需查看 Web 应用的网址，请查看 Firebase 控制台，或运行以下 CLI 命令：

firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID}

第 3 步：通过推送更改来触发发布

创建后端并获得实时网址后，您可以在每次将更改推送到 GitHub 代码库的实时分支时，触发新版 Web 应用的发布。如需测试 App Hosting 设置，请执行以下操作：

  1. 在 GitHub 中，将更改推送到 Web 应用的实时分支。
  2. 在 Firebase 控制台中打开 App Hosting 标签页，然后选择后端的查看信息中心。 表格列表会显示与因您的更改而触发的发布相关的特定提交。

后续步骤