App Hosting 使用入门

如果 GitHub 代码库中已有 Next.js 或 Angular 应用（Next.js 版本 13 或更高版本或 Angular 17.2 或更高版本），则开始使用 App Hosting 非常简单，只需创建 App Hosting 后端，然后通过推送到正式版分支来开始发布即可。如果您没有应用，请使用我们的一个示例应用，完成本指南中描述的步骤。

准备工作

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

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

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

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

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

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

  3. 点击继续。

  4. （可选）为您的项目设置 Google Analytics，以便在使用下列 Firebase 产品时能获得最佳体验：

    选择现有的 Google Analytics 账号，或者创建一个新账号。

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

  5. 点击创建项目（或者，如果您使用的是现有 Google Cloud 项目，则点击添加 Firebase）。

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

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

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

npm init @apphosting

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

第 1 步：创建 App Hosting 后端

App Hosting 后端是 App Hosting 为构建和运行 Web 应用而创建的托管资源集合。您可以使用 Firebase 控制台或 Firebase CLI 创建和列出 App Hosting 后端。

Firebase 控制台：从构建菜单中，依次选择 App Hosting（应用托管）和 Get started（开始）。

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

firebase apphosting:backends:create --project PROJECT_ID --location us-central1

无论是使用控制台还是 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} --location us-central1

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

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

  1. 在 GitHub 中，将更改推送到 Web 应用的正式版分支。
  2. 打开 Firebase 控制台中的 App Hosting 标签页，然后为您的后端选择查看信息中心。表格列表会显示与您所做的更改触发的发布相关联的具体提交。

后续步骤