Frontend Academy · leksjon

Distribusjon til Vercel, Netlify og Cloudflare Pages

Koble repoet ditt til hver plattform, konfigurer byggekommandoer og output-mapper, og forstå forhåndsvisningsdistribusjoner for grener.

Leksjon 2 av 416 trinn

Distribusjon til Vercel, Netlify og Cloudflare Pages er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Den moderne trioen for frontend-hosting

Vercel, Netlify og Cloudflare Pages er de ledende plattformene for frontend-applikasjoner. Alle tilbyr Git-baserte deployer, forhåndsvisningsgrener, egendefinerte domener, edge-CDN og serverløse funksjoner. Velg én og bruk den konsekvent.

Vercel – laget for Next.js

Opprettet av Next.js-teamet. Integrasjonen med Next.js er best i klassen: Image Optimization uten konfigurering, ISR, Edge Functions og Speed Insights. Støtter også Vite, Nuxt, Astro og de fleste statiske rammeverk.

Deploye til Vercel

Koble til et GitHub/GitLab/Bitbucket-repo. Vercel oppdager rammeverket automatisk, kjører build og deployer applikasjonen.

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

Konfigurering av vercel.json

Overstyr standardinnstillingene for byggekommandoer, omdirigeringer, headere og omskrivinger.

{
  "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 – originalen

Var pioner innen moderne deployer av statiske applikasjoner. Har god støtte for skjemaer, identitet og analyse. Netlify Functions og Edge Functions gir serverløse funksjoner. Svært god støtte for Vite, Hugo og Eleventy.

Deploye til Netlify

Koble til et repo, eller dra og slipp en bygget mappe. Konfigurer via kontrollpanelet 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 utvikling med serverløse funksjoner.

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

Cloudflare Pages

Deployer til Cloudflares globale edge-nettverk. Pages Functions gir serverløse funksjoner på Workers-runtime-miljøet. Generøs gratiskvote. Utmerket for Astro, Hono og Remix.

Deploye til Cloudflare Pages

Koble til et repo via Cloudflare-kontrollpanelet. Alternativt kan wrangler CLI brukes.

# 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 for Pages

Cloudflare Pages bruker wrangler.toml til konfigurasjon 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 = "..."

Forhåndsvisningsdeployer

Alle tre plattformene oppretter en unik URL for hver PR-gren. Gjennomgåere kan klikke på URL-en og teste endringene isolert. Dette er nå en standard arbeidsflyt for team.

Miljøvariabler

Alle tre tilbyr variabler per miljø (production, preview og development) via kontrollpanelet eller CLI. Frontend-variabler må ha et prefiks (Vite: VITE_, Next: NEXT_PUBLIC_) for å bli sendt til nettleseren.

# 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

Egendefinerte domener og SSL

Alle tre håndterer SSL-sertifikater automatisk (Let's Encrypt). Pek DNS A/CNAME-posten mot målet deres – plattformene utsteder og fornyer sertifikatene. Egendefinerte domener er inkludert i alle betalte nivåer.

Velge mellom de tre

Vercel: best for Next.js, gjennomarbeidet utvikleropplevelse, noe dyrere. Netlify: best for skjemaer og identitet, modent plugin-økosystem. Cloudflare Pages: best edge-ytelse, lavest kostnad i stor skala og god Workers-integrasjon. Alle tre er utmerkede.

Hurtigsjekk

Hva er standardmåten å opprette en deploybar forhåndsvisnings-URL for en pull request på Vercel/Netlify/Cloudflare Pages?

Besvar den i den interaktive leksjonen

Oppsummering: frontend-hosting

Vercel: best Next.js-integrasjon. Netlify: skjemaer, identitet og plugins. Cloudflare Pages: edge-ytelse og lavest kostnad. Alle tre: Git-baserte automatiske deployer, forhåndsvisnings-URL-er per PR, miljøvariabler per miljø, automatisk SSL og egendefinerte domener. Konfigurer via kontrollpanelet eller den plattformspesifikke konfigurasjonsfilen (vercel.json, netlify.toml, wrangler.toml).

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Distribusjon til Vercel, Netlify og Cloudflare Pages» gratis?

Ja – hele teksten i «Distribusjon til Vercel, Netlify og Cloudflare Pages» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Distribusjon til Vercel, Netlify og Cloudflare Pages»?

Koble repoet ditt til hver plattform, konfigurer byggekommandoer og output-mapper, og forstå forhåndsvisningsdistribusjoner for grener. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Distribusjon til Vercel, Netlify og Cloudflare Pages»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

GitHub Actions for frontend: lint, test og build
Distribusjon til Vercel, Netlify og Cloudflare Pages
Miljøvariabler i CI
Automatiserte Lighthouse-kontroller

← Tilbake til Frontend Academy