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

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

在你開始之前

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

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

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

第1步:本地測試

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

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

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

  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”為您的 Web 應用提供服務,這是一個可共享的臨時 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 Hosting 會自動在 CDN 上緩存內容。如果您重新部署網站的內容,Firebase 會自動清除 CDN 上所有緩存的靜態內容,以便新請求接收您的新內容。

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

通過 HTTPS 提供服務

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

下一步