App Hosting 使用入门

对于 GitHub 代码库中现有的 Next.js 或 Angular 应用（Next.js 13 及更高版本或 Angular 17.2 及更高版本），App Hosting 的入门非常简单，就像创建 App Hosting 后端，然后通过推送到活跃分支开始发布一样简单。如果您没有应用，请使用我们的一个示例应用，完成本指南中描述的步骤。

准备工作

在设置 Firebase App Hosting 之前，您需要创建一个 Firebase 项目（如果您还没有项目），并升级到 Blaze 方案。

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

  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 控制台：从 Build 菜单中，选择 App Hosting，然后选择 Get started。

CLI：（版本 3.9 或更高版本）如需创建后端，请从本地项目的根目录运行以下命令，并提供您的项目 ID 作为参数（预览时，仅支持 us-central1 区域）：

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”标签页，然后选择后端的查看信息中心。表列表会显示与您的更改触发的发布关联的特定提交。

后续步骤