Prototipazione e test di app web con Firebase Hosting Emulator

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

Dovresti anche 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'Firebase Hosting emulatore fornisce un'emulazione locale ad alta fedeltà dei Hosting servizi, offrendo gran parte delle funzionalità disponibili nell' hosting di produzione Hosting. L'Hosting emulatore ti consente di:

  • Creare prototipi di siti statici e app web senza incorrere in addebiti per l'archiviazione o l'accesso
  • Creare prototipi, testare ed eseguire il debug delle funzioni HTTPS prima di eseguire il deployment nel sito di hosting
  • Testare siti e app web in workflow di integrazione continua containerizzati.

Scegliere un progetto Firebase

Il 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 --project flag a ogni comando dell'emulatore.

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

Tipo di progetto Funzionalità Utilizzo con gli emulatori
Reale

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

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 gli 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 attiva (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 dimostrativi hanno il prefisso demo-.

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

Ti consigliamo di utilizzare i progetti dimostrativi, 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 dei dati, utilizzo e fatturazione
  • Migliore supporto offline, poiché non è necessario accedere a internet per scaricare la configurazione dell'SDK.

Flusso di lavoro di prototipazione di base

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

  1. (Facoltativo) Per impostazione predefinita, l'app ospitata in locale interagisce con le risorse del progetto reali, non emulate (funzioni, database, regole e così via). In alternativa, puoi connettere facoltativamente 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 comando seguente:

    firebase emulators:start

  3. Apri l'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.

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 computer, ma non da altri dispositivi della rete. Se vuoi eseguire i test da altri dispositivi locali, configura firebase.json come segue:

"emulators": {
    // ...

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

Generare token di autenticazione per i workflow di integrazione continua

Se i workflow di integrazione continua si basano su Firebase Hosting, dovrai 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. Dovrai 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; assicurati che rimanga segreto.

Se il tuo ambiente CI ti consente di specificare le variabili di ambiente che possono essere utilizzate negli script di build, crea semplicemente una variabile di ambiente chiamata FIREBASE_TOKEN, il cui valore è la stringa del token di accesso. La Firebase CLI rileverà automaticamente la FIREBASE_TOKEN variabile di ambiente 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 firebase emulators:exec comando.

Cosa devo fare adesso?