Frontend Academy · Lektion

Deployment til Vercel, Netlify og Cloudflare Pages

Forbind Deres repository til hver platform, konfigurér build-kommandoer og outputmapper, og forstå preview-deployments for branches.

Lektion 2 af 416 trin

Deployment til Vercel, Netlify og Cloudflare Pages er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

De tre moderne frontend-hostingplatforme

Vercel, Netlify og Cloudflare Pages er de førende platforme til udrulning af frontend-applikationer. Alle tilbyder: Git-baserede udrulninger, forhåndsvisningsgrene, brugerdefinerede domæner, edge-CDN og serverløse funktioner. Vælg én, og hold dig til den.

Vercel — bygget til Next.js

Oprettet af Next.js-teamet. Markedsledende Next.js-integration: Image Optimization uden konfiguration, ISR, Edge Functions og Speed Insights. Understøtter også Vite, Nuxt, Astro og de fleste statiske frameworks.

Udrulning til Vercel

Forbind et GitHub-, GitLab- eller Bitbucket-repository. Vercel registrerer automatisk frameworket, kører build og udruller.

# 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 af vercel.json

Overskriv standardindstillingerne (byggekommandoer, omdirigeringer, headere og omskrivninger).

{
  "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 — den oprindelige

Var pioner inden for moderne statiske udrulninger. Stærk formularhåndtering, identitet og analyse. Netlify Functions og Edge Functions til serverløse funktioner. Fremragende understøttelse af Vite, Hugo og Eleventy.

Udrulning til Netlify

Forbind et repository, eller træk og slip en bygget mappe. Konfigurer via kontrolpanelet 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 udvikling med serverløse funktioner.

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

Cloudflare Pages

Udruller til Cloudflares globale edge-netværk. Pages Functions giver serverløs funktionalitet på Workers-runtime. Generøst gratisniveau. Fremragende til Astro, Hono og Remix.

Udrulning til Cloudflare Pages

Forbind et repository via Cloudflare-kontrolpanelet. Eller brug 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 til Pages

Cloudflare Pages bruger wrangler.toml til konfiguration af Workers og 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 = "..."

Forhåndsvisningsudrulninger

Alle tre platforme opretter en unik URL for hver PR-gren. Reviewere kan klikke på URL'en og teste ændringer isoleret. Det er nu en standardarbejdsgang for teams.

Miljøvariabler

Alle tre tilbyder variabler pr. miljø (produktion, forhåndsvisning og udvikling) via kontrolpanelet eller CLI. Frontend-variabler skal have et præfiks (Vite: VITE_, Next: NEXT_PUBLIC_) for at blive sendt til browseren.

# 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

Brugerdefinerede domæner og SSL

Alle tre håndterer SSL-certifikater automatisk (Let's Encrypt). Peg din DNS A/CNAME-post på deres mål — så udsteder og fornyer de certifikaterne. Brugerdefinerede domæner er gratis på alle betalingsniveauer.

Valg mellem de tre

Vercel: bedst til Next.js, poleret udvikleroplevelse, lidt dyrere. Netlify: bedst til formularer og identitet, modent plugin-økosystem. Cloudflare Pages: bedst edge-ydeevne, laveste pris i stor skala og fremragende Workers-integration. Alle tre er fremragende.

Hurtigt tjek

Hvad er standardmåden at oprette en udrulbar forhåndsvisnings-URL til en pull request på Vercel, Netlify eller Cloudflare Pages?

Besvar den i den interaktive lektion

Opsummering: Frontend-hosting

Vercel: bedste Next.js-integration. Netlify: formularer, identitet og plugins. Cloudflare Pages: edge-ydeevne og laveste pris. Alle tre: Git-baserede automatiske udrulninger, forhåndsvisnings-URL'er pr. PR, miljøvariabler pr. miljø, automatisk SSL og brugerdefinerede domæner. Konfigurer via kontrolpanelet eller den platformspecifikke konfigurationsfil (vercel.json, netlify.toml, wrangler.toml).

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Deployment til Vercel, Netlify og Cloudflare Pages” gratis?

Ja — hele teksten til “Deployment til Vercel, Netlify og Cloudflare Pages” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Deployment til Vercel, Netlify og Cloudflare Pages”?

Forbind Deres repository til hver platform, konfigurér build-kommandoer og outputmapper, og forstå preview-deployments for branches. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Deployment til Vercel, Netlify og Cloudflare Pages”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

GitHub Actions til frontend: lint, test og build
Deployment til Vercel, Netlify og Cloudflare Pages
Miljøvariabler i CI
Automatiserede Lighthouse-tjek

← Tilbage til Frontend Academy