您可以使用 App Hosting 模擬器 (Firebase 本機模擬器套件的一部分)，在部署 App Hosting 之前，在本機測試應用程式。
使用 App Hosting 模擬器前，請務必瞭解 Firebase Local Emulator Suite 的整體工作流程，並安裝及設定 Local Emulator Suite，以及查看其 CLI 指令。
本主題假設您已熟悉 App Hosting。如有需要，請參閱 App Hosting 簡介和其他資料，瞭解 App Hosting 的運作方式。
App Hosting 模擬器有哪些功能？
App Hosting 模擬器可讓您在本機測試及調整網頁應用程式。這可簡化開發程序，並提升使用 Firebase 建構並部署在 App Hosting 的網頁應用程式品質。
App Hosting 模擬器：
- 在本機執行網頁應用程式，並使用
apphosting.yaml設定檔中定義的環境變數和密鑰。 - 可使用
apphosting.emulator.yaml檔案覆寫環境變數和 Secret，以便在模擬器中使用。 - 可與其他 Firebase 模擬器搭配使用。如果您使用的是 Firestore、Auth 或任何其他模擬器，Local Emulator Suite 可確保這些模擬器在 App Hosting 模擬器之前啟動。
設定模擬器
首先，請按照「安裝、設定及整合本機 Emulator Suite」一文中的說明，安裝並初始化 Local Emulator Suite。除了要設定的其他 Firebase 模擬器外，請務必選取 App Hosting
Emulator。CLI 會提示您輸入一些 App Hosting 模擬器值，包括：
- 應用程式相對於專案的根目錄；如果您搭配 App Hosting 使用單一存放區，這項設定就很重要。
- 是否要覆寫本機開發的任何值。
- 是否要授予團隊成員密鑰存取權，以便在本機開發。
firebase init emulators
=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. (Press
<space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ App Hosting Emulator
◯ Firestore Emulator
◯ Database Emulator
◯ Hosting Emulator
◯ Pub/Sub Emulator
◯ Storage Emulator
◯ Eventarc Emulator
(Move up and down to reveal more choices)
? Specify your app's root directory relative to your project (./)
? The App Hosting emulator uses a file called apphosting.emulator.yaml to
override values in apphosting.yaml for local testing. This codebase does not
have one, would you like to create it? (Y/n)
? Which environment variables would you like to override? (Press <space> to
select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ MEMCACHE_ADDR
◯ API_KEY
? What new value would you like for plaintext MEMCACHE_ADDR?
? What would you like to name the secret reference for API_KEY? (test-api-key)
? What new value would you like for secret TESTKEY [input is hidden]? [input is hidden]
? Your config has secret values. Please provide a comma-separated list of users
or groups who should have access to secrets for local development:
✔ Successfully set IAM bindings on secret test-api-key.
您在這個設定流程中提供的任何值，都會用於更新 firebase.json 中的 App Hosting 模擬器設定。您也可以直接更新 firebase.json，設定 App Hosting 模擬器。App Hosting 模擬器的結構定義如下：
{
...
"emulators": {
"apphosting": {
"startCommand": <command> [optional],
"rootDirectory": <path> [optional]
}
}
}
- 模擬器初始化時，系統會自動產生並設定
startCommand。如未提供，模擬器會偵測並執行套件管理工具的開發指令。 rootDirectory可用於支援單一存放區專案設定。如果網頁應用程式位於子目錄中，則必須提供該目錄相對於根目錄 (firebase.json的位置) 的路徑。
管理模擬
模擬器初始化作業會在應用程式的根目錄中建立 apphosting.emulator.yaml 檔案。這個設定檔的結構定義與實際工作環境中使用的 apphosting.yaml 檔案相同，但僅適用於本機開發。根據預設，模擬器會從 apphosting.yaml 檔案讀取設定，但如果存在 apphosting.emulator.yaml 檔案，則會優先採用該檔案中的設定。
apphosting.emulator.yaml 檔案可安全地提交並與同事共用。為確保您不會不小心將機密資料提交至來源存放區，apphosting.yaml 中的任何 Secret 環境變數也必須是 apphosting.emulator.yaml 中的 Secret。如果密鑰在正式環境和本機開發環境中不需變更 (例如 Gemini API 金鑰)，就不必新增至 apphosting.emulator.yaml，而是授予團隊密鑰存取權。
如果應用程式使用許多 Secret (例如三個不同服務的 API 金鑰，且正式環境、測試環境和本機開發環境的值各不相同)，可能會超過 Cloud Secret Manager 的免費方案額度，每個月須為每個額外的 Secret 支付 $0.06 美元。如果您想在原始碼控管區外管理本機設定，以免產生這筆費用，可以使用舊版 apphosting.local.yaml 檔案。與 apphosting.emulator.yaml 不同，這個檔案可以為 apphosting.yaml 中的密鑰環境變數提供明文值。
授予使用者或群組 Secret 存取權
模擬器啟動時，會讀取儲存在 apphosting.emulator.yaml 中的密鑰。這表示開發團隊需要存取密鑰。您可以使用 apphosting:secrets:grantaccess 指令，透過電子郵件將 Secret 存取權授予使用者或群組。
firebase apphosting:secrets:grantaccess test-api-key --emails my-team@my-company.com
在適用情況下，建議在 apphosting.emulator.yaml 中使用僅限測試的金鑰，這些金鑰無法存取正式環境資料、不會產生全域副作用 (傳送電子郵件、向信用卡收費)，或配額較低。這有助於確保未經審查的程式碼不會對實際環境造成重大影響。
建議您使用 Google 群組管理密鑰存取權，而非將存取權授予個別使用者。這樣一來，您就能簡化開發人員團隊新成員的加入流程，因為只要將他們加入群組，就能授予他們所需的所有 Secret 存取權。您可能已有合適的群組，可供開發人員彼此交流。透過 Google 群組控管存取權，也能確保開發人員離開團隊並從電子郵件群組中移除後，無法再存取任何 Secret。不過，如果密鑰可存取實際工作環境資料或實際副作用，建議您輪替金鑰，並使用 firebase apphosting:secrets:set 為金鑰提供新值。
執行模擬器
firebase emulators:start
這會啟動 firebase.json 檔案中定義的所有模擬器，包括 App Hosting 模擬器。
設定 Angular 應用程式的 start 指令
如果模擬器 start 指令逾時，可能是因為 Angular 開發伺服器在與 App Hosting 模擬器預期不同的通訊埠上提供應用程式。如要解決這個問題，請在 firebase.json 中新增一些額外設定：
- 將
emulators.apphosting.startCommand設為ng serve。 - 如要使用非預設通訊埠，請使用
emulators.apphosting.port設定 (而非在emulators.apphosting.startCommand的ng serve中加入--port旗標)。
例如：
"emulators": {
"apphosting": {
"port": 5002,
"rootDirectory": "./test-app",
"startCommand": "ng serve"
},
"ui": {
"enabled": true
},
...
}