Testa localmente, condividi le modifiche, quindi distribuisci dal vivo

Prima di eseguire la distribuzione sul tuo sito live, ti consigliamo di visualizzare e testare le modifiche. Firebase Hosting ti consente di visualizzare e testare le modifiche localmente e di interagire con le risorse del progetto di backend emulato. Se hai bisogno che i tuoi compagni di squadra visualizzino e verifichino le modifiche, Hosting può creare URL di anteprima condivisibili e temporanei per il tuo sito. Abbiamo anche a favore di un'integrazione GitHub Per distribuire da una richiesta di pull.

Prima di iniziare

Completare i passaggi elencati nella Operazioni preliminari Page Hosting , in particolare i seguenti compiti:

  1. Installa o aggiorna la CLI di Firebase alla sua versione più recente.
  2. Collega la directory del progetto locale (contenente il contenuto della tua app) al tuo progetto Firebase.

Puoi facoltativamente distribuire il contenuto e la configurazione dell'hosting della tua app, ma non è un prerequisito per i passaggi in questa pagina.

Fase 1: test a livello locale

Se stai effettuando iterazioni rapide o desideri che la tua app interagisca con le risorse del progetto di backend emulato, puoi testare il contenuto e la configurazione dell'hosting in locale. Durante il test in locale, Firebase serve la tua app web a un URL ospitato localmente.

Hosting è parte della Firebase locale emulatore Suite , che permette la vostra applicazione di interagire con i contenuti Hosting emulato e di configurazione, così come eventualmente le risorse di progetto emulati (funzioni, database e regole).

  1. (Opzionale) Per impostazione predefinita, la vostra applicazione ospitata localmente interagirà con reale, non emulata, risorse del progetto (funzioni, database, le regole, ecc.) È possibile invece opzionalmente collegare l'app per utilizzare tutte le risorse del progetto emulato che hai configurato. Per saperne di più: in tempo reale del database | Nuvola Firestore | Funzioni cloud

  2. Dalla radice della directory del tuo progetto locale, esegui il seguente comando:

    firebase emulators:start
  3. Apri la tua applicazione web all'URL locale, restituita 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 localhost . Ciò significa che sarai in grado di accedere ai tuoi contenuti ospitati dal browser web del tuo computer ma non da altri dispositivi sulla tua rete. Se desideri di prova da altri dispositivi locali, configurare il firebase.json in questo modo:

"emulators": {
    // ...

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

Fase 2: anteprima e condivisione

Se desideri che gli altri visualizzino le modifiche alla tua app Web prima della pubblicazione, puoi utilizzare i canali di anteprima.

Dopo la distribuzione in un canale di anteprima, Firebase offre la tua app web a un "URL di anteprima", ovvero un URL temporaneo condivisibile. Quando si utilizza un URL di anteprima, i tuoi interagisce applicazioni Web con il tuo vero backend per tutte le risorse del progetto.

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

  1. Dalla radice della directory del tuo progetto locale, esegui il seguente comando:

    firebase hosting:channel:deploy CHANNEL_ID

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

  2. Apri la tua app Web all'URL di anteprima restituito dalla CLI. Sarà simile a questa: PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app

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

Ulteriori informazioni su gestione dei canali in anteprima , tra cui come impostare la scadenza di un canale.

Firebase Hosting supporta un'azione GitHub che crea e aggiorna automaticamente un URL di anteprima quando si apportano modifiche a una richiesta pull. Ulteriori informazioni su come impostare e utilizzare questa azione GitHub .

Fase 3: distribuzione di Live

Quando sei pronto per condividere le tue modifiche con il mondo, distribuisci i tuoi contenuti di hosting e configurali 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 fornisce la sicurezza che si sta distribuendo al tuo canale live l'esatto contenuto e di configurazione che si è verificato in un canale di anteprima. Ulteriori informazioni sulla clonazione 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 : Questi sono gli ID dei siti di hosting che contengono i canali.

      • Per il tuo sito di hosting predefinito, usa il tuo ID progetto Firebase.
      • Puoi specificare i siti che si trovano nello stesso progetto Firebase o anche in diversi progetti Firebase.
    • SOURCE_CHANNEL_ID : Questa è l'identificatore per il canale che sta attualmente scontando la versione che si desidera distribuire al tuo canale live.

      • Per un canale live, utilizzare live come l'ID del canale.
  2. Visualizzare le modifiche (passo successivo).

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

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

  1. Dalla radice della directory del tuo progetto locale, esegui il seguente comando:

    firebase deploy --only hosting
  2. Visualizzare le modifiche (passo successivo).

Fase 4: visualizzare le modifiche sul tuo sito live

Entrambe le opzioni di cui sopra distribuiscono il contenuto dell'hosting e si configurano sui seguenti siti:

  • I sottodomini forniti da Firebase per il tuo sito di hosting predefinito e qualsiasi altro sito di hosting:
    SITE_ID .web.app (come PROJECT_ID .web.app )
    SITE_ID .firebaseapp.com (come PROJECT_ID .firebaseapp.com )

  • Eventuali domini personalizzati che hai collegato al tuo sito di hosting (s)

Per limitare il deploy di un sito specifico Presentatore, specificare un target deploy nel comando CLI.

Altre attività e informazioni di distribuzione

Aggiungi un commento per la distribuzione

Puoi facoltativamente aggiungere un commento a una distribuzione. Questo commento verrà visualizzato con le altre informazioni di distribuzione sul cruscotto Hosting nella console Firebase. Per esempio:

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

Aggiungi attività con script prima e dopo la distribuzione

È possibile opzionalmente script di shell di connessione alla firebase deploy dei comandi per eseguire operazioni predeploy o postdeploy. Ad esempio, un hook post-distribuzione potrebbe notificare agli amministratori la distribuzione di nuovi contenuti del sito. Fare riferimento alla documentazione di Firebase CLI per ulteriori dettagli.

Memorizzazione nella cache dei contenuti distribuiti

Quando viene effettuata una richiesta per i contenuti statici, Firebase Hosting memorizza nella cache automaticamente il contenuto della CDN. Se si ridistribuisce contenuti del tuo sito, Firebase cancella automaticamente tutti i contenuti statici nella cache in tutto il CDN in modo che le nuove richieste ricevono i nuovi contenuti.

Si noti che è possibile configurare la memorizzazione nella cache di contenuti dinamici .

Servire su HTTPS

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

Prossimi passi