在本地测试您的 Web 应用、与他人共享更改内容,然后部署到实际网站

在部署到实际网站之前,您需要查看并测试所做的更改。借助 Firebase Hosting,您可以在本地查看和测试更改并与模拟后端项目资源交互。如果您需要团队成员查看并测试您的更改,Hosting 可以为您的网站创建可共享的临时预览网址。我们甚至支持 GitHub 集成通过拉取请求 (pull request) 进行部署。

准备工作

完成“Hosting 入门”页面上列出的步骤,尤其是以下任务:

  1. 安装 Firebase CLI 或将其更新为最新版本。
  2. 将本地项目目录(包含应用的内容)与 Firebase 项目关联。

您可以选择部署应用的 Hosting 内容和配置,但这对本页所述的步骤并不是必需的。

第 1 步:在本地测试

如果您要进行快速迭代,或者希望应用与模拟的后端项目资源进行交互,可以在本地测试 Hosting 内容和配置。在本地测试时,Firebase 会使用本地托管的网址提供您的 Web 应用。

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

  1. (可选)默认情况下,本地托管的应用会与实际(而非模拟)项目资源(函数、数据库、规则等)交互。您也可以选择关联应用,以使用您已配置的任何模拟项目资源。详细了解: Realtime Database | Cloud Firestore | Cloud Functions

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

    firebase emulators:start
  3. 使用 CLI 返回的本地网址(通常为 http://localhost:5000)打开 Web 应用。

  4. 如需使用所做的更改更新本地网址,请刷新浏览器。

通过其他本地设备进行测试

默认情况下,模拟器仅响应来自 localhost 的请求。这意味着您可以通过计算机的网络浏览器访问托管内容,但不能通过网络中的其他设备访问托管内容。如果您想要通过其他本地设备进行测试,请按如下方式配置 firebase.json

"emulators": {
    // ...

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

第 2 步:预览和共享

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

在预览渠道中实施部署后,Firebase 会通过“预览网址”提供您的 Web 应用,此网址是一个可共享的临时网址。使用预览网址时,您的 Web 应用会与所有项目资源的实际后端互动(重写配置中的“固定的”函数除外)。

请注意,尽管预览网址不易猜出(因为它们包含一个随机哈希),但它们是公开的。这样,知道网址的任何人都可以访问该网址。

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

    firebase hosting:channel:deploy CHANNEL_ID

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

  2. 使用 CLI 返回的预览网址打开您的 Web 应用。请参见以下示例: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. 如需使用所做更改更新预览网址,请再次运行上文所述的命令。请务必在命令中指定相同的 CHANNEL_ID

了解如何管理预览渠道,包括如何设置渠道的失效时间。

Firebase Hosting 支持如下 GitHub 操作:在您提交对拉取请求的更改时自动创建和更新预览网址。了解如何设置和使用此 GitHub 操作

第 3 步:部署到实际环境

当您准备好将更改共享给全世界用户后,请将您的 Hosting 内容和配置部署到实际渠道。Firebase 根据您的使用场景提供了几种不同的方案来完成此步骤(请参阅下面的方案)。

方案 1:从预览渠道克隆到实际渠道

利用此方案,您可以确保部署到实际渠道的是已在预览渠道中测试的那些内容和配置。详细了解如何克隆版本

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

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

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

    • SOURCE_SITE_IDTARGET_SITE_ID:这些是包含渠道的 Hosting 网站的 ID。

      • 对于默认 Hosting 网站,请使用您的 Firebase 项目 ID。
      • 您可以指定属于同一 Firebase 项目的网站,甚至可以指定属于不同 Firebase 项目的网站。
    • SOURCE_CHANNEL_ID:这是渠道的标识符,该渠道当前提供要部署到实际渠道的版本。

      • 对于实际渠道,请使用 live 作为渠道 ID。
  2. 查看您的更改(下一步)。

方案 2:从本地项目目录部署到实际渠道

采用此方案,您可以灵活调整特定于实际渠道的配置,也可以在不使用预览渠道的情况下进行部署。

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

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

第 4 步:查看对实际网站做出的更改

上述两种方案都可将 Hosting 内容和配置部署到以下网站:

  • Firebase 为默认 Hosting 网站和任何其他 Hosting 网站预配的子网域:
    SITE_ID.web.app(例如 PROJECT_ID.web.app
    SITE_ID.firebaseapp.com(例如 PROJECT_ID.firebaseapp.com

  • 已与 Hosting 网站关联的所有自定义网域

如需将部署范围限制在特定的 Hosting 网站,请在 CLI 命令中指定部署目标

其他部署活动和信息

为部署添加注释

您可以选择向部署作业添加注释。此注释将在 Firebase 控制台的 Hosting 信息中心内与其他部署信息一起显示。例如:

firebase deploy --only hosting -m "Deploying the best new feature ever."

添加部署前和部署后脚本任务

您可以选择将 shell 脚本关联到 firebase deploy 命令,以执行部署前任务或部署后任务。例如,部署后钩子可以让管理员知道系统部署了新的网站内容。如需了解详情,请参阅 Firebase CLI 文档

缓存已部署的内容

当请求访问静态内容时,Firebase Hosting 会自动将内容缓存在 CDN 上。如果您重新部署网站的内容,Firebase 会自动清除整个 CDN 上所有缓存的静态内容,以便新请求能够收到您的新内容。

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

通过 HTTPS 提供

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

后续步骤