部署至實際網站前,請先查看並測試變更。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 會透過「預覽網址」提供網頁應用程式,這個網址是可共用的臨時網址。使用預覽網址時,網頁應用程式會與實際後端互動,取得所有專案資源 (但重新編寫設定中「已釘選」的函式除外)。
請注意,雖然預覽網址難以猜測 (因為含有隨機雜湊),但仍屬於公開網址。因此,只要知道網址,就能存取該資源。
在本地專案目錄的根目錄中,執行下列指令:
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 動作,可在您將變更提交至提取要求時,自動建立及更新預覽網址。瞭解如何設定及使用這項 GitHub 動作。
步驟 3:部署正式版
準備好向全世界分享變更時,請將Hosting內容和設定部署到正式頻道。Firebase 提供幾種不同的選項,可根據您的用途選擇 (請參閱下方的選項)。
選項 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 專案中的網站。
SOURCE_CHANNEL_ID:這是目前提供您要部署至正式版頻道版本的頻道 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 網站,請在 CLI 指令中指定部署目標。
其他部署活動和資訊
為部署作業新增註解
您可以視需要為部署作業新增註解。這則留言會與其他部署資訊一起顯示在 Firebase 控制台的Hosting 資訊主頁上。例如:
firebase deploy --only hosting -m "Deploying the best new feature ever."
新增部署前和部署後指令碼工作
您可以選擇將 Shell 指令碼連線至 firebase deploy
指令,執行部署前或部署後工作。舉例來說,部署後掛鉤可以通知管理員新網站內容的部署作業。詳情請參閱 Firebase CLI 說明文件。
快取已部署的內容
當系統收到靜態內容要求時,Firebase Hosting 會自動將內容快取到 CDN。重新部署網站內容時,Firebase 會自動清除 CDN 中所有快取的靜態內容,確保新要求會收到新內容。
請注意,您可以設定動態內容的快取。
透過 HTTPS 提供內容
請確認所有未在 Firebase Hosting 上代管的外部資源,包括任何外部指令碼,都是透過 SSL (HTTPS) 載入。大多數瀏覽器不允許使用者載入「複合型內容」(SSL 和非 SSL 流量)。
刪除檔案
在 Firebase Hosting 中,從已部署的網站刪除所選檔案的主要方式,是先在本機刪除檔案,然後重新部署。
後續步驟
與 GitHub 整合,並設定 GitHub Action,反覆修改預覽內容。
瞭解更多代管功能:
請參閱 Firebase CLI 的完整說明文件。
準備發布應用程式:
- 在 Google Cloud 控制台中,為專案設定預算快訊。
- 在 Firebase 控制台中監控「用量和帳單」資訊主頁,全面掌握專案在多項 Firebase 服務中的用量。如需更詳細的使用資訊,請前往Hosting「用量」資訊主頁。
- 詳閱 Firebase 發布檢查清單。