Deploy di un Sito su Firebase Hosting: Guida Rapida

Hai sviluppato una splendida web app, una Single Page Application (SPA), o un sito statico e ora è il momento di portarlo online. Firebase Hosting è la soluzione di hosting di Google, progettata per essere incredibilmente veloce, sicura e facile da usare, specialmente per siti statici e web app moderne costruite con framework come React, Angular, Vue o Svelte.

In questa guida rapida, ti mostreremo come effettuare il deploy del tuo sito su Firebase Hosting in pochi e semplici passaggi.

Perché Scegliere Firebase Hosting?

Prima di iniziare, capiamo perché Firebase Hosting è una scelta eccellente:

• Velocità: Utilizza una Content Delivery Network (CDN) globale (la stessa di Google) per distribuire i tuoi contenuti da server vicini ai tuoi utenti, riducendo drasticamente la latenza.
• Sicurezza: Ogni sito ospitato include automaticamente un certificato SSL gratuito, garantendo connessioni HTTPS sicure.
• Facilità d'Uso: Il processo di deploy è intuitivo e veloce tramite la Firebase CLI (Command Line Interface).
• Affidabilità: Gestisce automaticamente la scalabilità e l'alta disponibilità.
• Integrazione: Si integra perfettamente con gli altri servizi Firebase (Firestore, Authentication, Cloud Functions).
• Versionamento: Mantiene uno storico delle tue versioni, permettendoti di fare rollback facilmente.

Prerequisiti

Prima di iniziare, assicurati di avere:

1. Un Account Google (se ne hai uno, sei già a posto).
2. Node.js e npm (o yarn) installati sul tuo computer. Puoi scaricarli da nodejs.org.
3. Un progetto web pronto per il deploy (una cartella con i tuoi file HTML, CSS, JavaScript, immagini, ecc.). Se è un progetto di un framework (React, Angular, Vue), assicurati di aver generato la build di produzione.

Guida Rapida al Deploy

Segui questi passaggi per mettere online il tuo sito.

Passaggio 1: Installa la Firebase CLI

Se non l'hai già fatto, apri il tuo terminale o prompt dei comandi e installa la Firebase Command Line Interface (CLI) globalmente:

npm install -g firebase-tools
# Oppure con yarn:
# yarn global add firebase-tools

Passaggio 2: Accedi a Firebase

Dopo aver installato la CLI, devi accedere al tuo account Google tramite il terminale:

firebase login

Questo comando aprirà una finestra del browser per autenticarti con il tuo account Google. Una volta autenticato, il terminale ti confermerà l'accesso.

Passaggio 3: Inizializza il Tuo Progetto Firebase

Naviga nella directory principale del tuo progetto web (quella che contiene i tuoi file HTML, CSS, JS, o la cartella build/dist se usi un framework).

cd /percorso/alla/tua/cartella/progetto

Ora inizializza il tuo progetto Firebase:

firebase init

Ti verranno poste alcune domande:

1. Which Firebase features do you want to set up for this directory?
   • Usa la barra spaziatrice per selezionare Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys.
   • Premi Invio.
2. Please select a Firebase project for this directory:
   • Se hai già un progetto Firebase esistente, seleziona Use an existing project.
   • Altrimenti, seleziona Create a new project. Ti verrà chiesto di inserire un ID per il tuo progetto (deve essere unico globalmente) e un nome.
3. What do you want to use as your public directory?
   • Questa è la cartella che Firebase Hosting deve servire.
   • Per siti statici semplici: digita . (punto) o public se i tuoi file sono in una sottocartella public.
   • Per progetti React: di solito è build.
   • Per progetti Angular: di solito è dist/tuo-nome-progetto.
   • Per progetti Vue: di solito è dist.
   • Controlla la documentazione del tuo framework o il tuo processo di build per sapere qual è la cartella di output.
   • Premi Invio.
4. Configure as a single-page app (rewrite all urls to /index.html)?
   • Sì (Y) se stai deployando una SPA (React, Angular, Vue, ecc.) o se vuoi che tutti i percorsi non trovati puntino a index.html. Questo è il comportamento più comune per le web app moderne.
   • No (N) se hai un sito statico multi-pagina con URL distinti per ogni pagina.
   • Premi Invio.
5. Set up automatic deploys with GitHub?
   • Sì (Y) se vuoi impostare l'integrazione con GitHub Actions per il deploy automatico ad ogni push sul tuo repository.
   • No (N) se preferisci deployare manualmente.
   • Premi Invio.

Alla fine, Firebase creerà due file nella tua directory principale: .firebaserc (con l'ID del tuo progetto) e firebase.json (con la configurazione di Hosting).

Passaggio 4: (Opzionale) Esegui la Build del Tuo Progetto

Se stai usando un framework come React, Angular o Vue, devi prima generare la versione di produzione del tuo sito. Questo creerà la cartella di output (es. build, dist) che hai specificato nel passaggio precedente.

# Per React
npm run build
# Oppure
# yarn build

# Per Angular
ng build --configuration production

# Per Vue
npm run build
# Oppure
# yarn build

Assicurati che questa cartella (build, dist o quella che hai scelto) contenga i tuoi file statici pronti per essere ospitati.

Passaggio 5: Effettua il Deploy del Tuo Sito

Una volta che hai inizializzato Firebase nel tuo progetto e generato la build (se necessaria), sei pronto per il deploy!

Esegui il seguente comando dalla directory principale del tuo progetto:

firebase deploy --only hosting

Questo comando caricherà tutti i file dalla tua cartella public (o build/dist) su Firebase Hosting. Il processo potrebbe richiedere qualche istante a seconda della dimensione del tuo sito.

Una volta completato, vedrai un messaggio nel terminale che ti fornirà l'URL del tuo sito (es. https://your-project-id.web.app). Clicca su questo link per vedere il tuo sito online!

Configurazione del Dominio Personalizzato (Opzionale ma Consigliato)

Per un sito professionale, vorrai utilizzare il tuo dominio personalizzato (es. miosito.it).

1. Vai alla console Firebase (console.firebase.google.com).
2. Seleziona il tuo progetto.
3. Nel menu a sinistra, vai su Build > Hosting.
4. Clicca su Aggiungi dominio personalizzato e segui le istruzioni.
   • Ti verrà chiesto di inserire il tuo dominio.
   • Dovrai poi aggiungere dei record DNS (A record e/o TXT record) presso il tuo provider di dominio (es. GoDaddy, Namecheap, Aruba). Firebase ti fornirà i valori esatti.
   • Il processo di verifica e propagazione DNS può richiedere da pochi minuti a diverse ore.

Conclusioni

Firebase Hosting rende il deploy di siti web e applicazioni un processo incredibilmente snello e veloce. Con pochi semplici comandi da riga di comando, puoi avere il tuo progetto online, sicuro, scalabile e servito da una CDN globale, permettendoti di concentrarti su ciò che sai fare meglio: sviluppare.