在部署到实时站点之前,您需要查看并测试您的更改。 Firebase Hosting使您可以在本地查看和测试更改,并与模拟的后端项目资源进行交互。如果您需要队友查看和测试您的更改,托管可以为您的站点创建可共享的临时预览URL。我们甚至支持GitHub集成,以通过拉取请求进行部署。
在你开始之前
完成“托管入门”页面上列出的步骤,尤其是以下任务:
- 将Firebase CLI安装或更新为最新版本。
- 将本地项目目录(包含应用程序的内容)连接到Firebase项目。
您可以选择部署应用程序的主机内容和配置,但这不是此页面上步骤的前提。
第1步:本地测试
如果要进行快速迭代,或者希望您的应用程序与模拟的后端项目资源进行交互,则可以在本地测试托管内容和配置。在本地进行测试时,Firebase会通过本地托管的URL为您的Web应用提供服务。
托管是Firebase Local Emulator Suite的一部分, Firebase Local Emulator Suite使您的应用可以与仿真的托管内容和配置以及可选的仿真项目资源(函数,数据库和规则)进行交互。请注意,本地仿真器套件尚不支持仿真存储。
(可选)默认情况下,您本地托管的应用将与真实的而非仿真的项目资源(功能,数据库,规则等)进行交互。您可以选择连接您的应用程序,以使用您配置的任何模拟项目资源。了解更多: 实时数据库| Cloud 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:预览并分享
如果希望其他人在上线之前查看对Web应用程序的更改,则可以使用预览频道。
部署到预览频道后,Firebase会通过“预览URL”(一个可共享的临时URL)为您的Web应用提供服务。使用预览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 Hosting支持GitHub Action,当您对拉取请求进行更改时,该动作会自动创建和更新预览URL。了解如何设置和使用此GitHub Action 。
步骤3:实时部署
当您准备好与世界分享您的更改时,请将托管内容和配置部署到您的直播频道。 Firebase根据您的用例为该步骤提供了几个不同的选项(请参阅下面的选项)。
选项1:从预览频道克隆到直播频道
此选项可确保您将在预览频道中测试的确切内容和配置部署到实时频道。了解有关克隆版本的更多信息。
在任何目录中,运行以下命令:
firebase hosting:clone SOURCE_SITE:SOURCE_CHANNEL_ID TARGET_SITE:live
将每个占位符替换为以下内容:
SOURCE_SITE和TARGET_SITE :这些是包含通道的托管站点的名称。
- 对于默认的托管站点,请使用Firebase项目ID。
- 您可以指定相同Firebase项目中的站点,甚至可以指定不同Firebase项目中的站点。
SOURCE_CHANNEL_ID :这是该频道的SOURCE_CHANNEL_ID ,该频道当前正在提供您要部署到直播频道的版本。
- 对于直播频道,请使用
live
作为频道ID。
- 对于直播频道,请使用
查看您的更改(下一步)。
选项2:从本地项目目录部署到实时频道
通过此选项,即使您没有使用预览频道,也可以灵活调整特定于直播频道的配置或进行部署。
在本地项目目录的根目录中,运行以下命令:
firebase deploy --only hosting
查看您的更改(下一步)。
第4步:在实时网站上查看您的更改
上面的两个选项都将您的主机内容和配置部署到以下站点:
您的默认托管网站和任何其他托管网站的Firebase设置的子域:
SITE_NAME .web.app
(例如PROJECT_ID .web.app
)
SITE_NAME .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集成,并通过设置GitHub Action来迭代预览的内容。
了解更多托管功能:
查看Firebase CLI的完整文档。
准备启动您的应用程序:
- 在Google Cloud控制台中为您的项目设置预算警报。
- 在Firebase控制台中监控您的使用情况和结算信息中心。您还可以监视“主机使用情况”仪表板。
- 查看Firebase启动核对表。