Prima della 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 backend emulate. Se hai bisogno che i tuoi compagni di squadra visualizzino e testino le tue modifiche, Hosting può creare URL di anteprima temporanei e condivisibili per il tuo sito. Supportiamo anche un'integrazione GitHub per la distribuzione da una richiesta pull.
Prima di iniziare
Completa i passaggi elencati nella pagina Iniziale dell'hosting , in particolare le seguenti attività:
- Installa o aggiorna la CLI di Firebase alla versione più recente.
- Collega la directory del progetto locale (contenente il contenuto della tua app) al tuo progetto Firebase.
Facoltativamente puoi distribuire il contenuto e la configurazione dell'hosting della tua app, ma non è un prerequisito per i passaggi in questa pagina.
Passaggio 1: test locale
Se stai eseguendo iterazioni rapide o desideri che la tua app interagisca con le risorse del progetto backend emulate, puoi testare il contenuto dell'hosting e configurarlo localmente. Durante il test locale, Firebase fornisce la tua app Web a un URL ospitato localmente.
L'hosting fa parte di Firebase Local Emulator Suite , che consente alla tua app di interagire con il contenuto e la configurazione dell'hosting emulato , nonché facoltativamente con le risorse del progetto emulato (funzioni, database e regole).
(Facoltativo) Per impostazione predefinita, l'app ospitata localmente interagirà con risorse di progetto reali , non emulate (funzioni, database, regole, ecc.). Puoi invece facoltativamente connettere la tua app per utilizzare qualsiasi risorsa di progetto emulata che hai configurato. Ulteriori informazioni: Database in tempo reale | Cloud Fire Store | Funzioni del cloud
Dalla radice della directory del progetto locale, esegui il comando seguente:
firebase emulators:start
Apri la tua app Web nell'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 di localhost
. Ciò significa che potrai accedere ai 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 firebase.json
in questo modo:
"emulators": {
// ...
"hosting": {
"port": 5000
"host": "0.0.0.0"
}
}
Passaggio 2: visualizza l'anteprima e condividi
Se desideri che altri visualizzino le modifiche alla tua app Web prima di renderla attiva, puoi utilizzare i canali di anteprima.
Dopo la distribuzione su un canale di anteprima, Firebase fornisce la tua app Web a un "URL di anteprima", che è 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 (ad eccezione di eventuali funzioni "bloccate" nella tua rewrites config ).
Tieni presente che, sebbene gli URL di anteprima siano difficili da indovinare (poiché contengono un hash casuale), sono pubblici. Pertanto, chiunque conosca l'URL può accedervi.
Dalla radice della directory del progetto locale, esegui il comando seguente:
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 costruire l'URL di anteprima associato al canale di anteprima.Apri la tua app Web nell'URL di anteprima restituito dalla CLI. Apparirà qualcosa del genere:
PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app
Per aggiornare l'URL di anteprima con le modifiche, esegui nuovamente lo stesso comando. Assicurati di specificare lo stesso CHANNEL_ID
nel comando.
Passaggio 3: distribuzione live
Opzione 1: clona da un canale di anteprima al tuo canale live
Da qualsiasi directory, esegui il comando seguente: firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live Sostituisci ciascun segnaposto con quanto segue: SOURCE_SITE_ID e TARGET_SITE_ID : questi sono gli ID dei siti Hosting che contengono i canali. Per il tuo sito di hosting predefinito, utilizza l'ID progetto Firebase. Puoi specificare i siti che si trovano nello stesso progetto Firebase o anche in progetti Firebase diversi.
SOURCE_CHANNEL_ID : questo è l'identificatore del canale che attualmente offre la versione che desideri distribuire sul tuo canale live. Per un canale dal vivo, utilizza live
come ID del canale.
Visualizza le modifiche (passaggio successivo).
Opzione 2: distribuisci dalla directory del progetto locale al tuo canale live
Dalla radice della directory del progetto locale, esegui il comando seguente: firebase deploy --only hosting Visualizza le modifiche (passaggio successivo).
Passaggio 4: visualizza le modifiche sul tuo sito live
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
Altre attività e informazioni di distribuzione
Aggiungi un commento per la distribuzione
firebase deploy --only hosting -m "Deploying the best new feature ever."
Aggiungi attività basate su script di pre-distribuzione e post-distribuzione
firebase deploy
per eseguire attività di pre- o post-distribuzione. Ad esempio, un hook post-distribuzione potrebbe avvisare gli amministratori della distribuzione di nuovi contenuti del sito. Per ulteriori dettagli, fare riferimento alla documentazione della CLI di Firebase .
Memorizzazione nella cache dei contenuti distribuiti
Servizio su HTTPS
Prossimi passi
Integra con GitHub e ripeti il contenuto in anteprima configurando l'azione GitHub . Scopri ulteriori funzionalità di hosting: Dai un'occhiata alla documentazione completa per la CLI Firebase . Preparati a lanciare la tua app: Configura avvisi sul budget per il tuo progetto nella console Google Cloud. Monitora il dashboard Utilizzo e fatturazione nella console Firebase per ottenere un quadro generale dell'utilizzo del tuo progetto su più servizi Firebase. Puoi anche visitare il dashboard Utilizzo dell'hosting per informazioni sull'utilizzo più dettagliate. Consulta l' elenco di controllo per il lancio di Firebase .