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

Prima di eseguirne il deployment sul tuo sito pubblicato, ti consigliamo di visualizzare e testare le modifiche. Firebase Hosting ti consente di visualizzare e testare le modifiche localmente e di interagire con risorse di 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 Integrazione GitHub per il deployment da un pull richiesta.

Prima di iniziare

Completa i passaggi elencati nella Hosting Pagina Inizia, in particolare la le seguenti attività:

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

Facoltativamente, puoi eseguire il deployment dei contenuti e della configurazione Hosting dell'app, ma non è un prerequisito per i passaggi descritti in questa pagina.

Passaggio 1: esegui il test localmente

Se esegui iterazioni rapide o vuoi che la tua app interagisca con le risorse di progetto di backend, puoi testare i contenuti e configurare Hosting a livello locale. Durante i test in locale, Firebase pubblica la tua app web in un ambiente URL.

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

  1. (Facoltativo) Per impostazione predefinita, l'app ospitata localmente interagirà con real, non emulati, le risorse di progetto (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 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 di localhost. Questo significa che potrai accedere ai contenuti ospitati dal sito web del tuo computer ma non da altri dispositivi collegati alla tua 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 apportate alla tua app web prima di pubblicarle, puoi utilizzare i canali di anteprima.

Dopo il deployment in un canale di anteprima, Firebase pubblica la tua applicazione web in un "preview URL", 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 ad eccezione di eventuali "fissate" funzioni nelle tue riscritture config).

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 radice della directory locale del progetto, esegui questo 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 dall'interfaccia a riga di comando. Sarà ad esempio: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

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

Scopri di più sulla gestione dei canali di anteprima. incluse le modalità di impostazione della 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 dal vivo

Quando è tutto pronto per condividere le tue modifiche con il mondo, esegui il deployment di Hosting e configurarli sul tuo canale dal vivo. Firebase offre un paio di opzioni opzioni per questo passaggio, a seconda del caso d'uso (vedi le opzioni di seguito).

Opzione 1: esegui la clonazione da un canale di anteprima al tuo canale dal vivo

Questa opzione ti dà la certezza che il deployment sul tuo canale live La configurazione e i contenuti 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 Hosting siti 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 sta attualmente pubblicando la versione di cui vuoi eseguire il deployment sul tuo canale live.

      • Per un canale dal vivo, usa live come ID canale.

  2. Visualizza le modifiche (passaggio successivo).

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

Questa opzione offre la flessibilità di regolare configurazioni specifiche per dal vivo o distribuirla anche se non hai usato un canale di anteprima.

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

    firebase deploy --only hosting

  2. Visualizza le modifiche (passaggio successivo).

di Gemini Advanced.

Passaggio 4. Visualizza le modifiche sul sito pubblicato

Entrambe le opzioni precedenti consentono di eseguire il deployment dei contenuti Hosting e della configurazione nel seguenti siti:

  • I sottodomini di cui è stato eseguito il provisioning da Firebase per il sito Hosting predefinito e qualsiasi altro sito Altri Hosting siti:
    SITE_ID.web.app (ad esempio PROJECT_ID.web.app)
    SITE_ID.firebaseapp.com (come PROJECT_ID.firebaseapp.com)

  • Eventuali domini personalizzati a cui hai effettuato la connessione i tuoi Hosting siti

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 con e altre informazioni sul deployment Dashboard Hosting nella console Firebase. Ad esempio:

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

Aggiungi attività basate su script di pre-deployment e post-deployment

Facoltativamente, puoi connettere gli script shell al comando firebase deploy per di eseguire attività di pre-deployment. Ad esempio, un hook post-deployment potrebbe avvisare gli amministratori dell'implementazione dei nuovi contenuti del sito. Consulta le Documentazione dell'interfaccia a riga di comando di Firebase per ulteriori dettagli.

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

Quando viene effettuata una richiesta per contenuti statici, Firebase Hosting automaticamente memorizza nella cache i contenuti 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 memorizzazione nella cache di contenuti dinamici.

Pubblicazione tramite HTTPS

Assicurati che tutte le risorse esterne non ospitate I file Firebase Hosting vengono caricati 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, è quello di eliminare i file localmente e quindi rieseguire il deployment.

Passaggi successivi