在部署到您的實時站點之前,您需要查看和測試您的更改。 Firebase 託管使您能夠在本地查看和測試更改,並與模擬的後端項目資源進行交互。如果您需要您的隊友查看和測試您的更改,Hosting 可以為您的站點創建可共享的臨時預覽 URL。我們甚至支持通過拉取請求進行GitHub 集成部署。
在你開始之前
完成託管入門頁面上列出的步驟,特別是以下任務:
- 安裝 Firebase CLI 或將其更新到最新版本。
- 將本地項目目錄(包含您應用的內容)連接到您的 Firebase 項目。
您可以選擇部署應用程序的託管內容和配置,但這不是本頁步驟的先決條件。
第 1 步:本地測試
如果您正在進行快速迭代或者您希望您的應用程序與模擬的後端項目資源進行交互,您可以在本地測試您的託管內容和配置。在本地測試時,Firebase 會在本地託管的 URL 上提供您的 Web 應用程序。
Hosting 是Firebase Local Emulator Suite的一部分,它使您的應用程序能夠與您的模擬Hosting 內容和配置進行交互,還可以選擇與您的模擬項目資源(函數、數據庫和規則)進行交互。
(可選)默認情況下,您本地託管的應用程序將與真實而非模擬的項目資源(函數、數據庫、規則等)交互。您可以選擇連接您的應用程序以使用您已配置的任何模擬項目資源。了解更多:實時數據庫|雲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 步:預覽和分享
如果您希望其他人在上線之前查看您的網絡應用程序的更改,您可以使用預覽頻道。
在您部署到預覽通道後,Firebase 會在“預覽 URL”提供您的網絡應用程序,這是一個可共享的臨時 URL。使用預覽 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 託管支持 GitHub 操作,當您提交對拉取請求的更改時,該操作會自動創建和更新預覽 URL。了解如何設置和使用此 GitHub 操作。
第 3 步:實時部署
當您準備好與世界分享您的更改時,將您的託管內容和配置部署到您的直播頻道。 Firebase 根據您的用例為此步驟提供了幾個不同的選項(請參閱下面的選項)。
選項 1:從預覽頻道克隆到您的實時頻道
此選項讓您確信您正在將您在預覽頻道中測試過的內容和配置部署到實時頻道。了解有關克隆版本的更多信息。
從任何目錄運行以下命令:
firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live
將每個佔位符替換為以下內容:
SOURCE_SITE_ID和TARGET_SITE_ID :這些是包含頻道的託管站點的 ID。
- 對於您的默認託管站點,請使用您的 Firebase 項目 ID。
- 您可以指定位於同一 Firebase 項目甚至不同 Firebase 項目中的站點。
SOURCE_CHANNEL_ID :這是當前正在為您要部署到實時頻道的版本提供服務的頻道的標識符。
- 對於直播頻道,使用
live
作為頻道 ID。
- 對於直播頻道,使用
查看您的更改(下一步)。
選項 2:從本地項目目錄部署到直播頻道
此選項使您可以靈活地調整特定於直播頻道的配置,或者即使您沒有使用預覽頻道也可以進行部署。
從本地項目目錄的根目錄運行以下命令:
firebase deploy --only hosting
查看您的更改(下一步)。
第 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 Hosting 會自動將內容緩存在 CDN 上。如果您重新部署站點內容,Firebase 會自動清除 CDN 中所有緩存的靜態內容,以便新請求接收您的新內容。
請注意,您可以配置動態內容的緩存。
通過 HTTPS 服務
確保所有未託管在 Firebase 託管上的外部資源都通過 SSL (HTTPS) 加載,包括任何外部腳本。大多數瀏覽器不允許用戶加載“混合內容”(SSL 和非 SSL 流量)。
下一步
通過設置 GitHub Action與 GitHub 集成並迭代您的預覽內容。
了解更多託管功能:
查看Firebase CLI的完整文檔。
準備啟動您的應用程序:
- 在 Google Cloud Console 中為您的項目設置預算提醒。
- 監控 Firebase 控制台中的使用情況和計費儀表板,以全面了解您的項目在多個 Firebase 服務中的使用情況。您還可以訪問託管使用儀表板以獲取更詳細的使用信息。
- 查看Firebase 啟動清單。