Firebase Hosting per App Statiche — Deploy React, Vue e Next.js a Costi Contenuti

Hai un'app React pronta, ma il deploy ti sembra un labirinto tra server, DNS, certificati SSL? Noi di Meteora Web lo vediamo spesso: sviluppatori bravissimi a scrivere codice, ma che perdono ore su hosting e configurazione. Firebase Hosting risolve tutto in pochi minuti, con costi prevedibili e una CDN globale già attiva. In questa guida ti mostriamo come mettere online le tue app statiche React, Vue e Next.js, con esempi reali e nessun tecnicismo inutile.

Come funziona Firebase Hosting per app statiche?

Firebase Hosting è un servizio di Google Cloud progettato per distribuire contenuti statici e app a pagina singola (SPA). Non hai server da gestire: carichi i tuoi file (HTML, JS, CSS, immagini) e Firebase li serve tramite una rete di distribuzione dei contenuti (CDN) con oltre 150 edge node. Il certificato SSL è gratuito e automatico. Puoi collegare un dominio personalizzato, configurare reindirizzamenti e persino eseguire funzioni serverless (Cloud Functions) per contenuti dinamici.

Noi lo usiamo per molti dei nostri progetti: è veloce da impostare, si integra con il resto dell'ecosistema Firebase (Firestore, Authentication, Storage) e la fatturazione è trasparente. Niente sorprese a fine mese.

Che differenza c'è tra Firebase Hosting e un hosting tradizionale?

Un hosting tradizionale (es. Apache/Nginx su un VPS) richiede configurazione del server, manutenzione del sistema operativo, aggiornamenti di sicurezza. Firebase Hosting ti toglie tutto questo: paghi solo lo storage e la banda, e la piattaforma scala automaticamente. Se la tua app diventa virale, non devi preoccuparti di crash – la CDN assorbe il traffico.

Quali sono i vantaggi concreti di Firebase Hosting rispetto ad altre soluzioni?

Abbiamo confrontato Firebase Hosting con Netlify, Vercel e AWS S3+CloudFront. Ecco cosa abbiamo visto:

• Costi prevedibili: Firebase Hosting ha un generoso tier gratuito (10 GB di storage, 360 MB di download al giorno). Se superi, paghi pochi centesimi per GB. Niente costi fissi.
• Integrazione nativa: Se già usi Firebase per backend (Firestore, Auth), l’hosting è un pezzo che si incastra perfettamente.
• SSL automatico: Non devi acquistare o rinnovare certificati. Google lo fa per te.
• Rollback immediato: Ogni deploy ha una versione. Puoi tornare indietro con un clic.
• Preview su branch: Con GitHub Actions puoi creare URL di anteprima per ogni pull request.

Netlify e Vercel sono ottimi per siti statici puri, ma se hai bisogno di un backend serverless o di autenticazione, Firebase offre tutto in un unico ecosistema. Noi lo consigliamo quando il progetto richiede più di un semplice hosting.

Come eseguire il deploy di un'app React su Firebase Hosting?

Vediamo i passi pratici. Presupponiamo che tu abbia già un’app React creata con create-react-app o vite.

1. Installa Firebase CLI

npm install -g firebase-tools

2. Autenticati e inizializza il progetto

firebase login
firebase init hosting

Durante l'inizializzazione ti verrà chiesto:

• Se usare un progetto Firebase esistente o crearne uno nuovo.
• La directory pubblica: per React di solito è build (se usi CRA) o dist (se usi Vite).
• Se configurare come SPA: rispondi Sì – così tutte le rotte vengono reindirizzate a index.html.
• Se sovrascrivere file esistenti: di solito No.

Il comando genera un file firebase.json simile a questo:

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "/.*",
      "/node_modules/"
    ],
    "rewrites": [
      {
        "source": "",
        "destination": "/index.html"
      }
    ]
  }
}

3. Costruisci e deploy

npm run build
firebase deploy --only hosting

