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

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

准备工作

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

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

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

我们建议您设置一个单独的 Firebase 项目，用于测试和开发 Web 应用。在测试和开发期间，您需要保护生产网站，以防止项目资源（数据库、存储空间、规则、函数等）发生意外更改。

第 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"
    }
  }

使用 firebase serve 在本地进行测试（不推荐）

建议不要使用 firebase serve。我们建议使用 Firebase Local Emulator Suite 在本地进行测试。

使用 firebase serve 时，您的应用会与 Hosting 内容和配置以及函数（可选）的模拟后端进行交互，但对于所有其他项目资源，则与其实际后端交互。

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

   firebase serve --only hosting

   注意 ：如果运行带有 --only hosting 标志的此命令，您模拟的只是您的 Hosting 内容和配置。如果您还想模拟函数，请在运行此命令时指定 --only hosting,functions 标志。

2. 使用 CLI 返回的本地网址（通常为 http://localhost:5000）打开 Web 应用。

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

使用 firebase serve 在其他本地设备上进行测试

默认情况下，firebase serve 仅响应来自 localhost 的请求。这意味着您可以通过计算机的网络浏览器访问托管内容，但不能通过网络中的其他设备访问托管内容。如果您想要通过其他本地设备进行测试，请使用 --host 标志，如下所示：

firebase serve --host 0.0.0.0  // accepts requests to any host

第 2 步：预览和共享

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

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

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

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

   firebase hosting:channel:deploy CHANNEL_ID

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

   注意：您无需传递 --only hosting 标志，因为此命令只会部署您的 Hosting 内容和配置（以及重写配置中的“固定的”函数）。通过预览网址提供的应用始终会与实际项目资源交互（已部署的“固定的”函数除外）。

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_ID 和 TARGET_SITE_ID：这些是包含渠道的 Hosting 网站的 ID。

     • 对于默认 Hosting 网站，请使用您的 Firebase 项目 ID。
     • 您可以指定属于同一 Firebase 项目的网站，甚至可以指定属于不同 Firebase 项目的网站。

   • SOURCE_CHANNEL_ID：这是渠道的标识符，该渠道当前提供要部署到实际渠道的版本。

     • 对于实际渠道，请使用 live 作为渠道 ID。

2. 查看您的更改（下一步）。

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

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

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

   firebase deploy --only hosting

   注意 ：如果运行带有 --only hosting 标志的此命令，您部署的只是您的 Hosting 内容和配置（以及重写配置中的“固定的”函数）。如果您还希望部署其他项目资源或配置（例如后端触发的函数或 Cloud Storage 规则），请运行此命令，并在标志中使用逗号分隔列表（例如 --only hosting,storage）。

2. 查看您的更改（下一步）。

注意：对于 Spark 方案项目，Firebase 会阻止 Cloud Storage for Firebase 和 Firebase Hosting 上传和托管某些可执行文件类型：.exe、.dll 和 .bat 扩展名 (Windows)、.apk 扩展名 (Android) 和 .ipa 扩展名 (Apple)。此政策旨在防止我们的平台上出现滥用行为。Blaze 方案中的项目不受影响。如需了解详情，请参阅此常见问题解答。

第 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 提供。

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

删除文件

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

后续步骤

• 通过设置 GitHub 操作与 GitHub 集成，并迭代预览的内容。

• 了解更多托管功能：

  • 配置托管行为
  • 关联自定义网域
  • 提供动态内容和托管微服务

• 查看 Firebase CLI 的完整文档。

• 准备启动您的应用：

  • 在 Google Cloud 控制台中为您的项目设置预算提醒。
  • 在 Firebase 控制台中监控“用量和结算”信息中心，以全面了解您的项目在多个 Firebase 服务中的用量信息。您还可以访问 Hosting 使用量信息中心，以了解更详细的使用情况信息。
  • 查看 Firebase 发布核对清单。