Prototipazione e test di app web con Firebase Hosting Emulator

Prima di iniziare a creare prototipi e testare la tua app web con l'emulatore Firebase Hosting, assicurati di comprendere il flusso di lavoro Firebase Local Emulator Suite generale e di installare e configurare Local Emulator Suite e di esaminarne i comandi CLI.

Dovresti anche conoscere le funzionalità e il flusso di lavoro di implementazione per Firebase Hosting. Inizia con l'introduzione a Firebase Hosting.

Che cosa posso fare con l'emulatore Firebase Hosting?

L'emulatore Firebase Hosting fornisce un'emulazione locale ad alta fedeltà dei servizi Hosting, offrendo gran parte delle funzionalità disponibili nella Hosting di produzione. L'emulatore Hosting ti consente di:

  • Prototipa i tuoi siti statici e le tue app web senza incorrere in costi di archiviazione o accesso
  • Prototipa, testa ed esegui il debug delle funzioni HTTPS prima di eseguire il deployment sul tuo sito di hosting
  • Testa siti e app web in workflow di integrazione continua containerizzati.

Scegliere un progetto Firebase

Firebase Local Emulator Suite emula i prodotti per un singolo progetto Firebase.

Per selezionare il progetto da utilizzare, prima di avviare gli emulatori, esegui firebase use nella CLI nella directory di lavoro. In alternativa, puoi passare il flag --project a ogni comando dell'emulatore.

Local Emulator Suite supporta l'emulazione di progetti Firebase reali e dimostrativi.

Tipo di progetto Funzionalità Utilizzo con emulatori
Reale

Un progetto Firebase reale è un progetto che hai creato e configurato (molto probabilmente tramite la console Firebase).

I progetti reali hanno risorse attive, come istanze di database, bucket di archiviazione, funzioni o qualsiasi altra risorsa configurata per quel progetto Firebase.

Quando lavori con progetti Firebase reali, puoi eseguire emulatori per uno o tutti i prodotti supportati.

Per i prodotti che non emuli, le tue app e il tuo codice interagiranno con la risorsa live (istanza di database, bucket di archiviazione, funzione e così via).

Demo

Un progetto Firebase dimostrativo non ha una configurazione Firebase reale e nessuna risorsa live. In genere, si accede a questi progetti tramite codelab o altri tutorial.

Gli ID progetto per i progetti demo hanno il prefisso demo-.

Quando lavori con i progetti demo Firebase, le tue app e il tuo codice interagiscono solo con gli emulatori. Se la tua app tenta di interagire con una risorsa per cui non è in esecuzione un emulatore, il codice non funzionerà.

Ti consigliamo di utilizzare i progetti demo, se possibile. I vantaggi includono:

  • Configurazione più semplice, in quanto puoi eseguire gli emulatori senza creare un progetto Firebase
  • Maggiore sicurezza, perché se il codice richiama accidentalmente risorse non emulate (di produzione), non c'è possibilità di modifica dei dati, utilizzo e fatturazione
  • Migliore supporto offline, in quanto non è necessario accedere a internet per scaricare la configurazione dell'SDK.

Workflow di prototipazione principale

Se stai apportando iterazioni rapide o vuoi che la tua app interagisca con le risorse del progetto di backend emulato, puoi testare i contenuti e la configurazione di Hosting in locale. Durante il test locale, Firebase pubblica la tua app web a un URL ospitato localmente.

  1. (Facoltativo) Per impostazione predefinita, l'app ospitata localmente interagisce con le risorse di progetto reali, non emulate (funzioni, database, regole e così via). In alternativa, puoi connettere l'app per utilizzare le risorse del progetto emulato che hai configurato. Scopri di più: Realtime Database | Cloud Firestore | Cloud Functions

  2. Dalla directory principale del progetto locale, esegui questo comando:

    firebase emulators:start

  3. Apri la tua app web all'URL locale restituito dalla CLI (di solito http://localhost:5000).

  4. Per aggiornare l'URL locale con le modifiche, aggiorna il browser.

Test da altri dispositivi locali

Per impostazione predefinita, gli emulatori rispondono solo alle richieste provenienti da localhost. Ciò significa che potrai accedere ai contenuti ospitati dal browser web del tuo computer, ma non da altri dispositivi sulla tua rete. Se vuoi eseguire il test da altri dispositivi locali, configura firebase.json nel seguente modo:

"emulators": {
    // ...

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

Genera token di autenticazione per i flussi di lavoro di integrazione continua

Se i tuoi flussi di lavoro di integrazione continua si basano su Firebase Hosting, devi accedere utilizzando un token per eseguire firebase emulators:exec. Gli altri emulatori non richiedono l'accesso.

Per generare un token, esegui firebase login:ci nel tuo ambiente locale. Questa operazione non deve essere eseguita da un sistema di integrazione continua. Segui le istruzioni per l'autenticazione. Dovresti eseguire questo passaggio una sola volta per progetto, poiché il token sarà valido per tutte le build. Il token deve essere trattato come una password, quindi assicurati che rimanga segreto.

Se il tuo ambiente CI ti consente di specificare variabili di ambiente che possono essere utilizzate negli script di build, crea semplicemente una variabile di ambiente chiamata FIREBASE_TOKEN, con il valore della stringa del token di accesso. La CLI Firebase rileverà automaticamente la variabile di ambiente FIREBASE_TOKEN e gli emulatori verranno avviati correttamente.

Come ultima risorsa, puoi semplicemente includere il token nello script di build, ma assicurati che terze parti non attendibili non abbiano accesso. Per questo approccio hardcoded, puoi aggiungere --token "YOUR_TOKEN_STRING_HERE" al comando firebase emulators:exec.

Che cosa succede ora?