Dopo qualche secondo, Firebase ti restituirà l’URL della tua app (es. https://tuo-progetto.web.app). Fine.

E per Vue o Next.js statico, cambia qualcosa?

Il meccanismo è identico. Cambia solo la cartella di output.

Vue (Vite)

Con npm run build la cartella generata è dist. In firebase.json imposti "public": "dist". Stessa procedura.

Next.js statico

Next.js può esportare un sito statico tramite next export. La cartella di output è out. Attenzione: next export non supporta funzionalità server-side come getServerSideProps o API routes. Se le usi, devi considerare Firebase Cloud Functions o passare a SSR con altri servizi. Per un blog statico o un portfolio, è perfetto.

Configurazione:

{
  "hosting": {
    "public": "out",
    "ignore": ["firebase.json", "/.*", "/node_modules/**"],
    "rewrites": [] // non serve SPA, Next.js gestisce le rotte
  }
}

Poi esegui next build && next export && firebase deploy --only hosting.

Come configurare un dominio personalizzato e certificato SSL?

Dopo il deploy, nella console Firebase -> Hosting -> Aggiungi dominio personalizzato. Inserisci il tuo dominio (es. www.tuosito.it). Firebase ti darà un record TXT per la verifica. Poi dovrai aggiungere un record A o CNAME nel DNS del tuo dominio. Firebase fornisce le istruzioni passo-passo. Il certificato SSL viene emesso automaticamente da Let's Encrypt (tramite Google). Il processo richiede qualche minuto.

Consiglio pratico: Se usi Cloudflare per la gestione DNS, imposta la modalità DNS only (non proxy) per evitare conflitti con l'SSL di Firebase.

Quali sono i limiti di Firebase Hosting per app statiche?

Non esiste la soluzione perfetta. Ecco cosa devi sapere:

• Niente SSR nativo: Ogni richiesta serve file statici. Se hai bisogno di rendering server-side per SEO avanzato (es. e-commerce complesso), devi abbinare Firebase Hosting con Cloud Functions o usare un altro servizio.
• Bandwidth limitato nel tier gratuito: 360 MB/giorno. Per siti ad alto traffico, passa al piano Blaze (pay-as-you-go). I costi rimangono contenuti.
• Header personalizzati limitati: Puoi configurare header HTTP solo tramite firebase.json in modo semplice. Per regole avanzate (es. Content Security Policy) si può, ma non è flessibile come un server tradizionale.
• Niente supporto per WebSockets a livello di hosting: Se la tua app usa WebSockets, devi gestirli separatamente (es. Cloud Run).

Come ottimizzare le performance con Firebase Hosting?

La CDN di Google è già veloce, ma puoi migliorare ulteriormente:

• Caching aggressivo: Nel firebase.json imposta durate di cache per file statici (CSS, JS, immagini).
• Precaricamento dei font e delle immagini critiche con link rel=preload nel tuo HTML.
• Minimizzazione dei file: Usa build tool che già comprimono (Vite, Next.js).
• Brottle compression: Firebase Hosting supporta gzip e Brotli automaticamente.

Esempio di configurazione cache:

{
  "hosting": {
    "public": "build",
    "headers": [
      {
        "source": "/*.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "/*.@(jpg|jpeg|gif|png|webp|svg)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=7776000"
          }
        ]
      }
    ]
  }
}

Come automatizzare il deploy con GitHub Actions?

Per non dover lanciare manualmente firebase deploy, imposta un workflow CI/CD. Ecco un esempio per React:

name: Deploy to Firebase Hosting
on:
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
          channelId: live
          projectId: tuo-progetto-id

Dovrai generare un token di servizio Firebase (JSON) e salvarlo come secret nel repository. Il workflow scrive automaticamente su Firebase ogni push su main.

Quanto costa Firebase Hosting per un'app statica?

Il tier gratuito Spark include 10 GB di storage, 360 MB di download al giorno, 2 GB di banda in più per Cloud Functions. Per un sito personale o una PMI con qualche centinaio di visitatori al giorno, è gratuito. Il piano Blaze (a consumo) aggiunge possibilità di acquistare bandwidth extra e attivare risorse aggiuntive. Il costo per GB di download extra è bassissimo (intorno a 0,12€/GB).

Noi consigliamo di partire con Spark e passare a Blaze solo quando il traffico cresce. In ogni caso, niente canoni fissi – paghi solo quello che usi.

Cosa fare adesso

Se hai un'app React, Vue o Next.js che vuoi mettere online con Firebase Hosting, segui questa checklist:

1. Crea un progetto Firebase (se non ce l'hai).
2. Installa Firebase CLI e autenticati.
3. Inizializza l'hosting con firebase init hosting.
4. Configura la directory pubblica: build, dist o out.
5. Esegui il build e il deploy manuale per testare.
6. Collega il tuo dominio personalizzato (opzionale).
7. Automatizza con GitHub Actions per non pensare più al deploy.
8. Monitora le performance con la console Firebase (sezione Hosting mostra richieste, bandwidth, errori).

Per un quadro completo su tutti i servizi Firebase (database, autenticazione, funzioni), leggi la nostra guida pillar su Firebase.