Prototipazione e test di app web con Firebase Hosting Emulator

Prima di iniziare a prototipare e testare la tua app web con Firebase Hosting, assicurati di aver compreso il flusso di lavoro Firebase Local Emulator Suite generale, e di installare e configurare Local Emulator Suite e rivedi i relativi comandi dell'interfaccia a riga di comando.

Inoltre, dovresti conoscere le funzionalità e il flusso di lavoro di implementazione per Firebase Hosting. Inizia con introduzione a Firebase Hosting.

Cosa posso fare con l'emulatore Firebase Hosting?

L'emulatore Firebase Hosting fornisce un'emulazione locale ad alta precisione dei Hosting, che offrono molte delle funzionalità presenti in produzione Hosting. L'emulatore Hosting ti consente di:

  • Prototipazione dei siti statici e delle app web senza dover ricorrere a spazio di archiviazione o accesso addebiti
  • Crea un prototipo, testa e esegui il debug delle funzioni HTTPS prima di eseguire il deployment sul tuo sito di hosting
  • Testa siti e app web in flussi di lavoro containerizzati di integrazione continua.

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 per ogni emulatore .

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

Tipo di progetto Funzionalità Usa con emulatori
Reale

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

I progetti reali includono risorse in tempo reale, ad esempio istanze di database, bucket, funzioni o qualsiasi altra risorsa configurata per l'account Firebase progetto.

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

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

Demo

Un progetto Firebase dimostrativo non ha una configurazione Firebase reale e nessuna risorsa attiva. Questi progetti sono in genere accessibili tramite codelab o altri tutorial.

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

Quando lavori con progetti Firebase dimostrativi, le app e il codice interagiscono con solo emulatori. Se la tua app tenta di interagire con una risorsa per cui non è in esecuzione un emulatore, il codice restituirà un errore.

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 la modalità non emulata di produzione, non c'è la possibilità che i dati vengano modificati, utilizzati e fatturati
  • Migliore supporto offline, in quanto non è necessario accedere a Internet per scarica la configurazione SDK.
di Gemini Advanced.

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 a livello locale l'URL ospitato.

  1. (Facoltativo) Per impostazione predefinita, l'app ospitata localmente interagirà con real, non emulati, le risorse di progetto (funzioni, database, regole e così via). Se vuoi, puoi invece connettere l'app per utilizzare qualsiasi progetto emulato che hai configurato. Scopri di più: Realtime Database | Cloud Firestore | Cloud Functions

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

    firebase emulators:start

  3. Apri l'app web all'URL locale restituito dall'interfaccia a riga di comando (di solito http://localhost:5000).

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

Esegui 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 rete. Se vuoi eseguire il test da altri dispositivi locali, configura firebase.json come segue:

"emulators": {
    // ...

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

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

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

Per generare un token, esegui firebase login:ci nel tuo ambiente locale. questo non deve essere eseguita da un sistema CI. Segui le istruzioni per l'autenticazione. Dovresti eseguire questo passaggio una sola volta per progetto, poiché il token sia valida in più build. Il token deve essere trattato come una password; assicurati che viene mantenuta segreta.

Se il tuo ambiente CI ti consente di specificare variabili di ambiente che possono essere utilizzati negli script di build, occorre creare una variabile di ambiente FIREBASE_TOKEN, dove il valore è la stringa del token di accesso. Il Firebase CLI 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, assicurati che le parti non attendibili non abbiano accesso. Per questo hard-coded puoi aggiungere --token "YOUR_TOKEN_STRING_HERE" al Comando firebase emulators:exec.

Che cosa succede ora?