Check out what’s new from Firebase at Google I/O 2022. Learn more

在本地测试,共享更改,然后实时部署

在部署到您的实时站点之前,您需要查看和测试您的更改。 Firebase 托管使您能够在本地查看和测试更改并与模拟的后端项目资源进行交互。如果您需要您的团队成员查看和测试您的更改,Hosting 可以为您的站点创建可共享的临时预览 URL。我们甚至支持通过拉取请求部署GitHub 集成

在你开始之前

完成托管入门页面上列出的步骤,特别是以下任务:

  1. 安装 Firebase CLI 或将其更新到最新版本。
  2. 将本地项目目录(包含您的应用内容)连接到您的 Firebase 项目。

您可以选择部署应用程序的托管内容和配置,但这不是此页面上的步骤的先决条件。

第 1 步:本地测试

如果您正在进行快速迭代,或者您希望您的应用程序与模拟的后端项目资源进行交互,您可以在本地测试您的托管内容和配置。在本地测试时,Firebase 在本地托管的 URL 上为您的网络应用提供服务。

Hosting 是Firebase Local Emulator Suite的一部分,它使您的应用能够与您的模拟Hosting 内容和配置以及可选的模拟项目资源(函数、数据库和规则)进行交互。

  1. (可选)默认情况下,您本地托管的应用程序将与真实的而非模拟的项目资源(函数、数据库、规则等)进行交互。相反,您可以选择连接您的应用程序以使用您配置的任何模拟项目资源。了解更多:实时数据库|云火库|云函数

  2. 从本地项目目录的根目录,运行以下命令:

    firebase emulators:start
  3. 在 CLI 返回的本地 URL(通常为http://localhost:5000 )打开您的 Web 应用程序。

  4. 要使用更改更新本地 URL,请刷新浏览器。

从其他本地设备测试

默认情况下,模拟器只响应来自localhost的请求。这意味着您将能够从计算机的网络浏览器访问托管内容,但不能从网络上的其他设备访问。如果您想从其他本地设备进行测试,请像这样配置您的firebase.json

"emulators": {
    // ...

    "hosting": {
      "port": 5000
      "host": "0.0.0.0"
    }
  }

第 2 步:预览和分享

如果您希望其他人在上线之前查看对您的 Web 应用所做的更改,您可以使用预览频道。

在您部署到预览频道后,Firebase 会通过“预览 URL”(一个可共享的临时 URL)为您的网络应用提供服务。使用预览 URL 时,您的 Web 应用程序与您的所有项目资源的真实后端交互。

请注意,虽然预览 URL 很难猜测(因为它们包含随机哈希),但它们是公开的。因此,任何知道该 URL 的人都可以访问它。

  1. 从本地项目目录的根目录,运行以下命令:

    firebase hosting:channel:deploy CHANNEL_ID

    CHANNEL_ID替换为不含空格的字符串(例如, feature_mission-2-mars )。此 ID 将用于构建与预览频道关联的预览 URL。

  2. 在 CLI 返回的预览 URL 处打开您的 Web 应用程序。它看起来像这样: PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app

  3. 要使用更改更新您的预览 URL,请再次运行相同的命令。确保在命令中指定相同的CHANNEL_ID

了解管理预览频道,包括如何设置频道的过期时间。

Firebase 托管支持 GitHub 操作,当您提交对拉取请求的更改时,该操作会自动创建和更新预览 URL。了解如何设置和使用此 GitHub Action

第 3 步:实时部署

当您准备好与全世界分享您的更改时,请将您的托管内容和配置部署到您的直播频道。根据您的用例,Firebase 为此步骤提供了几个不同的选项(请参阅下面的选项)。

选项 1:从预览频道克隆到您的直播频道

此选项可确保您将在预览频道中测试的确切内容和配置部署到直播频道。了解有关克隆版本的更多信息。

  1. 从任何目录,运行以下命令:

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    将每个占位符替换为以下内容:

    • SOURCE_SITE_IDTARGET_SITE_ID :这些是包含频道的托管站点的 ID。

      • 对于您的默认托管网站,请使用您的 Firebase 项目 ID。
      • 您可以指定位于同一 Firebase 项目甚至不同 Firebase 项目中的网站。
    • SOURCE_CHANNEL_ID :这是当前提供您要部署到直播频道的版本的频道的标识符。

      • 对于直播频道,使用live作为频道 ID。
  2. 查看您的更改(下一步)。

选项 2:从本地项目目录部署到直播频道

此选项使您可以灵活地调整特定于直播频道的配置,或者即使您没有使用预览频道也可以进行部署。

  1. 从本地项目目录的根目录,运行以下命令:

    firebase deploy --only hosting
  2. 查看您的更改(下一步)。

第 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 托管会自动将内容缓存在 CDN 上。如果您重新部署网站的内容,Firebase 会自动清除 CDN 中所有缓存的静态内容,以便新请求接收您的新内容。

请注意,您可以配置动态内容的缓存

通过 HTTPS 提供服务

确保未在 Firebase 托管上托管的所有外部资源都通过 SSL (HTTPS) 加载,包括任何外部脚本。大多数浏览器不允许用户加载“混合内容”(SSL 和非 SSL 流量)。

下一步