如果 GitHub 代码库中已有 Next.js 或 Angular 应用(Next.js 版本 13 或更高版本或 Angular 17.2 或更高版本),则开始使用 App Hosting 非常简单,只需创建 App Hosting 后端,然后通过推送到正式版分支来开始发布即可。如果您没有应用,请使用我们的某个示例应用,按照本指南中介绍的步骤操作。
准备工作
您必须先创建一个 Firebase 项目(如果您还没有),然后升级到 Blaze 方案,然后才能设置 Firebase App Hosting。
如需创建项目,请执行以下操作:
-
在 Firebase 控制台中,点击添加项目。
-
如需将 Firebase 资源添加到现有 Google Cloud 项目,请输入该项目的名称或从下拉菜单中选择该项目。
-
如需创建新项目,请输入要使用的项目名称。您也可以视需要修改项目名称下方显示的项目 ID。
-
-
如果看到相关提示,请查看并接受 Firebase 条款。
-
点击继续。
-
(可选)为您的项目设置 Google Analytics,以便在使用下列 Firebase 产品时能获得最佳体验:
选择现有的 Google Analytics 账号,或者创建一个新账号。
如果您选择创建一个新账号,请选择 Analytics 报告位置,然后接受项目的数据共享设置和 Google Analytics 条款。
-
点击创建项目(或者,如果您使用的是现有 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 设置进行测试,请执行以下操作:
- 在 GitHub 中,将更改推送到 Web 应用的正式版分支。
- 打开 Firebase 控制台中的 App Hosting 标签页,然后为您的后端选择查看信息中心。表格列表会显示与您所做的更改触发的发布相关联的具体提交。
后续步骤
- 深入了解:完成一个 Firebase Codelab,将托管应用与 Firebase Authentication 和 Google AI 功能集成:Next.js | Angular
- 关联自定义网域。
- 配置后端。
- 监控发布情况、网站使用情况和日志。