Testare le app web localmente con l'emulatore Firebase App Hosting

Puoi eseguire test locali della tua app prima del deployment di App Hosting utilizzando l'emulatore App Hosting, che fa parte di Firebase Local Emulator Suite.

Prima di utilizzare l'emulatore App Hosting, assicurati di comprendere il flusso di lavoro complessivo di Local Emulator Suite di Firebase e di installare e configurare Local Emulator Suite e di esaminare i relativi comandi CLI.

Questo argomento presuppone che tu abbia già dimestichezza con App Hosting. Se necessario, consulta l'introduzione a App Hosting e altri materiali per capire come funziona App Hosting.

Cosa posso fare con l'emulatore App Hosting?

L'emulatore App Hosting ti consente di testare e perfezionare le tue applicazioni web in locale. In questo modo puoi semplificare il processo di sviluppo e migliorare la qualità delle app web create utilizzando Firebase e di cui è stato eseguito il deployment su App Hosting.

L'emulatore App Hosting:

  1. Ti consente di eseguire l'app web localmente, con le variabili di ambiente definite nei file di configurazione apphosting.yaml.
  2. Puoi esportare i secret che hai salvato nei diversi App Hosting ambienti, in modo da simulare le applicazioni in ambienti diversi.
  3. Può essere utilizzato insieme ad altri emulatori Firebase. Se utilizzi Firestore, Auth o qualsiasi altro emulatore, Local Emulator Suite garantisce che questi emulatori vengano avviati prima dell'emulatore App Hosting.

Configurare l'emulatore

Per iniziare, installa e inizializza Local Emulator Suite come descritto in Installare, configurare e integrare Local Emulator Suite. Oltre a eventuali altri emulatori Firebase che vuoi configurare, assicurati di selezionare App Hosting Emulator. La CLI ti chiede alcuni valori dell'emulatore App Hosting, tra cui:

  • La directory principale dell'app rispetto al progetto. Questo è importante se utilizzi monorepo con App Hosting.
  • Se vuoi esportare i secret per determinati ambienti.
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 (.)

? What configs would you like to export? (Press
<space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ❯◯ Secrets

? Which environment would you like to export secrets from Secret Manager for?:
  ◯ base (apphosting.yaml)
 ❯◯ staging (apphosting.yaml + apphosting.staging.yaml)
  ◯ preview (apphosting.yaml + apphosting.preview.yaml)

i Wrote Secrets as environment variables to apphosting.local.yaml.
i apphosting.local.yaml has been automatically added to your .gitignore.

Tutti i valori forniti in questo flusso di configurazione vengono utilizzati per aggiornare la configurazione dell'emulatore App Hosting in firebase.json. Puoi anche configurare l'emulatore di hosting di app aggiornando direttamente firebase.json. Lo schema per l'emulatore di hosting delle app è:

{
  ...
  "emulators": {
    "apphosting": {
      "startCommandOverride": <command> [optional]
      "rootDirectory": <path> [optional]
      }
    }
  }
  • startCommandOverride viene generato e impostato automaticamente quando viene inizializzato l'emulatore. Se non viene fornito, l'emulatore rileverà ed eseguirà il comando dev del gestore dei pacchetti.
  • rootDirectory viene utilizzato per supportare le configurazioni dei progetti monorepo. Se la tua app web si trova in una sottodirectory, devi fornire il percorso della directory rispetto alla directory principale (la posizione di firebase.json).

Gestire l'emulazione

L'inizializzazione dell'emulatore crea un file apphosting.local.yaml nella directory principale dell'app. Questo file di configurazione ha lo stesso schema del file apphosting.yaml utilizzato in produzione, ma è destinato esclusivamente allo sviluppo locale. Per impostazione predefinita, l'emulatore legge la configurazione dal file apphosting.yaml, ma se è presente un file apphosting.yaml, le configurazioni in quel file hanno la priorità e vengono prese in considerazione per prime.apphosting.local.yaml

Esportare i secret per simulare ambienti diversi localmente

Se utilizzi più ambienti e vuoi simulare diversi ambienti app in locale, potresti aver bisogno dei relativi secret. Puoi esportare i secret per un ambiente specifico utilizzando il comando CLIapphosting:config:export (in alternativa, come mostrato in Configurare l'emulatore, puoi facoltativamente importare i secret durante l'inizializzazione dell'emulatore).

Questo comando richiede di selezionare uno degli ambienti App Hosting disponibili del progetto. La configurazione App Hosting specifica per l'ambiente (ad esempio "apphosting.staging.yaml") e la configurazione App Hosting di base ("apphosting.yaml") vengono unite, con la configurazione specifica per l'ambiente che ha la precedenza. Se in entrambe le configurazioni esistono secret con lo stesso nome, viene utilizzato il secret della configurazione specifica dell'ambiente.

Ad esempio, per esportare i secret nell'emulatore da un ambiente di staging:

firebase apphosting:config:export --project <your firebase project Id>

? What configs would you like to export? (Press
<space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ❯◯ Secrets

? Which environment would you like to export secrets from Secret Manager for?:
  ◯ base (apphosting.yaml)
 ❯◯ staging (apphosting.yaml + apphosting.staging.yaml)
  ◯ preview (apphosting.yaml + apphosting.preview.yaml)
i Wrote Secrets as environment variables to apphosting.local.yaml.
i apphosting.local.yaml has been automatically added to your .gitignore.

Il file apphosting.local.yaml viene aggiornato (o creato se non esiste) con i secret esportati come variabili di ambiente. Poiché ora il file contiene informazioni sensibili in testo normale, verrà aggiunto automaticamente al file .gitignore per impedire che venga eseguito il commit accidentalmente nel repository del codice sorgente.

Esegui l'emulatore

firebase emulators:start

Verranno avviati tutti gli emulatori definiti nel file firebase.json, incluso l'emulatore App Hosting.