使用 Firebase 託管模擬器對 Web 應用進行原型設計和測試

在開始使用 Firebase Hosting 模擬器對 Web 應用進行原型設計和測試之前,請確保您了解 Firebase 本機模擬器套件的整體工作流程,並安裝和設定本機模擬器套件並查看其CLI 命令

您還應該熟悉 Firebase 託管的功能和實作工作流程。首先介紹 Firebase 託管

我可以使用 Firebase 託管模擬器做什麼?

Firebase 託管模擬器提供託管服務的高保真本地模擬,提供生產託管中的大部分功能。託管模擬器可以讓您:

  • 建立靜態網站和 Web 應用程式的原型,而不會產生儲存或存取費用
  • 在部署到託管網站之前對 HTTPS 功能進行原型設計、測試和偵錯
  • 在容器化、持續整合工作流程中測試網站和 Web 應用程式。

選擇 Firebase 項目

Firebase 本機模擬器套件模擬單一 Firebase 專案的產品。

若要選擇要使用的項目,請在啟動模擬器之前,在 CLI 中在工作目錄中執行firebase use 。或者,您可以將--project標誌傳遞給每個模擬器指令。

本機模擬器套件支援模擬真實的Firebase 專案和演示專案。

項目類型特徵與模擬器一起使用
真實的

真正的 Firebase 專案是您建立和配置的專案(很可能透過 Firebase 控制台)。

真實專案具有即時資源,例如資料庫執行個體、儲存桶、函數或您為該 Firebase 專案設定的任何其他資源。

在處理真實的 Firebase 專案時,您可以為任何或所有受支援的產品運行模擬器。

對於您未模擬的任何產品,您的應用程式和程式碼將與即時資源(資料庫執行個體、儲存桶、函數等)進行互動。

示範

示範 Firebase 專案沒有真正的Firebase 配置,也沒有即時資源。這些項目通常透過代碼實驗室或其他教程存取。

示範項目的項目 ID 具有demo-前綴。

使用示範 Firebase 專案時,您的應用程式和程式碼與模擬器互動。如果您的應用程式嘗試與未運行模擬器的資源進行交互,則該程式碼將會失敗。

我們建議您盡可能使用演示項目。好處包括:

  • 設定更簡單,因為您無需建立 Firebase 專案即可運行模擬器
  • 更強的安全性,因為如果您的程式碼意外調用非模擬(生產)資源,則不會發生資料變更、使用和計費
  • 更好的離線支持,因為無需訪問互聯網即可下載 SDK 配置。

核心原型製作工作流程

如果您正在進行快速迭代或希望您的應用程式與模擬的後端專案資源進行交互,您可以在本地測試您的託管內容和配置。在本機測試時,Firebase 在本機託管的 URL 上為您的 Web 應用程式提供服務。

  1. (可選)預設情況下,您的本機託管應用程式將與真實的而非模擬的專案資源(函數、資料庫、規則等)進行互動。您可以選擇連接您的應用程式以使用您已設定的任何模擬專案資源。了解更多:即時資料庫|雲端Firestore |雲端功能

  2. 從本機專案目錄的根目錄中,執行以下命令:

    firebase emulators:start
  3. 透過 CLI 傳回的本機 URL(通常http://localhost:5000 )開啟您的 Web 應用程式。

  4. 若要更新本機 URL 的更改,請刷新瀏覽器。

從其他本地設備進行測試

預設情況下,模擬器僅回應來自localhost的請求。這意味著您將能夠從電腦的網路瀏覽器存取託管​​內容,但不能從網路上的其他裝置存取託管內容。如果您想從其他本機裝置進行測試,請像這樣設定firebase.json

"emulators": {
    // ...

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

為持續整合工作流程產生身分驗證令牌

如果您的持續整合工作流程依賴 Firebase 託管,那麼您將需要使用令牌登入才能執行firebase emulators:exec 。其他模擬器不需要登入。

要產生令牌,請在本地環境中運行firebase login:ci ;這不應該從 CI 系統執行。按照說明進行身份驗證。您應該只需要為每個專案執行一次此步驟,因為令牌在各個建置中都有效。令牌應該像密碼一樣對待;確保其保密。

如果您的 CI 環境允許您指定可在建置腳本中使用的環境變量,只需建立名為FIREBASE_TOKEN的環境變量,其值為存取令牌字串。 Firebase CLI 將自動取得FIREBASE_TOKEN環境變量,並且模擬器將正常啟動。

作為最後的手段,您可以簡單地將令牌包含在建置腳本中,但請確保不受信任的各方無權存取。對於這種硬編碼方法,您可以將--token "YOUR_TOKEN_STRING_HERE"新增至firebase emulators:exec命令。

接下來是什麼?