App Hosting 使用入门

使用现有的 Next.js 或 Angular 应用（Next.js 13 及更高版本或 Angular 17.2 及更高版本） 在 GitHub 代码库中，App Hosting 可作为 只需创建一个 App Hosting 后端，然后启动一个 进行部署。如果你没有应用，请使用 我们的示例应用，以便完成本指南中描述的步骤。

准备工作

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

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

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

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

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

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

  3. 点击继续。

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

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

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

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

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 应用。您可以创建并列出 App Hosting 后端（使用 Firebase 控制台），或 Firebase CLI。

Firebase 控制台：从 Build 菜单中，选择 App Hosting，然后 开始使用。

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 代码库的活动分支。要执行 App Hosting 设置测试：

  1. 在 GitHub 中，将更改推送到 Web 应用的活动分支。
  2. 打开 App Hosting 个标签页： Firebase 控制台，然后选择后端的查看信息中心。 表列表显示了与发布关联的特定提交 更改触发后的结果。

后续步骤