Prototipa e testa le app Web con l'emulatore di hosting Firebase

Prima di iniziare a prototipare e testare la tua app Web con l'emulatore Firebase Hosting, assicurati di comprendere il flusso di lavoro generale di Firebase Local Emulator Suite , di installare e configurare Local Emulator Suite e di rivedere i suoi comandi CLI .

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

Cosa posso fare con l'emulatore Firebase Hosting?

L'emulatore di hosting Firebase fornisce un'emulazione locale ad alta fedeltà dei servizi di hosting, fornendo gran parte delle funzionalità presenti nell'hosting di produzione . L'emulatore di 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 della distribuzione sul tuo sito di hosting
  • Testare siti e app Web in flussi di lavoro di integrazione continua containerizzati.

Scegli un progetto Firebase

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

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

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

Tipo di progetto Caratteristiche Utilizzare con emulatori
Vero

Un vero progetto Firebase è quello 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 tutti i prodotti che non stai emulando, le tue app e il tuo codice interagiranno con la risorsa live (istanza del database, bucket di archiviazione, funzione e così via).

Dimostrazione

Un progetto Firebase demo non ha una configurazione Firebase reale né risorse live. Di solito si accede a questi progetti tramite codelab o altri tutorial.

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

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

Ti consigliamo di utilizzare progetti demo ove possibile. I vantaggi includono:

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

Flusso di lavoro di prototipazione principale

Se stai eseguendo iterazioni rapide o desideri che la tua app interagisca con le risorse del progetto backend emulate, puoi testare il contenuto dell'hosting e configurarlo localmente. Durante il test locale, Firebase fornisce la tua app Web a un URL ospitato localmente.

  1. (Facoltativo) Per impostazione predefinita, l'app ospitata localmente interagirà con risorse di progetto reali , non emulate (funzioni, database, regole, ecc.). Puoi invece facoltativamente connettere la tua app per utilizzare qualsiasi risorsa di progetto emulata che hai configurato. Ulteriori informazioni: Database in tempo reale | Cloud Fire Store | Funzioni del cloud

  2. Dalla radice della directory del progetto locale, esegui il comando seguente:

    firebase emulators:start

  3. Apri la tua app Web nell'URL locale restituito dalla CLI (in genere 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 di localhost . Ciò significa che potrai accedere ai contenuti ospitati dal browser web del tuo computer ma non da altri dispositivi sulla tua rete. Se desideri eseguire il test da altri dispositivi locali, configura firebase.json in questo modo:

"emulators": {
    // ...

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

Genera token di autenticazione per flussi di lavoro di integrazione continua

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

Per generare un token, esegui firebase login:ci nel tuo ambiente locale; questa operazione non deve essere eseguita da un sistema CI. Segui le istruzioni per autenticarti. Dovresti eseguire questo passaggio solo una volta per progetto, poiché il token sarà valido per tutte le build. Il token dovrebbe essere trattato come una password; assicurati che sia tenuto segreto.

Se l'ambiente CI ti consente di specificare variabili di ambiente che possono essere utilizzate negli script di build, crea semplicemente una variabile di ambiente denominata FIREBASE_TOKEN , con il valore che è la stringa del token di accesso. La CLI di Firebase rileverà automaticamente la variabile di ambiente FIREBASE_TOKEN e gli emulatori si avvieranno correttamente.

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

E dopo?