在本機測試網頁應用程式、與他人共用變更，然後即時部署

在部署至實際網站前，建議您查看並測試所做的變更。Firebase Hosting 可讓您在本機查看及測試變更，並與模擬的後端專案資源互動。如果您需要同事查看及測試變更內容，Hosting 可以為網站建立可供共用的臨時預覽網址。我們甚至支援GitHub 整合，可透過提取要求進行部署。

事前準備

完成Hosting「開始使用」頁面所列步驟，特別是下列工作：

1. 安裝或更新至最新版的 Firebase CLI。
2. 將本機專案目錄 (包含應用程式內容) 連結至 Firebase 專案。

您可以選擇部署應用程式的 Hosting 內容和設定，但這不是完成本頁步驟的必要條件。

建議您設定專用的 Firebase 專案，用於測試及開發網頁應用程式。您需要保護實際工作環境網站，避免在測試和開發期間不小心變更專案資源 (資料庫、儲存空間、規則、函式等)。

步驟 1：在本機測試

如果您需要快速疊代，或是希望應用程式與模擬的後端專案資源互動，可以直接在本機測試 Hosting 內容和設定。在本機測試時，Firebase 會透過本機代管的網址提供網頁應用程式。

Hosting 是 Firebase Local Emulator Suite 的一部分，可讓應用程式與模擬的 Hosting 內容和設定互動，以及視需要與模擬的專案資源 (函式、資料庫和規則) 互動。

1. (選用) 根據預設，本機代管的應用程式會與實際 (而非模擬) 的專案資源 (函式、資料庫、規則等) 互動。您可以選擇連結應用程式，以便使用您已設定的任何模擬專案資源。瞭解詳情： Realtime Database | Cloud Firestore | Cloud Functions

2. 在本機專案目錄的根目錄中執行下列指令：

   firebase emulators:start

