Prototipazione e test di app web con Firebase Hosting Emulator

Prima di iniziare a creare la prototipazione e a testare l'app web con l'emulatore Firebase Hosting, assicurati di comprendere il flusso di lavoro complessivo di Firebase Local Emulator Suite, di installare e configurare Local Emulator Suite e di esaminare i relativi comandi CLI.

Inoltre, dovresti conoscere 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 Firebase Hosting fornisce un'emulazione locale ad alta fedeltà dei servizi Hosting, offrendo molte delle funzionalità disponibili in Hostingdi produzione. L'emulatore Hosting ti consente di:

  • Prototipa i tuoi siti statici e le tue app web senza dover sostenere costi per spazio di archiviazione o accesso
  • Crea prototipazione, testa ed esegui il debug delle funzioni HTTPS prima di eseguirne il deployment sul tuo sito Hosting
  • Testa siti e app web in workflow di integrazione continua containerizzati.

Scegli un progetto Firebase

L'elemento 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 directory di lavoro in CLI. In alternativa, puoi passare il flag --project a ogni comando dell'emulatore.

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

Tipo di progetto Funzionalità Utilizzo con emulatori
Reale

Un progetto Firebase reale è un progetto creato e configurato da te (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 il 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 in produzione (istanza di database, bucket di archiviazione, funzione e così via).

Demo

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

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

Quando utilizzi progetti Firebase di prova, 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 non andrà a buon fine.

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

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

Flusso di lavoro principale per la prototipazione

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

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

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

    firebase emulators:start

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

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

Eseguire il 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 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 CI. Segui le istruzioni per l'autenticazione. Dovresti eseguire questo passaggio solo una volta per progetto, poiché il token sarà valido in tutte le build. Il token deve essere trattato come una password. Assicurati di mantenerlo segreto.

Se il tuo ambiente CI ti consente di specificare variabili di ambiente che possono essere utilizzate negli script di compilazione, crea semplicemente una variabile di ambiente chiamata FIREBASE_TOKEN, con il valore della stringa del token di accesso. L'interfaccia a riga di comando Firebase selezionerà automaticamente la variabile di ambiente FIREBASE_TOKEN e gli emulatori si avvieranno correttamente.

Come ultima risorsa, puoi semplicemente includere il token nello script di compilazione, 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.

Che cosa succede ora?