Prima di implementare il tuo sito live, ti consigliamo di visualizzare e testare le tue modifiche. Firebase Hosting ti consente di visualizzare e testare le modifiche in locale e di interagire con le risorse del progetto back-end emulate. Se hai bisogno che i tuoi compagni di squadra visualizzino e verifichino le tue modifiche, l'hosting può creare URL di anteprima condivisibili e temporanei per il tuo sito. Supportiamo persino un'integrazione GitHub da distribuire da una richiesta pull.
Prima di iniziare
Completa i passaggi elencati nella pagina Guida introduttiva all'hosting , in particolare le seguenti attività:
- Installa o aggiorna l'interfaccia a riga di comando di Firebase alla versione più recente.
- Collega la directory del progetto locale (contenente i contenuti della tua app) al tuo progetto Firebase.
Puoi facoltativamente distribuire il contenuto e la configurazione di hosting della tua app, ma non è un prerequisito per i passaggi in questa pagina.
Passaggio 1: prova a livello locale
Se stai effettuando iterazioni rapide o vuoi che la tua app interagisca con le risorse del progetto di back-end emulate, puoi testare il tuo contenuto di hosting e configurare localmente. Durante il test in locale, Firebase pubblica la tua app Web su un URL ospitato localmente.
L'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 emulato (funzioni, database e regole).
(Facoltativo) Per impostazione predefinita, la tua app ospitata localmente interagirà con risorse di progetto reali , non emulate (funzioni, database, regole, ecc.). Puoi invece facoltativamente connettere la tua app per usare qualsiasi risorsa di progetto emulata che hai configurato. Per saperne di più: Database in tempo reale | CloudFirestore | Funzioni cloud
Dalla radice della directory del progetto locale, esegui il seguente comando:
firebase emulators:start
Apri la tua app Web all'URL locale restituito dalla CLI (in genere
http://localhost:5000
).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 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 eseguire il test da altri dispositivi locali, configura il tuo firebase.json
in questo modo:
"emulators": {
// ...
"hosting": {
"port": 5000
"host": "0.0.0.0"
}
}
Quando utilizzi firebase serve
, la tua app interagisce con un back-end emulato per il contenuto e la configurazione del tuo hosting (e facoltativamente funzioni) ma il tuo vero back-end per tutte le altre risorse del progetto.
Dalla radice della directory del progetto locale, esegui il seguente comando:
firebase serve --only hosting
Apri la tua app Web all'URL locale restituito dalla CLI (in genere
http://localhost:5000
).Per aggiornare l'URL locale con le modifiche, aggiorna il browser.
Usa firebase serve
per testare da altri dispositivi locali
Per impostazione predefinita, firebase serve
risponde solo alle richieste provenienti da 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 eseguire il test da altri dispositivi locali, utilizza il flag --host
, in questo modo:
firebase serve --host 0.0.0.0 // accepts requests to any host
Passaggio 2: visualizza l'anteprima e condividi
Se desideri che gli altri visualizzino le modifiche apportate alla tua app Web prima della pubblicazione, puoi utilizzare i canali di anteprima.
Dopo aver eseguito il deployment in un canale di anteprima, Firebase pubblica la tua app Web in un "URL di anteprima", che è un URL temporaneo condivisibile. Quando utilizzi un URL di anteprima, la tua app Web interagisce con il tuo vero back-end per tutte le risorse del progetto (ad eccezione di eventuali funzioni "appuntate" nella tua configurazione di riscritture ).
Tieni presente che sebbene gli URL di anteprima siano difficili da indovinare (poiché contengono un hash casuale), sono pubblici. Quindi, chiunque conosca l'URL può accedervi.
Dalla radice della directory 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 di anteprima.Apri l'app Web all'URL di anteprima restituito dall'interfaccia a riga di comando. Sarà simile a questo:
PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app
Per aggiornare l'URL di anteprima con le modifiche, esegui di nuovo lo stesso comando. Assicurati di specificare lo stesso
CHANNEL_ID
nel comando.
Ulteriori informazioni 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 pull. Scopri come configurare e utilizzare questa azione GitHub .
Passaggio 3: distribuzione in tempo reale
Quando sei pronto per condividere le tue modifiche con il mondo, distribuisci i tuoi contenuti di hosting e configura il 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 certezza che stai implementando sul tuo canale live il contenuto e la configurazione esatti che hai testato in un canale di anteprima. Ulteriori informazioni sulla clonazione delle versioni .
Da qualsiasi directory, eseguire 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, utilizza 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 : questo è l'identificatore del canale che sta attualmente servendo la versione che desideri implementare sul tuo canale live.
- Per un canale live, utilizza
live
come ID canale.
- Per un canale live, utilizza
Visualizza le modifiche (passaggio successivo).
Opzione 2: distribuisci dalla tua directory di progetto locale al tuo canale live
Questa opzione ti offre la flessibilità di regolare le configurazioni specifiche del canale live o di implementare anche se non hai utilizzato un canale di anteprima.
Dalla radice della directory del progetto locale, esegui il seguente comando:
firebase deploy --only hosting
Visualizza le modifiche (passaggio successivo).
Passaggio 4: visualizza le modifiche sul tuo sito live
Entrambe le opzioni di cui sopra distribuiscono il tuo contenuto di hosting e configurano i seguenti siti:
I sottodomini forniti da Firebase per il tuo sito di hosting predefinito e per eventuali siti di hosting aggiuntivi:
SITE_ID .web.app
(comePROJECT_ID .web.app
)
SITE_ID .firebaseapp.com
(comePROJECT_ID .firebaseapp.com
)Eventuali domini personalizzati che hai collegato ai tuoi siti di hosting
Per limitare la distribuzione a un sito di hosting specifico, specifica una destinazione di distribuzione nel comando CLI.
Altre attività di distribuzione e informazioni
Aggiungi un commento per la distribuzione
Facoltativamente, puoi aggiungere un commento a una distribuzione. Questo commento verrà visualizzato con le altre informazioni sulla distribuzione nella dashboard di hosting nella console Firebase. Per esempio:
firebase deploy --only hosting -m "Deploying the best new feature ever."
Aggiungi attività con script pre- e post-distribuzione
Facoltativamente, puoi connettere gli script della shell al comando firebase deploy
per eseguire attività di pre-distribuzione o post-distribuzione. Ad esempio, un hook post-distribuzione potrebbe notificare agli amministratori la distribuzione di nuovi contenuti del sito. Per ulteriori dettagli, fai riferimento alla documentazione della CLI di Firebase .
Memorizzazione nella cache del contenuto distribuito
Quando viene effettuata una richiesta per contenuto statico , Firebase Hosting memorizza automaticamente nella cache il contenuto sul CDN. Se ridistribuisci i contenuti del tuo sito, Firebase cancella automaticamente tutti i contenuti statici memorizzati nella cache attraverso il CDN in modo che le nuove richieste ricevano i nuovi contenuti.
Si noti che è possibile configurare la memorizzazione nella cache del contenuto dinamico .
Servizio su HTTPS
Assicurati che tutte le risorse esterne che non sono ospitate su Firebase Hosting siano 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).
Prossimi passi
Esegui l'integrazione con GitHub e ripeti il contenuto visualizzato in anteprima impostando GitHub Action .
Scopri ulteriori funzionalità di hosting:
Dai un'occhiata alla documentazione completa per l' interfaccia a riga di comando di Firebase .
Preparati a lanciare la tua app:
- Imposta avvisi di budget per il tuo progetto in Google Cloud Console.
- Monitora la dashboard di utilizzo e fatturazione nella console Firebase per ottenere un quadro generale dell'utilizzo del tuo progetto su più servizi Firebase. Puoi anche visitare la dashboard sull'utilizzo dell'hosting per informazioni più dettagliate sull'utilizzo.
- Esamina l' elenco di controllo per il lancio di Firebase .