Testa la tua app web localmente, condividi le modifiche con altri utenti, quindi esegui il deployment della versione live

Prima di eseguire il deployment sul sito pubblicato, devi visualizzare e testare le modifiche. Firebase Hosting ti consente di visualizzare e testare le modifiche in locale e di interagire con le risorse del progetto di backend emulato. Se vuoi che i tuoi colleghi visualizzino e testino le modifiche, Hosting può creare URL di anteprima temporanei e condivisibili per il tuo sito. Supportiamo anche un' integrazione con GitHub per eseguire il deployment da una richiesta di pull.

Prima di iniziare

Completa i passaggi elencati nella Hosting pagina Inizia a utilizzare, in particolare le seguenti attività:

  1. Installa o aggiorna l'interfaccia a riga di comando Firebase all'ultima versione.
  2. Collega la directory del progetto locale (contenente i contenuti dell'app) al tuo progetto Firebase.

Puoi anche eseguire il deployment dei contenuti e della configurazione Hosting della tua app, ma non è un prerequisito per i passaggi descritti in questa pagina.

Passaggio 1: esegui i test in locale

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 Hosting di Hosting in locale. Quando esegui i test in locale, Firebase pubblica la tua app web su un URL ospitato in locale.

Hosting fa parte di Firebase Local Emulator Suite, che consente alla tua app di interagire con i contenuti e la configurazione di Hosting emulati, nonché, facoltativamente, con le risorse del progetto emulate (funzioni, database e regole).

  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 collegare la tua 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 l'app web all'URL locale restituito dall'interfaccia a riga di comando (in genere http://localhost:5000).

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

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

"emulators": {
    // ...

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

Passaggio 2: visualizza l'anteprima e condividi

Se vuoi che altri utenti visualizzino le modifiche alla tua app web prima della pubblicazione, puoi utilizzare i canali in anteprima.

Dopo aver eseguito il deployment su un canale in anteprima, Firebase pubblica la tua app web su un "URL di anteprima", ovvero un URL temporaneo e condivisibile. Quando utilizzi un URL di anteprima, la tua app web interagisce con il backend reale per tutte le risorse del progetto (con l'eccezione delle funzioni "bloccate" nella configurazione di riscrittura).

Tieni presente che, sebbene gli URL di anteprima siano difficili da indovinare (in quanto contengono un hash casuale), sono pubblici. Pertanto, chiunque conosca l'URL può accedervi.

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

    firebase hosting:channel:deploy CHANNEL_ID

    Sostituisci CHANNEL_ID con una stringa senza spazi (ad esempio, feature_mission-2-mars). Questo ID verrà utilizzato per creare l'URL di anteprima associato al canale in anteprima.

  2. Apri l'app web all'URL di anteprima restituito dall'interfaccia a riga di comando. L'URL avrà un aspetto simile al seguente: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. Per aggiornare l'URL di anteprima con le modifiche, esegui di nuovo lo stesso comando. Assicurati di specificare lo stesso CHANNEL_ID nel comando.

Scopri di più sulla gestione dei canali in anteprima, incluso come impostare la scadenza di un canale.

Firebase Hosting supporta un'azione di GitHub che crea e aggiorna automaticamente un URL di anteprima quando esegui il commit delle modifiche in una richiesta di pull. Scopri come configurare e utilizzare questa azione di GitHub.

Passaggio 3: esegui il deployment in tempo reale

Quando è tutto pronto per condividere le modifiche con il mondo, esegui il deployment dei Hosting contenuti e della configurazione sul canale in tempo reale. Firebase offre alcune opzioni diverse per questo passaggio, a seconda del caso d'uso (vedi le opzioni di seguito).

Opzione 1: clona da un canale in anteprima al canale in tempo reale

Questa opzione ti dà la certezza di eseguire il deployment sul canale in tempo reale dei contenuti e della configurazione esatti che hai testato in un canale in anteprima. Scopri di più su clonazione delle versioni.

  1. Da qualsiasi directory, esegui il seguente comando:

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    Sostituisci ogni segnaposto con quanto segue:

    • SOURCE_SITE_ID e TARGET_SITE_ID: sono gli ID dei siti Hosting che contengono i canali.

      • Per il sito Hosting predefinito, utilizza l'ID progetto Firebase.
      • Puoi specificare siti che si trovano nello stesso progetto Firebase o anche in progetti Firebase diversi.

    • SOURCE_CHANNEL_ID: è l'identificatore del canale che attualmente pubblica la versione di cui vuoi eseguire il deployment sul canale in tempo reale.

      • Per un canale in tempo reale, utilizza live come ID canale.

  2. Visualizza le modifiche (passaggio successivo).

Opzione 2: esegui il deployment dalla directory del progetto locale al canale in tempo reale

Questa opzione ti offre la flessibilità di modificare le configurazioni specifiche del canale in tempo reale o di eseguire il deployment anche se non hai utilizzato un canale in anteprima.

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

    firebase deploy --only hosting

  2. Visualizza le modifiche (passaggio successivo).

Passaggio 4: visualizza le modifiche sul sito pubblicato

Entrambe le opzioni sopra riportate eseguono il deployment dei contenuti e della configurazione di Hosting sui seguenti siti:

  • I sottodomini forniti da Firebase per il sito Hosting predefinito e per eventuali siti Hosting aggiuntivi:
    SITE_ID.web.app (ad esempio PROJECT_ID.web.app)
    SITE_ID.firebaseapp.com (ad esempio PROJECT_ID.firebaseapp.com)

  • Eventuali domini personalizzati che hai collegato a i tuoi Hosting siti

Per limitare il deployment a un sito Hosting specifico, specifica una destinazione di deployment nel comando dell'interfaccia a riga di comando.

Altre attività e informazioni sul deployment

Aggiungi un commento al deployment

Puoi anche aggiungere un commento a un deployment. Questo commento verrà visualizzato insieme alle altre informazioni sul deployment nella Hosting dashboard nella Firebase console. Ad esempio:

firebase deploy --only hosting -m "Deploying the best new feature ever."

Aggiungi attività script pre-deployment e post-deployment

Puoi anche collegare gli script della shell al comando firebase deploy per eseguire attività pre-deployment o post-deployment. Ad esempio, un hook post-deployment potrebbe inviare una notifica agli amministratori dei nuovi deployment dei contenuti del sito. Per ulteriori dettagli, consulta la documentazione dell' Firebaseinterfaccia a riga di comando.

Memorizzazione nella cache dei contenuti di cui è stato eseguito il deployment

Quando viene effettuata una richiesta di contenuti statici, Firebase Hosting memorizza automaticamente i contenuti nella cache della CDN. Se esegui di nuovo il deployment dei contenuti del sito, Firebase cancella automaticamente tutti i contenuti statici memorizzati nella cache nella CDN, in modo che le nuove richieste ricevano i nuovi contenuti.

Tieni presente che puoi configurare la memorizzazione nella cache dei contenuti dinamici.

Pubblicazione tramite HTTPS

Assicurati che tutte le risorse esterne non ospitate su Firebase Hosting vengano caricate tramite SSL (HTTPS),inclusi gli script esterni. La maggior parte dei browser non consente agli utenti di caricare "contenuti misti" (traffico SSL e non SSL).

Eliminazione di file

In Firebase Hosting, il modo principale per eliminare i file selezionati da un sito di cui è stato eseguito il deployment è eliminare i file in locale e poi rieseguire il deployment.

Passaggi successivi