使用 Firebase 託管模擬器設計及測試網頁應用程式

開始使用 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 會加上 demo- 前置字串。

使用 Firebase 示範專案時,應用程式和程式碼只會與模擬器互動。如果應用程式嘗試與模擬器未執行的資源互動,該程式碼就會失敗。

建議您盡可能使用示範專案。包括以下優點:

  • 設定更簡單,因為您可以不必建立 Firebase 專案,即可執行模擬器
  • 安全性更高,因為如果程式碼不小心叫用未模擬 (實際) 資源,就不會發生資料變更、使用和帳單問題
  • 提供更完善的離線支援功能,因為您不需要連上網際網路即可下載 SDK 設定。
Authentication

核心原型設計工作流程

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

  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 託管,您必須使用權杖登入,才能執行 firebase emulators:exec。其他模擬器則不需要登入。

如要產生權杖,請在本機環境中執行 firebase login:ci;這項操作不應透過持續整合系統執行。按照操作說明進行驗證。 您只需要對每個專案執行這項步驟一次,因為權杖會在各版本中有效。權杖應視為密碼,請務必保密。

如果 CI 環境允許您指定可在建構指令碼中使用的環境變數,只要建立名為 FIREBASE_TOKEN 的環境變數,並將存取權存證字串設為值即可。Firebase CLI 會自動挑選 FIREBASE_TOKEN 環境變數,模擬器就會正常啟動。

如非萬不得已,您可以直接在建構指令碼中加入權杖,但請確保未受信任的對象無法存取。對於這種硬式編碼方法,您可以將 --token "YOUR_TOKEN_STRING_HERE" 新增至 firebase emulators:exec 指令。

後續步驟