Frontend Academy · Lektion

Bereitstellung auf Vercel, Netlify und Cloudflare Pages

Verbinden Sie Ihr Repository mit jeder Plattform, konfigurieren Sie Build-Befehle und Ausgabeverzeichnisse und verstehen Sie Preview-Deployments für Branches.

Bereitstellung auf Vercel, Netlify und Cloudflare Pages ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Das moderne Trio für Frontend-Hosting

Vercel, Netlify und Cloudflare Pages sind die führenden Plattformen für die Bereitstellung von Frontend-Apps. Alle bieten: Git-basierte Deployments, Preview-Branches, benutzerdefinierte Domains, Edge-CDN und serverlose Funktionen. Wählen Sie eine aus und bleiben Sie dabei.

Vercel — für Next.js entwickelt

Erstellt vom Next.js-Team. Erstklassige Next.js-Integration: Image Optimization ohne Konfiguration, ISR, Edge Functions und Speed Insights. Unterstützt auch Vite, Nuxt, Astro und die meisten statischen Frameworks.

Auf Vercel bereitstellen

Verbinden Sie ein GitHub-/GitLab-/Bitbucket-Repository. Vercel erkennt das Framework automatisch, führt build aus und stellt es bereit.

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

vercel.json-Konfiguration

Überschreiben Sie die Standardwerte (Build-Befehle, Weiterleitungen, Header, 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 — das Original

Hat moderne statische Deployments maßgeblich geprägt. Leistungsstarke Formularverarbeitung, Identity und Analytics. Netlify Functions und Edge Functions für serverlose Anwendungen. Hervorragende Unterstützung für Vite/Hugo/Eleventy.

Auf Netlify bereitstellen

Verbinden Sie ein Repository oder ziehen Sie einen erstellten Ordner per Drag-and-drop hinein. Konfigurieren Sie es über das Dashboard oder 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

Lokale Entwicklung mit serverlosen Funktionen.

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

Cloudflare Pages

Stellt auf Cloudflares globalem Edge-Netzwerk bereit. Pages Functions ermöglichen serverlose Anwendungen in der Workers-Laufzeit. Großzügiges kostenloses Kontingent. Hervorragend für Astro, Hono und Remix.

Auf Cloudflare Pages bereitstellen

Verbinden Sie ein Repository über das Cloudflare-Dashboard. Oder verwenden Sie die 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 verwendet wrangler.toml für die Konfiguration von 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 = "..."

Preview-Deployments

Alle drei Plattformen erstellen für jeden PR-Branch eine eindeutige URL. Reviewer können darauf klicken und Änderungen isoliert testen. Das ist inzwischen der Standard-Workflow für Teams.

Umgebungsvariablen

Alle drei bieten Umgebungsvariablen pro Umgebung (Produktion, Preview, Entwicklung) über das Dashboard oder die CLI. Frontend-Variablen müssen ein Präfix haben (Vite: VITE_, Next: NEXT_PUBLIC_), damit sie an den Browser ausgeliefert werden.

# 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

Benutzerdefinierte Domains und SSL

Alle drei verwalten SSL-Zertifikate automatisch (Let's Encrypt). Verweisen Sie mit Ihrem DNS-A-/CNAME-Record auf das Ziel des jeweiligen Anbieters – dieser stellt die Zertifikate aus und erneuert sie. Benutzerdefinierte Domains sind in allen kostenpflichtigen Tarifen kostenlos.

Die drei Anbieter im Vergleich

Vercel: am besten für Next.js, ausgefeilte DX, etwas teurer. Netlify: am besten für Formulare/Identity, ausgereiftes Plugin-Ökosystem. Cloudflare Pages: beste Edge-Performance, niedrigste Kosten bei großer Skalierung, hervorragende Workers-Integration. Alle drei sind ausgezeichnet.

Kurzer Check

Was ist der Standardweg, um für einen Pull Request auf Vercel/Netlify/Cloudflare Pages eine bereitstellbare Preview-URL zu erstellen?

Zusammenfassung: Frontend-Hosting

Vercel: beste Next.js-Integration. Netlify: Formulare/Identity/Plugins. Cloudflare Pages: Edge-Performance, niedrigste Kosten. Alle drei: automatische Git-basierte Deployments, Preview-URLs pro PR, Umgebungsvariablen pro Umgebung, automatisches SSL und benutzerdefinierte Domains. Konfiguration über das Dashboard oder die plattformspezifische Konfigurationsdatei (vercel.json, netlify.toml, wrangler.toml).

Häufig gestellte Fragen

Ist die Lektion „Bereitstellung auf Vercel, Netlify und Cloudflare Pages“ kostenlos?

Ja — der vollständige Text von „Bereitstellung auf Vercel, Netlify und Cloudflare Pages“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Bereitstellung auf Vercel, Netlify und Cloudflare Pages“?

Verbinden Sie Ihr Repository mit jeder Plattform, konfigurieren Sie Build-Befehle und Ausgabeverzeichnisse und verstehen Sie Preview-Deployments für Branches. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Bereitstellung auf Vercel, Netlify und Cloudflare Pages“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

GitHub Actions für Frontends: Linting, Tests und Build
Bereitstellung auf Vercel, Netlify und Cloudflare Pages
Umgebungsvariablen in CI
Automatisierte Lighthouse-Prüfungen

← Zurück zu Frontend Academy