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, ti consigliamo di 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 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 persino un'integrazione di GitHub per eseguire il deployment da una richiesta di pull.

Prima di iniziare

Completa i passaggi indicati nella Hosting pagina Inizia, 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 progetto Firebase.

Se vuoi, puoi 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 localmente

Se stai eseguendo rapide iterazioni 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 su 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 Hosting emulati, nonché, facoltativamente, con le risorse del progetto emulati (funzioni, database e regole).

  1. (Facoltativo) Per impostazione predefinita, l'app ospitata localmente interagirà con le risorse del 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 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.

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 come segue:

"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 di anteprima.

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

Tieni presente che, anche se sono difficili da indovinare (poiché contengono un hash random), gli URL di anteprima 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 es. 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. L'aspetto sarà 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 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 in produzione

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

Opzione 1: clona da un canale di anteprima al tuo canale live

Questa opzione ti garantisce di implementare nel tuo canale dal vivo i contenuti e la 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: si tratta degli ID dei siti Hosting che contengono i canali.

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

    • SOURCE_CHANNEL_ID: si tratta dell'identificatore del canale che attualmente pubblica la versione che vuoi implementare nel tuo canale dal vivo.

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

  2. Visualizza le modifiche (passaggio successivo).

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

Questa opzione ti offre la flessibilità di modificare le configurazioni specifiche del canale in diretta o di eseguire il deployment anche se non hai utilizzato un canale di 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 precedenti implementano i contenuti e la configurazione di Hosting nei seguenti siti:

  • I sottodomini di cui è stato eseguito il provisioning da Firebase per il tuo sito Hosting predefinito e per eventuali altri siti Hosting:
    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 della CLI.

Altre attività e informazioni di deployment

Aggiungi un commento per il deployment

Se vuoi, puoi aggiungere un commento a un deployment. Questo commento verrà visualizzato insieme alle altre informazioni di deployment nella dashboard Hosting della console Firebase. Ad esempio:

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

Aggiungere attività basate su script di predeployment e postdeployment

Se vuoi, puoi collegare script shell al comando firebase deploy per eseguire attività di predeployment o postdeployment. Ad esempio, un hook postdeploy potrebbe informare gli amministratori dei nuovi implementazioni 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 li memorizza automaticamente nella cache sulla CDN. Se reimplementi i 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 file selezionati da un sito di cui è stato eseguito il deployment è eliminarli localmente e poi eseguire nuovamente il deployment.

Passaggi successivi