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

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

准备工作

请完成 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 操作

第 3 步:部署到实际环境

当您准备好与所有人共享更改时,请部署您的 Hosting 将内容和配置添加到您的直播频道Firebase 根据您的使用场景提供了几种不同的方案来完成此步骤(请参阅下面的方案)。

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

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

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

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

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

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

      • 对于默认的 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 网站,请执行以下操作: 指定部署目标

其他部署活动和信息

为部署添加注释

您可以选择向部署作业添加注释。此评论将与 关于 GCP 控制台中 Hosting 信息中心 (位于 Firebase 控制台中)。例如:

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

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

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

缓存已部署的内容

当请求获取静态内容时,Firebase Hosting 会自动 在 CDN 上缓存内容。如果您重新部署网站的内容 自动清除整个 CDN 中所有缓存的静态内容, 请求会收到您的新内容。

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

通过 HTTPS 提供

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

删除文件

Firebase Hosting 中,如要从部署的网站删除所选文件,一个常用方法是先在本地删除文件,然后重新部署。

后续步骤