在部署到實時站點之前,您需要查看並測試您的更改。 Firebase 託管使您能夠在本地查看和測試更改並與模擬的後端項目資源進行交互。如果您需要您的團隊成員查看和測試您的更改,託管可以為您的網站創建可共享的臨時預覽 URL。我們甚至支持GitHub 集成以通過拉取請求進行部署。
在你開始之前
完成託管入門頁面上列出的步驟,特別是以下任務:
- 安裝 Firebase CLI 或將其更新到最新版本。
- 將本地項目目錄(包含應用的內容)連接到您的 Firebase 項目。
您可以選擇部署應用程序的託管內容和配置,但這不是此頁面上的步驟的先決條件。
第1步:本地測試
如果您正在進行快速迭代或者希望您的應用程序與模擬的後端項目資源進行交互,您可以在本地測試您的託管內容和配置。在本地測試時,Firebase 在本地託管的 URL 上為您的 Web 應用提供服務。
Hosting 是Firebase Local Emulator Suite的一部分,它使您的應用能夠與模擬的託管內容和配置以及可選的模擬項目資源(函數、數據庫和規則)進行交互。
(可選)默認情況下,您的本地託管應用程序將與真實的而非模擬的項目資源(函數、數據庫、規則等)進行交互。您可以選擇連接您的應用程序以使用您已配置的任何模擬項目資源。了解更多:實時數據庫|雲Firestore |雲功能
從本地項目目錄的根目錄中,運行以下命令:
firebase emulators:start
通過 CLI 返回的本地 URL(通常為
http://localhost:5000
)打開您的 Web 應用程序。要更新本地 URL 的更改,請刷新瀏覽器。
從其他本地設備進行測試
默認情況下,模擬器僅響應來自localhost
的請求。這意味著您將能夠從計算機的網絡瀏覽器訪問託管內容,但不能從網絡上的其他設備訪問託管內容。如果您想從其他本地設備進行測試,請像這樣配置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
的請求。這意味著您將能夠從計算機的網絡瀏覽器訪問託管內容,但不能從網絡上的其他設備訪問託管內容。如果您想從其他本地設備進行測試,請使用--host
標誌,如下所示:
firebase serve --host 0.0.0.0 // accepts requests to any host
第 2 步:預覽並分享
如果您希望其他人在上線之前查看您的 Web 應用程序的更改,您可以使用預覽通道。
部署到預覽通道後,Firebase 會通過“預覽 URL”為您的 Web 應用提供服務,這是一個可共享的臨時 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 Action 。
第 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 集成並通過設置 GitHub Action迭代您預覽的內容。
了解更多託管功能:
查看Firebase CLI的完整文檔。
準備啟動您的應用程序:
- 在 Google Cloud Console 中為您的項目設置預算提醒。
- 監控 Firebase 控制台中的使用情況和計費信息中心,全面了解項目在多個 Firebase 服務中的使用情況。您還可以訪問託管使用情況儀表板以獲取更詳細的使用信息。
- 查看Firebase 啟動清單。