在部署到您的实时站点之前,您需要查看和测试您的更改。 Firebase 托管使您能够在本地查看和测试更改,并与模拟的后端项目资源进行交互。如果您需要您的队友查看和测试您的更改,Hosting 可以为您的站点创建可共享的临时预览 URL。我们甚至支持通过拉取请求进行GitHub 集成部署。
在你开始之前
完成托管入门页面上列出的步骤,特别是以下任务:
- 安装 Firebase CLI 或将其更新到最新版本。
- 将本地项目目录(包含您应用的内容)连接到您的 Firebase 项目。
您可以选择部署应用程序的托管内容和配置,但这不是本页步骤的先决条件。
第 1 步:本地测试
如果您正在进行快速迭代或者您希望您的应用程序与模拟的后端项目资源进行交互,您可以在本地测试您的托管内容和配置。在本地测试时,Firebase 会在本地托管的 URL 上提供您的 Web 应用程序。
Hosting 是Firebase Local Emulator Suite的一部分,它使您的应用程序能够与您的模拟Hosting 内容和配置进行交互,还可以选择与您的模拟项目资源(函数、数据库和规则)进行交互。
(可选)默认情况下,您本地托管的应用程序将与真实而非模拟的项目资源(函数、数据库、规则等)交互。您可以选择连接您的应用程序以使用您已配置的任何模拟项目资源。了解更多:实时数据库|云Firestore |云端功能
从本地项目目录的根目录运行以下命令:
firebase emulators:start
在 CLI 返回的本地 URL(通常为
http://localhost:5000
)处打开您的 Web 应用程序。要使用更改更新本地 URL,请刷新浏览器。
从其他本地设备测试
默认情况下,模拟器仅响应来自localhost
的请求。这意味着您将能够从计算机的 Web 浏览器访问您托管的内容,但不能从网络上的其他设备访问。如果您想从其他本地设备进行测试,请像这样配置您的firebase.json
:
"emulators": {
// ...
"hosting": {
"port": 5000
"host": "0.0.0.0"
}
}
使用firebase serve
时,您的应用程序与您的托管内容和配置(以及可选功能)的模拟后端交互,但与所有其他项目资源的真实后端交互。
从本地项目目录的根目录运行以下命令:
firebase serve --only hosting
在 CLI 返回的本地 URL(通常为
http://localhost:5000
)处打开您的 Web 应用程序。要使用更改更新本地 URL,请刷新浏览器。
使用firebase serve
从其他本地设备进行测试
默认情况下, firebase serve
仅响应来自localhost
的请求。这意味着您将能够从计算机的 Web 浏览器访问您托管的内容,但不能从网络上的其他设备访问。如果您想从其他本地设备进行测试,请使用--host
标志,如下所示:
firebase serve --host 0.0.0.0 // accepts requests to any host
第 2 步:预览和分享
如果您希望其他人在上线之前查看您的网络应用程序的更改,您可以使用预览频道。
在您部署到预览通道后,Firebase 会在“预览 URL”提供您的网络应用程序,这是一个可共享的临时 URL。使用预览 URL 时,您的 Web 应用程序会与所有项目资源的真实后端进行交互。
请注意,虽然预览 URL 很难猜测(因为它们包含随机哈希),但它们是公开的。因此,任何知道该 URL 的人都可以访问它。
从本地项目目录的根目录运行以下命令:
firebase hosting:channel:deploy CHANNEL_ID
将CHANNEL_ID替换为不含空格的字符串(例如,
feature_mission-2-mars
)。此 ID 将用于构建与预览频道关联的预览 URL。在 CLI 返回的预览 URL 处打开您的 Web 应用程序。它看起来像这样:
PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app
要使用更改更新预览 URL,请再次运行相同的命令。确保在命令中指定相同的
CHANNEL_ID
。
了解如何管理预览频道,包括如何设置频道的到期时间。
Firebase 托管支持 GitHub 操作,当您提交对拉取请求的更改时,该操作会自动创建和更新预览 URL。了解如何设置和使用此 GitHub 操作。
第 3 步:实时部署
当您准备好与世界分享您的更改时,将您的托管内容和配置部署到您的直播频道。 Firebase 根据您的用例为此步骤提供了几个不同的选项(请参阅下面的选项)。
选项 1:从预览频道克隆到您的实时频道
此选项让您确信您正在将您在预览频道中测试过的内容和配置部署到实时频道。了解有关克隆版本的更多信息。
从任何目录运行以下命令:
firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live
将每个占位符替换为以下内容:
SOURCE_SITE_ID和TARGET_SITE_ID :这些是包含频道的托管站点的 ID。
- 对于您的默认托管站点,请使用您的 Firebase 项目 ID。
- 您可以指定位于同一 Firebase 项目甚至不同 Firebase 项目中的网站。
SOURCE_CHANNEL_ID :这是当前正在为您要部署到实时频道的版本提供服务的频道的标识符。
- 对于直播频道,使用
live
作为频道 ID。
- 对于直播频道,使用
查看您的更改(下一步)。
选项 2:从本地项目目录部署到直播频道
此选项使您可以灵活地调整特定于直播频道的配置,或者即使您没有使用预览频道也可以进行部署。
从本地项目目录的根目录运行以下命令:
firebase deploy --only hosting
查看您的更改(下一步)。
第 4 步:在您的实时网站上查看您的更改
以上两个选项都将您的托管内容和配置部署到以下站点:
Firebase 为您的默认托管站点和任何其他托管站点提供的子域:
SITE_ID .web.app
(如PROJECT_ID .web.app
)
SITE_ID .firebaseapp.com
(如PROJECT_ID .firebaseapp.com
)您已连接到托管站点的任何自定义域
要将部署限制到特定的托管站点,请在 CLI 命令中指定部署目标。
其他部署活动和信息
为部署添加评论
您可以选择向部署添加评论。此评论将与其他部署信息一起显示在 Firebase 控制台的托管仪表板上。例如:
firebase deploy --only hosting -m "Deploying the best new feature ever."
添加部署前和部署后脚本任务
您可以选择将 shell 脚本连接到firebase deploy
命令以执行部署前或部署后任务。例如,部署后挂钩可以通知管理员新站点内容部署。有关详细信息,请参阅Firebase CLI 文档。
缓存部署的内容
当请求静态内容时,Firebase Hosting 会自动将内容缓存在 CDN 上。如果您重新部署站点内容,Firebase 会自动清除 CDN 中所有缓存的静态内容,以便新请求接收您的新内容。
请注意,您可以配置动态内容的缓存。
通过 HTTPS 服务
确保所有未托管在 Firebase 托管上的外部资源都通过 SSL (HTTPS) 加载,包括任何外部脚本。大多数浏览器不允许用户加载“混合内容”(SSL 和非 SSL 流量)。
下一步
通过设置 GitHub Action与 GitHub 集成并迭代您的预览内容。
了解更多托管功能:
查看Firebase CLI的完整文档。
准备启动您的应用程序:
- 在 Google Cloud Console 中为您的项目设置预算提醒。
- 监控 Firebase 控制台中的使用情况和计费仪表板,以全面了解您的项目在多个 Firebase 服务中的使用情况。您还可以访问托管使用仪表板以获取更详细的使用信息。
- 查看Firebase 启动清单。