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 控制台中,前往托管和无服务器 > App Hosting。

  2. 点击开始使用。

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

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

按照提示完成以下步骤:

  • 选择一个主要区域(通常是距离用户最近的区域)。
  • 关联到 GitHub。选择您刚刚通过创建 apphosting-adapters 代码库的分支而创建的代码库。
  • 将应用的根目录设置为以下任一目录:
  • 将实时分支设置为 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,因为新更改已发布到生产环境。发布完成后,您可以在应用的首页中查看所做的更改。

后续步骤