在本地測試您的 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_ID和TARGET_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 流量）。

下一步