App Hosting 使用入门

如果 GitHub 代码库中已有 Next.js 或 Angular 应用（Next.js 版本 13.5.x+ 或 Angular 18.2.x+) ，那么App Hosting 的入门过程非常简单，只需创建 App Hosting 后端，然后通过向实际分支推送来启动部署即可。如果您没有应用，请使用我们的某个示例应用来完成本指南中所述的步骤。

如需获得 AI 辅助，请将以下提示复制到 AI 编码代理（例如 Antigravity、Claude Code、Codex 和 Cursor）。 您可以自定义提示并与代理进行迭代。如需了解详细的安装信息，请访问 Firebase 代理技能 。 

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me use Firebase to host my web app. Set up my app to use Firebase, and then deploy my app.

本指南介绍了如何在 Firebase 控制台中设置 App Hosting，以便在每次向 GitHub 代码库提交新内容时 自动部署。完成此流程后，您将获得一个实际的 Next.js 或 Angular 示例应用，每当您向 GitHub 代码库的 main 分支提交新更改时，该应用都会重新部署。

虽然本指南重点介绍推荐的 Firebase 控制台流程，但还有 其他部署方式， 包括使用 Firebase CLI 部署本地代码，而无需 GitHub 连接。

第 1 步：创建演示代码库的分支

访问 https://github.com/firebase/apphosting-adapters，然后 选择 Fork。

第 2 步：创建 App Hosting 后端

  1. 在 Firebase 控制台中，依次前往 Hosting & Serverless > App Hosting。

  2. 点击开始使用 。

  3. 如果系统提示，请升级到随用随付 Blaze 定价方案，以使用App Hosting。

App Hosting 后端设置的屏幕截图。

按照提示完成以下步骤：

  • 选择主要区域（通常是距离用户最近的区域）。
  • 连接到 GitHub。选择您刚刚通过创建 firebase-framework-tools 代码库的分支而创建的代码库。
  • 将应用的根目录设置为以下其中一项：
  • 将实际分支设置为 main 。
  • 启用自动部署（默认情况下，自动部署处于启用状态）。
  • 为后端分配名称。
  • 选择运行时环境。默认情况下，系统会为您预先选择最新的推荐 Node.js 版本。
    • 配置 自动基础映像更新 (ABIU)。 ABIU 默认处于启用状态，并会自动将安全补丁应用于底层环境。您可以为运行时选择“未指定”，以停用 ABIU。
  • 创建新的 Firebase Web 应用。

选择完成并部署 。

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

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

在后端信息中心的后端信息 行中，选择指向实际后端的链接，以查看新网站：

后端信息行的屏幕截图，其中强调了实时应用链接。

第 4 步：通过推送更改来触发部署

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

  1. 在演示 GitHub 代码库的复刻中，前往演示版应用首页的源代码，进行任何可识别的修改，然后将更改推送到主分支。如需查找首页，请执行以下操作：

    • Next.js ：/starters/nextjs/basic/src/app/page.tsx
    • Angular ：/starters/angular/basic/src/app/pages/home/home.component.html

  2. 在 Firebase 控制台中，监控 App Hosting，因为 新更改会部署到生产环境。部署完成后，您可以在应用的首页中查看更改。

后续步骤