Frontend Academy · Lezione

Deploy su Vercel, Netlify e Cloudflare Pages

Collegare il repository a ciascuna piattaforma, configurare i comandi di build e le directory di output e comprendere i deploy di anteprima per i branch

Lezione 2 di 416 passaggi

Deploy su Vercel, Netlify e Cloudflare Pages è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Il trio moderno dell'hosting frontend

Vercel, Netlify e Cloudflare Pages sono le principali piattaforme per il deploy delle app frontend. Tutte offrono: deploy basati su Git, branch di anteprima, domini personalizzati, CDN edge e funzioni serverless. Scelga una piattaforma e si attenga a quella.

Vercel — progettato per Next.js

Creato dal team di Next.js. Integrazione di livello superiore con Next.js: Image Optimization senza configurazione, ISR, Edge Functions e Speed Insights. Supporta anche Vite, Nuxt, Astro e la maggior parte dei framework statici.

Eseguire il deploy su Vercel

Colleghi un repository GitHub/GitLab/Bitbucket. Vercel rileva automaticamente il framework, esegue build e avvia il deploy.

# Manual deploy (any project):
npm install -g vercel
vercel login
vercel       # preview deploy
vercel --prod  # production deploy

# Or push to main — auto-deploys via Git integration.

Configurazione di vercel.json

Sovrascriva i valori predefiniti, ad esempio comandi di build, redirect, header e rewrite.

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "headers": [{
    "source": "/(.*)",
    "headers": [{ "key": "X-Frame-Options", "value": "DENY" }]
  }],
  "redirects": [{ "source": "/old", "destination": "/new", "permanent": true }]
}

Netlify — l'originale

Ha introdotto i deploy statici moderni. Offre una solida gestione dei moduli, identity e analytics. Netlify Functions ed Edge Functions per il serverless. Supporto eccellente per Vite/Hugo/Eleventy.

Eseguire il deploy su Netlify

Colleghi un repository oppure trascini una cartella già compilata. Configuri il progetto tramite la dashboard o netlify.toml.

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200   # SPA fallback

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"

Netlify CLI

Sviluppo locale con funzioni serverless.

npm install -g netlify-cli
netlify login
netlify init
netlify dev       # local server with functions
netlify deploy    # preview
netlify deploy --prod

Cloudflare Pages

Esegue il deploy sulla rete edge globale di Cloudflare. Pages Functions offre funzionalità serverless sul runtime Workers. Il piano gratuito è generoso. È una soluzione eccellente per Astro, Hono e Remix.

Eseguire il deploy su Cloudflare Pages

Colleghi un repository tramite la dashboard di Cloudflare. In alternativa, usi la CLI wrangler.

# Direct upload via wrangler:
npm install -g wrangler
wrangler login
wrangler pages deploy ./dist --project-name=my-site

# Or push to GitHub — auto-deploys.

wrangler.toml per Pages

Cloudflare Pages usa wrangler.toml per la configurazione di Workers/Functions.

# wrangler.toml
name = "my-site"
compatibility_date = "2024-01-01"
pages_build_output_dir = "dist"

[vars]
API_URL = "https://api.example.com"

[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "..."

Deploy di anteprima

Tutte e tre le piattaforme creano un URL univoco per ogni branch di una PR. I revisori possono fare clic e testare le modifiche in isolamento. Ormai è il workflow standard dei team.

Variabili d'ambiente

Tutte e tre offrono variabili specifiche per ambiente (produzione, anteprima, sviluppo) tramite dashboard o CLI. Le variabili frontend devono avere un prefisso (Vite: VITE_, Next: NEXT_PUBLIC_) per essere incluse nel browser.

# Vercel:
vercel env add API_URL production

# Netlify:
netlify env:set API_URL https://api.example.com

# Cloudflare Pages:
wrangler pages secret put API_URL

Domini personalizzati e SSL

Tutte e tre gestiscono automaticamente i certificati SSL (Let's Encrypt). Indichi il record DNS A/CNAME verso il loro target: emettono e rinnovano i certificati. I domini personalizzati sono gratuiti in tutti i piani a pagamento.

Scegliere tra le tre piattaforme

Vercel: la scelta migliore per Next.js, DX curata, leggermente più costosa. Netlify: la scelta migliore per moduli e identity, con un ecosistema maturo di plugin. Cloudflare Pages: le migliori prestazioni edge, il costo più basso su larga scala e un'ottima integrazione con Workers. Tutte e tre sono eccellenti.

Verifica rapida

Qual è il modo standard per creare un URL di anteprima con deploy per una pull request su Vercel/Netlify/Cloudflare Pages?

Rispondi nella lezione interattiva

Riepilogo: hosting frontend

Vercel: la migliore integrazione con Next.js. Netlify: moduli, identity e plugin. Cloudflare Pages: prestazioni edge e costo più basso. Tutte e tre: auto-deploy basati su Git, URL di anteprima per ogni PR, variabili d'ambiente per ogni ambiente, SSL automatico e domini personalizzati. Configuri il progetto tramite la dashboard o il file di configurazione della piattaforma (vercel.json, netlify.toml, wrangler.toml).

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 41
Lezioni: 163

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Deploy su Vercel, Netlify e Cloudflare Pages» è gratuita?

Sì — il testo completo di «Deploy su Vercel, Netlify e Cloudflare Pages» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Deploy su Vercel, Netlify e Cloudflare Pages»?

Collegare il repository a ciascuna piattaforma, configurare i comandi di build e le directory di output e comprendere i deploy di anteprima per i branch Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Deploy su Vercel, Netlify e Cloudflare Pages»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

GitHub Actions per il frontend: lint, test e build
Deploy su Vercel, Netlify e Cloudflare Pages
Variabili d’ambiente nella CI
Controlli Lighthouse automatizzati

← Torna a Frontend Academy