開始使用 Firebase Hosting 模擬器製作原型並測試網頁應用程式前,請務必瞭解整體 Firebase Local Emulator Suite 工作流程,並安裝及設定 Local Emulator Suite,並查看其 CLI 指令。
您也應熟悉 Firebase Hosting 的功能和導入工作流程。請先參閱Firebase Hosting 簡介。
Firebase Hosting 模擬器有什麼用途?
Firebase Hosting 模擬器可提供 Hosting 服務的高保真本機模擬功能,提供實際工作環境 Hosting的大部分功能。Hosting 模擬器可讓您執行下列操作:
- 製作靜態網站和網頁應用程式的原型,不必支付儲存空間或存取費用
- 在部署至代管網站前,先製作原型、測試及偵錯 HTTPS 函式
- 在容器化持續整合工作流程中測試網站和網頁應用程式。
選擇 Firebase 專案
Firebase Local Emulator Suite 會模擬單一 Firebase 專案的產品。
如要選取要使用的專案,請在啟動模擬器前,在工作目錄的 CLI 中執行 firebase use
。或者,您也可以將 --project
標記傳遞至每個模擬器指令。
Local Emulator Suite 支援模擬實際 Firebase 專案和示範專案。
專案類型 | 功能 | 搭配模擬器使用 |
---|---|---|
真實 |
真正的 Firebase 專案是您建立及設定的專案 (最有可能是透過 Firebase 控制台)。 實際專案會有實際資源,例如資料庫執行個體、儲存空間桶、函式,或是您為該 Firebase 專案設定的任何其他資源。 |
使用實際的 Firebase 專案時,您可以為任何或所有支援的產品執行模擬器。 對於您未模擬的任何產品,應用程式和程式碼會與實際資源 (資料庫執行個體、儲存空間桶、函式等) 互動。 |
示範 |
示範 Firebase 專案沒有實際的 Firebase 設定,也沒有實際資源。這些專案通常是透過程式碼研究室或其他教學課程存取。 示範專案的專案 ID 會加上 |
使用 Firebase 示範專案時,應用程式和程式碼只會與模擬器互動。如果應用程式嘗試與模擬器未執行的資源互動,該程式碼就會失敗。 |
建議您盡可能使用示範專案。包括以下優點:
- 設定更簡單,因為您可以不必建立 Firebase 專案,即可執行模擬器
- 安全性更高,因為如果程式碼不小心叫用未模擬 (實際) 資源,就不會發生資料變更、使用和帳單問題
- 提供更完善的離線支援功能,因為您不需要連上網際網路即可下載 SDK 設定。
核心原型設計工作流程
如果您需要快速疊代,或是希望應用程式與模擬的後端專案資源互動,可以直接在本機測試 Hosting 內容和設定。在本機測試時,Firebase 會在本機代管的網址上提供網頁應用程式。
(選用) 根據預設,本機代管的應用程式會與實際 (而非模擬) 的專案資源 (函式、資料庫、規則等) 互動。您可以選擇連結應用程式,以便使用您已設定的任何模擬專案資源。瞭解詳情: 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"
}
}
為持續整合工作流程產生驗證權杖
如果您的持續整合工作流程仰賴 Firebase Hosting,您必須使用權杖登入,才能執行 firebase emulators:exec
。其他模擬器則不需要登入。
如要產生權杖,請在本機環境中執行 firebase login:ci
;這項操作不應透過持續整合系統執行。按照操作說明進行驗證。
您只需要對每個專案執行這項步驟一次,因為權杖會在各個版本中有效。權杖應視為密碼,請務必保密。
如果 CI 環境允許您指定可在建構指令碼中使用的環境變數,只要建立名為 FIREBASE_TOKEN
的環境變數,並將存取權存證字串設為值即可。Firebase CLI 會自動挑選 FIREBASE_TOKEN
環境變數,模擬器也會正常啟動。
如非萬不得已,您可以直接在建構指令碼中加入權杖,但請確保未受信任的對象無法存取。對於這種硬式編碼方法,您可以將 --token "YOUR_TOKEN_STRING_HERE"
新增至 firebase emulators:exec
指令。
後續步驟
- 按照 Firebase 網路程式碼研究室的說明,使用 Hosting 模擬器執行快速入門。
- 瞭解如何使用 Hosting 模擬器製作 HTTPS 函式原型,詳情請參閱函式代管指南。
- 如需精選影片和詳細操作說明範例,請參閱 Firebase 模擬器訓練播放清單。