建議您先查看及測試變更,再部署至實際網站。 Firebase Hosting 可讓你在本機查看及測試變更,以及與之互動 模擬後端專案資源如果您需要同事查看及測試變更內容,Hosting 可以為網站建立可供共用的臨時預覽網址。我們甚至支援 GitHub 整合,透過提取功能部署 請求。
事前準備
完成Hosting「開始使用」頁面所列步驟,特別是下列工作:
- 安裝或將 Firebase CLI 更新至最新版本。
- 將本機專案目錄 (包含應用程式內容) 連結至 Firebase 專案。
您可以選擇部署應用程式的 Hosting 內容和設定,但這不是完成本頁步驟的必要條件。
步驟 1:在本機測試
如果您想加快疊代速度,或希望應用程式與模擬功能互動 後端專案資源,您可以測試 Hosting 內容和設定 本機儲存空間在本機測試時,Firebase 會將網頁應用程式存放在本機代管的 網址。
Hosting 是 Firebase Local Emulator Suite 的一部分,可讓應用程式與模擬的 Hosting 內容和設定互動,以及視需要與模擬的專案資源 (函式、資料庫和規則) 互動。
(選用) 根據預設,本機代管的應用程式會與實際 (而非模擬) 的專案資源 (函式、資料庫、規則等) 互動。您可以選擇連結應用程式,以便使用您已設定的任何模擬專案資源。瞭解詳情: Realtime Database | Cloud Firestore | Cloud Functions
在本機專案目錄的根目錄中執行下列指令:
firebase emulators:start
在 CLI 傳回的本機網址 (通常為
http://localhost:5000
) 中開啟網路應用程式。如要在變更本機網址後進行更新,請重新整理瀏覽器。
透過其他本機裝置進行測試
根據預設,模擬器只會回應來自 localhost
的要求。這個
這表示您可以透過電腦網路存取代管的內容
而不是來自你網路的其他裝置如果希望
其他本機裝置,請按照下列方式設定 firebase.json
:
"emulators": {
// ...
"hosting": {
"port": 5000,
"host": "0.0.0.0"
}
}
步驟 2:預覽並分享
如果想在上線前讓其他使用者先查看對網頁應用程式所做的變更,您可以 使用預覽管道
部署至預覽管道後,Firebase 會透過「預覽網址」提供網頁應用程式,這是可共用的臨時網址。使用預覽網址時 網頁應用程式會與所有專案資源的「實際」後端互動 (使用 但所有「已釘選」函式 config)。
請注意,雖然預覽網址包含隨機雜湊,因此不易猜測,但仍屬於公開資訊。因此凡是知道網址的人,都能存取該網址。
在本機專案的根目錄中,執行下列指令:
firebase hosting:channel:deploy CHANNEL_ID
將 CHANNEL_ID 替換為不含空格的字串 (例如
feature_mission-2-mars
)。這個 ID 會用來建構與預覽管道相關聯的預覽網址。在 CLI 傳回的預覽網址中開啟網頁應用程式。如下所示:
PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app
如要使用變更來更新預覽網址,請再次執行相同指令。請務必在指令中指定相同的
CHANNEL_ID
。
瞭解如何管理預覽管道。 包括如何設定頻道到期日
Firebase Hosting 支援 GitHub Action,可在您將變更提交至提取要求時,自動建立及更新預覽網址。瞭解如何設定及使用這個 GitHub Action。
步驟 3:即時部署
準備好與全世界分享變更後,請部署Hosting 打造專屬於您的直播頻道Firebase 會根據您的用途提供幾種不同的選項 (請參閱下方的選項)。
選項 1:從預覽頻道複製到直播頻道
這個選項能讓您安心地部署至即時管道 確切內容和設定。瞭解詳情 關於 複製版本。
在任何目錄中執行下列指令:
firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live
將每個預留位置替換為下列內容:
SOURCE_SITE_ID 和 TARGET_SITE_ID:這些 ID 分別是 (包含這些管道的 Hosting 個網站)。
- 如要使用預設 Hosting 網站,請使用 Firebase 專案 ID。
- 您可以指定位於同一 Firebase 專案或不同 Firebase 專案中的網站。
SOURCE_CHANNEL_ID:這是頻道的 目前正在提供您要部署至線上版本的版本。
- 如為直播頻道,請使用
live
做為頻道 ID。
- 如為直播頻道,請使用
下一步:查看變更。
方法 2:從本機專案目錄部署至直播頻道
這個選項可讓您彈性調整 不必使用預覽版本,也能執行部署作業
在本機專案目錄的根目錄中執行下列指令:
firebase deploy --only hosting
下一步:查看變更。
步驟 4:在實際網站上查看變更
上述兩種選項都會將 Hosting 內容和設定部署至下列網站:
預設 Hosting 網站和任何其他 Hosting 網站的 Firebase 佈建子網域:
SITE_ID.web.app
(例如PROJECT_ID.web.app
)
SITE_ID.firebaseapp.com
(例如PROJECT_ID.firebaseapp.com
)您已連結任何自訂網域 您的 Hosting 個網站
如要限制只部署至特定的 Hosting 網站, 指定部署目標 建立 Docker 容器
其他部署活動和資訊
為部署作業新增註解
您可以視需要為部署作業新增註解。這則留言會與其他部署資訊一併顯示在 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) 載入。大多數瀏覽器都不允許使用者載入「混合內容」(SSL 和非 SSL 流量)。
刪除檔案
在「Firebase Hosting」中,刪除所選檔案的主要方式 方法是在本機刪除檔案,然後重新部署。
後續步驟
整合 GitHub 並藉由下列方法疊代預覽內容: 設定 GitHub 動作。
進一步瞭解代管功能:
請參閱 Firebase CLI 的完整說明文件。
準備發布應用程式:
- 在 Google Cloud 主控台中為專案設定預算快訊。
- 監控用量與計費 資訊主頁 前往 Firebase 控制台查看專案的整體概況 以及跨多項 Firebase 服務的用量 您也可以參閱 Hosting Usage 資訊主頁 詳細的使用資訊
- 查看 Firebase 發布檢查清單。