3. 在 CLI 傳回的本機網址 (通常為 http://localhost:5000) 中開啟網路應用程式。

4. 如要更新本機網址並套用變更，請重新整理瀏覽器。

透過其他本機裝置進行測試

根據預設，模擬器只會回應 localhost 的要求。也就是說，您可以透過電腦的網路瀏覽器存取託管內容，但無法透過網路上的其他裝置存取。如果您想透過其他本機裝置進行測試，請按照下列方式設定 firebase.json：

"emulators": {
    // ...

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

使用 firebase serve 在本機測試(不建議)

firebase serve 不建議使用。建議您改為在本機測試 Firebase Local Emulator Suite。

使用 firebase serve 時，應用程式會與模擬的後端互動，以便處理 Hosting 內容和設定 (以及選用的函式)，但會使用實際的後端處理所有其他專案資源。

1. 在本機專案目錄的根目錄中執行下列指令：

   firebase serve --only hosting

   注意： 如果您搭配 --only hosting 旗標執行這項指令，就只能模擬 Hosting 內容和設定。如果您也想模擬函式，請使用 --only hosting,functions 標記執行這項指令。

2. 在 CLI 傳回的本機網址 (通常為 http://localhost:5000) 中開啟網路應用程式。

3. 如要更新本機網址並套用變更，請重新整理瀏覽器。

使用 firebase serve 從其他本機裝置進行測試

根據預設，firebase serve 只會回應 localhost 提出的要求。也就是說，您可以透過電腦的網路瀏覽器存取託管內容，但無法透過網路上的其他裝置存取。如要從其他本機裝置進行測試，請使用 --host 標記，如下所示：

firebase serve --host 0.0.0.0  // accepts requests to any host

步驟 2：預覽及分享

如果您想讓其他人查看網路應用程式變更內容，可以在正式發布前使用預覽管道。

部署至預覽管道後，Firebase 會透過「預覽網址」提供網頁應用程式，這是可共用的臨時網址。使用預覽網址時，您的網頁應用程式會與所有專案資源的實際後端互動 (除了重寫設定中任何「固定」函式)。

請注意，雖然預覽網址包含隨機雜湊，因此不易猜測，但仍屬於公開資訊。因此，只要知道網址，任何人都能存取該網址。

1. 在本機專案目錄的根目錄中執行下列指令：

   firebase hosting:channel:deploy CHANNEL_ID

   將 CHANNEL_ID 替換為不含空格的字串 (例如 feature_mission-2-mars)。這個 ID 會用來建構與預覽管道相關聯的預覽網址。

   注意： 您不需要傳遞 --only hosting 旗標，因為這個指令「只」會部署 Hosting 內容和設定 (以及重寫設定中任何「固定」函式)。透過預覽網址提供的應用程式「一律」會與實際的專案資源互動 (已部署的「固定」函式除外)。

2. 在 CLI 傳回的預覽網址中開啟網頁應用程式。如下所示：PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

3. 如要更新預覽網址，請再次執行相同指令。請務必在指令中指定相同的 CHANNEL_ID。

瞭解如何管理預覽頻道，包括如何設定頻道的到期日。

Firebase Hosting 支援 GitHub Action，可在您將變更提交至提取要求時，自動建立及更新預覽網址。瞭解如何設定及使用這個 GitHub Action。

步驟 3：部署直播

準備好與全世界分享變更內容時，請將 Hosting 內容和設定部署至直播頻道。Firebase 會根據您的用途提供幾種不同的選項 (請參閱下方的選項)。

選項 1：從預覽頻道複製至直播頻道

這項選項可讓你放心，在直播頻道中部署預覽頻道中測試的確切內容和設定。進一步瞭解複製版本。

1. 在任何目錄中執行下列指令：

   firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

   將每個預留位置替換為下列內容：

   • SOURCE_SITE_ID 和 TARGET_SITE_ID：這是包含頻道的 Hosting 網站 ID。

     • 如要使用預設 Hosting 網站，請使用 Firebase 專案 ID。
     • 您可以指定位於同一 Firebase 專案中的網站，甚至是位於不同 Firebase 專案中的網站。

   • SOURCE_CHANNEL_ID：這是目前提供您要部署至直播頻道的版本的頻道 ID。

     • 如為直播頻道，請使用 live 做為頻道 ID。

2. 查看變更 (後續步驟)。

方法 2：從本機專案目錄部署至直播頻道

這個選項可讓你靈活調整直播頻道的特定設定，即使未使用預先發布版頻道也能部署。

1. 在本機專案目錄的根目錄中執行下列指令：

   firebase deploy --only hosting

   注意： 如果您搭配 --only hosting 旗標執行這項指令，就只會部署 Hosting 內容和設定 (以及重寫設定中任何「固定」函式)。如果您也想部署其他專案資源或設定 (例如後端觸發函式或 Cloud Storage 規則)，請在標記中使用逗號分隔的清單執行此指令 (例如 --only hosting,storage)。

2. 查看變更 (後續步驟)。

注意： 對於 Spark 方案專案，Firebase 會阻擋 Cloud Storage for Firebase 和 Firebase Hosting 上傳及代管 Windows (具有 .exe、.dll 和 .bat 副檔名的檔案)、Android (.apk 副檔名的檔案) 和 Apple (.ipa 副檔名的檔案) 的特定可執行檔案類型。這項政策旨在防止平台上發生濫用行為。使用 Blaze 方案的專案不會受到影響。詳情請參閱這篇常見問題文章。

步驟 4：在實際網站上查看變更

上述兩種選項都會將 Hosting 內容和設定部署至下列網站：

• 預設 Hosting 網站和任何其他 Hosting 網站的 Firebase 佈建子網域：
  SITE_ID.web.app (例如 PROJECT_ID.web.app)
  SITE_ID.firebaseapp.com (例如 PROJECT_ID.firebaseapp.com)

• 您已連結至 Hosting 網站的任何自訂網域

如要將部署作業限制在特定 Hosting 網站，請在 CLI 指令中指定部署目標。

其他部署活動和資訊

為部署作業新增註解

您可以視需要為部署作業新增註解。這則留言會與其他部署資訊一併顯示在 Firebase 主控台的 Hosting 資訊主頁上。例如：

firebase deploy --only hosting -m "Deploying the best new feature ever."

新增前置部署和後置部署指令碼工作

您可以選擇將殼層指令碼連結至 firebase deploy 指令，執行部署前或部署後工作。舉例來說，部署後掛鉤可通知管理員新網站內容的部署作業。詳情請參閱 Firebase CLI 說明文件。

快取已部署的內容

當使用者提出靜態內容要求時，Firebase Hosting 會自動在 CDN 上快取內容。如果您重新部署網站內容，Firebase 會自動清除 CDN 中的所有快取靜態內容，讓新要求接收您的新內容。

請注意，您可以設定動態內容快取。

透過 HTTPS 提供

Firebase Hosting 僅限 SSL，也就是說，內容只會透過 HTTPS 提供。

請確認所有未在 Firebase Hosting 上代管的外部資源，都會透過 SSL (HTTPS) 載入，包括任何外部指令碼。大多數瀏覽器都不允許使用者載入「混合內容」(SSL 和非 SSL 流量)。

刪除檔案

在 Firebase Hosting 中，從已部署的網站刪除所選檔案的主要方法，就是在本機刪除檔案，然後重新部署。

後續步驟

• 設定 GitHub Action，整合 GitHub 並重複使用預覽內容。

• 進一步瞭解代管功能：

  • 設定代管行為
  • 連結自訂網域
  • 提供動態內容和託管微服務

• 請參閱 Firebase CLI 的完整說明文件。

• 準備發布應用程式：

  • 在 Google Cloud 主控台中為專案設定預算快訊。
  • 請在 Firebase 控制台中監控使用量和帳單資訊主頁，全面掌握專案在多項 Firebase 服務中的用量。您也可以前往 Hosting「用量」資訊主頁，查看更詳細的用量資訊。
  • 詳閱 Firebase 上市檢查清單。