Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

在本地測試您的 Web 應用程序,與他人共享更改,然後實時部署

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

在部署到您的實時站點之前,您需要查看和測試您的更改。 Firebase 託管使您能夠在本地查看和測試更改並與模擬的後端項目資源進行交互。如果您需要您的團隊成員查看和測試您的更改,Hosting 可以為您的站點創建可共享的臨時預覽 URL。我們甚至支持通過拉取請求部署GitHub 集成

在你開始之前

完成託管入門頁面上列出的步驟,特別是以下任務:

  1. 安裝 Firebase CLI 或將其更新到最新版本。
  2. 將本地項目目錄(包含您的應用內容)連接到您的 Firebase 項目。

您可以選擇部署應用程序的託管內容和配置,但這不是此頁面上的步驟的先決條件。

第 1 步:本地測試

如果您正在進行快速迭代,或者您希望您的應用程序與模擬的後端項目資源進行交互,您可以在本地測試您的託管內容和配置。在本地測試時,Firebase 在本地託管的 URL 上為您的網絡應用提供服務。

Hosting 是Firebase Local Emulator Suite的一部分,它使您的應用能夠與您的模擬Hosting 內容和配置以及可選的模擬項目資源(函數、數據庫和規則)進行交互。

  1. (可選)默認情況下,您本地託管的應用程序將與真實的而非模擬的項目資源(函數、數據庫、規則等)進行交互。相反,您可以選擇連接您的應用程序以使用您配置的任何模擬項目資源。了解更多:實時數據庫|雲火庫|雲函數

  2. 從本地項目目錄的根目錄,運行以下命令:

    firebase emulators:start
  3. 在 CLI 返回的本地 URL(通常為http://localhost:5000 )打開您的 Web 應用程序。

  4. 要使用更改更新本地 URL,請刷新瀏覽器。

從其他本地設備測試

默認情況下,模擬器只響應來自localhost的請求。這意味著您將能夠從計算機的網絡瀏覽器訪問託管內容,但不能從網絡上的其他設備訪問。如果您想從其他本地設備進行測試,請像這樣配置您的firebase.json

"emulators": {
    // ...

    "hosting": {
      "port": 5000
      "host": "0.0.0.0"
    }
  }

第 2 步:預覽和分享

如果您希望其他人在上線之前查看對您的 Web 應用所做的更改,您可以使用預覽頻道。

在您部署到預覽頻道後,Firebase 會通過“預覽 URL”(一個可共享的臨時 URL)為您的網絡應用提供服務。使用預覽 URL 時,您的 Web 應用程序與您的所有項目資源的真實後端交互。

請注意,雖然預覽 URL 很難猜測(因為它們包含隨機哈希),但它們是公開的。因此,任何知道該 URL 的人都可以訪問它。

  1. 從本地項目目錄的根目錄,運行以下命令:

    firebase hosting:channel:deploy CHANNEL_ID

    CHANNEL_ID替換為不含空格的字符串(例如, feature_mission-2-mars )。此 ID 將用於構建與預覽頻道關聯的預覽 URL。

  2. 在 CLI 返回的預覽 URL 處打開您的 Web 應用程序。它看起來像這樣: PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app

  3. 要使用更改更新您的預覽 URL,請再次運行相同的命令。確保在命令中指定相同的CHANNEL_ID

了解管理預覽頻道,包括如何設置頻道的過期時間。

Firebase 託管支持 GitHub 操作,當您提交對拉取請求的更改時,該操作會自動創建和更新預覽 URL。了解如何設置和使用此 GitHub Action

第 3 步:實時部署

當您準備好與全世界分享您的更改時,請將您的託管內容和配置部署到您的直播頻道。根據您的用例,Firebase 為此步驟提供了幾個不同的選項(請參閱下面的選項)。

選項 1:從預覽頻道克隆到您的直播頻道

此選項可確保您將在預覽頻道中測試的確切內容和配置部署到直播頻道。了解有關克隆版本的更多信息。

  1. 從任何目錄,運行以下命令:

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    將每個佔位符替換為以下內容:

    • SOURCE_SITE_IDTARGET_SITE_ID :這些是包含頻道的託管站點的 ID。

      • 對於您的默認託管網站,請使用您的 Firebase 項目 ID。
      • 您可以指定位於同一 Firebase 項目甚至不同 Firebase 項目中的網站。
    • SOURCE_CHANNEL_ID :這是當前提供您要部署到直播頻道的版本的頻道的標識符。

      • 對於直播頻道,使用live作為頻道 ID。
  2. 查看您的更改(下一步)。

選項 2:從本地項目目錄部署到直播頻道

此選項使您可以靈活地調整特定於直播頻道的配置,或者即使您沒有使用預覽頻道也可以進行部署。

  1. 從本地項目目錄的根目錄,運行以下命令:

    firebase deploy --only hosting
  2. 查看您的更改(下一步)。

第 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 託管會自動將內容緩存在 CDN 上。如果您重新部署網站的內容,Firebase 會自動清除 CDN 中所有緩存的靜態內容,以便新請求接收您的新內容。

請注意,您可以配置動態內容的緩存

通過 HTTPS 提供服務

確保未在 Firebase 託管上託管的所有外部資源都通過 SSL (HTTPS) 加載,包括任何外部腳本。大多數瀏覽器不允許用戶加載“混合內容”(SSL 和非 SSL 流量)。

下一步