Frontend Academy · Lektion

Driftsättning till Vercel, Netlify och Cloudflare Pages

Anslut ditt repo till varje plattform, konfigurera byggkommandon och utdatakataloger och förstå förhandsdistributioner för grenar.

Lektion 2 av 416 steg

Driftsättning till Vercel, Netlify och Cloudflare Pages är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

De tre moderna plattformarna för frontendhosting

Vercel, Netlify och Cloudflare Pages är de ledande plattformarna för driftsättning av frontendappar. Alla erbjuder: Git-baserade driftsättningar, förhandsgranskningsgrenar, anpassade domäner, edge-CDN och serverlösa funktioner. Välj en och håll er till den.

Vercel — byggt för Next.js

Skapat av Next.js-teamet. Klassledande Next.js-integration: bildoptimering utan konfiguration, ISR, Edge Functions och Speed Insights. Har även stöd för Vite, Nuxt, Astro och de flesta statiska ramverk.

Driftsättning till Vercel

Anslut ett GitHub-/GitLab-/Bitbucket-kodförråd. Vercel identifierar automatiskt ramverket, kör build och driftsätter.

# 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.

Konfiguration av vercel.json

Åsidosätt standardinställningarna, till exempel byggkommandon, omdirigeringar, headers och rewrites.

{
  "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 — originalet

Var pionjär inom moderna statiska driftsättningar. Har starkt stöd för formulärhantering, identitetshantering och analys. Netlify Functions och Edge Functions för serverlösa funktioner. Utmärkt stöd för Vite, Hugo och Eleventy.

Driftsättning till Netlify

Anslut ett kodförråd eller dra och släpp en byggd mapp. Konfigurera via instrumentpanelen eller 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

Lokal utveckling med serverlösa funktioner.

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

Cloudflare Pages

Driftsätter till Cloudflares globala edge-nätverk. Pages Functions möjliggör serverlös körning i Workers-runtime. Generös gratisnivå. Utmärkt för Astro, Hono och Remix.

Driftsättning till Cloudflare Pages

Anslut ett kodförråd via Cloudflare-instrumentpanelen. Eller använd wrangler CLI.

# 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 för Pages

Cloudflare Pages använder wrangler.toml för konfiguration av 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 = "..."

Förhandsgranskningsdriftsättningar

Alla tre plattformarna skapar en unik URL för varje PR-gren. Granskare kan klicka på URL:en och testa ändringarna isolerat. Det är numera ett standardarbetsflöde för team.

Miljövariabler

Alla tre erbjuder miljövariabler per miljö (produktion, förhandsgranskning och utveckling) via instrumentpanelen eller CLI. Frontendvariabler måste ha ett prefix (Vite: VITE_, Next: NEXT_PUBLIC_) för att skickas med till webbläsaren.

# 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

Anpassade domäner och SSL

Alla tre hanterar SSL-certifikat automatiskt (Let's Encrypt). Peka DNS-postens A/CNAME på deras mål — de utfärdar och förnyar certifikaten. Anpassade domäner ingår utan extra kostnad på alla betalnivåer.

Att välja mellan de tre

Vercel: bäst för Next.js, välpolerad utvecklarupplevelse, något dyrare. Netlify: bäst för formulär och identitetshantering, moget plugin-ekosystem. Cloudflare Pages: bäst edge-prestanda, lägst kostnad i stor skala och utmärkt Workers-integration. Alla tre är utmärkta.

Snabbkontroll

Vilket är standardsättet att skapa en driftsättningsbar förhandsgransknings-URL för en pull request på Vercel/Netlify/Cloudflare Pages?

Besvara frågan i den interaktiva lektionen

Sammanfattning: frontendhosting

Vercel: bäst Next.js-integration. Netlify: formulär, identitetshantering och pluginer. Cloudflare Pages: edge-prestanda och lägst kostnad. Alla tre: Git-baserade automatiska driftsättningar, förhandsgransknings-URL:er per PR, miljövariabler per miljö, automatisk SSL och anpassade domäner. Konfigurera via instrumentpanelen eller plattformens konfigurationsfil (vercel.json, netlify.toml, wrangler.toml).

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Driftsättning till Vercel, Netlify och Cloudflare Pages” gratis?

Ja – hela texten till ”Driftsättning till Vercel, Netlify och Cloudflare Pages” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Driftsättning till Vercel, Netlify och Cloudflare Pages”?

Anslut ditt repo till varje plattform, konfigurera byggkommandon och utdatakataloger och förstå förhandsdistributioner för grenar. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Driftsättning till Vercel, Netlify och Cloudflare Pages”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Frontend Academy-lektionen?

Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

GitHub Actions för frontend: lint, test och build
Driftsättning till Vercel, Netlify och Cloudflare Pages
Miljövariabler i CI
Automatiserade Lighthouse-kontroller

← Tillbaka till Frontend Academy