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 tuo sito pubblicato, devi visualizzare e testare le modifiche. Firebase Hosting ti consente di visualizzare e testare le modifiche in locale e interagire con le risorse del progetto di backend emulate. 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 GitHub per il deployment da una richiesta di pull.

Prima di iniziare

Completa i passaggi elencati nella pagina Guida introduttiva di Hosting, in particolare le seguenti attività:

  1. Installa o aggiorna la CLI Firebase all'ultima versione.
  2. Collega la directory del progetto locale (contenente i contenuti della tua app) al tuo progetto Firebase.

Puoi facoltativamente 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 il test in locale

Se stai eseguendo 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 localmente. Durante i test locali, Firebase pubblica la tua app web a un URL ospitato localmente.

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

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

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

    firebase emulators:start

  3. Apri la tua app web all'URL locale restituito dalla CLI (di solito 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 tuo computer, ma non da altri dispositivi sulla tua 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"
    }
  }

Passaggio 2: visualizza l'anteprima e condividi

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

Dopo il deployment in un canale di anteprima, Firebase pubblica la tua app web a un "URL di anteprima", ovvero un URL temporaneo condivisibile. Quando utilizzi un URL di anteprima, la tua app web interagisce con il backend reale per tutte le risorse del progetto (ad eccezione di eventuali 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 questo 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 di anteprima.

  2. Apri l'app web all'URL di anteprima restituito dalla CLI. Avrà un aspetto simile a questo: 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 di anteprima, incluso come impostare la scadenza di un canale.

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

Passaggio 3: esegui il deployment della versione live

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

Opzione 1: clonare un canale di anteprima nel tuo canale live

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

  1. Da qualsiasi directory, esegui questo 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: questi 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: questo è l'identificatore del canale che attualmente pubblica la versione che vuoi implementare sul tuo canale live.

      • Per un canale live, utilizza live come ID canale.

  2. Visualizza le modifiche (passaggio successivo).

Opzione 2: esegui il deployment dalla directory del progetto locale al tuo canale live

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

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

    firebase deploy --only hosting

  2. Visualizza le modifiche (passaggio successivo).

Passaggio 4: visualizza le modifiche sul sito pubblicato

Entrambe le opzioni precedenti eseguono il deployment dei contenuti e della configurazione di Hosting nei seguenti siti:

  • I sottodomini di Firebase di cui è stato eseguito il provisioning per il tuo 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 ai tuoi siti Hosting

Per limitare il deployment a un sito Hosting specifico, specifica una destinazione di deployment nel comando CLI.

Altre attività e informazioni di deployment

Aggiungere un commento per il deployment

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

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

Aggiungere attività con script pre-deployment e post-deployment

Puoi facoltativamente connettere gli script shell al comando firebase deploy per eseguire attività pre-deployment o post-deployment. Ad esempio, un hook post-deployment potrebbe notificare agli amministratori i nuovi deployment dei contenuti del sito. Per ulteriori dettagli, consulta la documentazione dell'interfaccia a riga di comando Firebase.

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 nuovamente il deployment dei contenuti del tuo 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 eventuali 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 localmente e poi eseguire nuovamente il deployment.

Passaggi successivi