React Academy · Lektion

Deployment auf Vercel: Zero Config und Preview-URLs

Verbinden Sie ein GitHub-Repository mit Vercel, konfigurieren Sie Umgebungsvariablen und verwenden Sie Preview-Deployments.

Deployment auf Vercel: Zero Config und Preview-URLs ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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 React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Vercel?

Vercel ist die von dem Next.js-Team entwickelte Plattform. Sie bietet Deployment ohne Konfiguration: Verbinden Sie ein GitHub-Repository, und Vercel erkennt automatisch das Framework, erstellt die Anwendung und stellt sie bei jedem Push bereit.

Ein Repository verbinden

Importieren Sie über das Vercel-Dashboard ein GitHub-/GitLab-/Bitbucket-Repository. Vercel erkennt das Framework (Next.js, Vite, CRA) und konfiguriert die Build-Einstellungen automatisch.

Projekteinstellungen

Vercel erkennt automatisch: Framework, Build-Befehl (npm run build), Ausgabeverzeichnis (.next, dist) und Installationsbefehl (npm install). Überschreiben Sie diese Werte bei Bedarf in den Projekteinstellungen.

Umgebungsvariablen

Fügen Sie im Vercel-Dashboard unter Projekteinstellungen → Umgebungsvariablen Umgebungsvariablen hinzu. Legen Sie unterschiedliche Werte für die Umgebungen Production, Preview und Development fest.

# In Vercel dashboard:
# NEXT_PUBLIC_API_URL = https://api.example.com  (Production)
# NEXT_PUBLIC_API_URL = https://api-staging.example.com  (Preview)

# In code:
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

Preview-Deployments

Jeder Push eines Git-Branches und jeder Pull Request erhält eine eigene Preview-URL (z. B. myapp-git-feature-xyz.vercel.app). Teilen Sie diese vor dem Mergen zur Überprüfung – eine manuelle Staging-Umgebung ist nicht erforderlich.

Benutzerdefinierte Domains

Fügen Sie im Vercel-Dashboard eine benutzerdefinierte Domain hinzu. Verweisen Sie Ihren DNS-Eintrag (A-Record oder CNAME) auf die IP-Adressen von Vercel; Vercel kümmert sich automatisch um die Ausstellung des SSL-Zertifikats.

vercel.json-Konfiguration

Passen Sie das Deployment-Verhalten an: Weiterleitungen, Header, Rewrites und die Auswahl der Region.

// vercel.json
{
  "redirects": [
    { "source": "/old-blog/:path*", "destination": "/blog/:path*", "permanent": true }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "no-store" }]
    }
  ],
  "regions": ["iad1"] // deploy edge functions to US East
}

Vercel-CLI

Verwenden Sie die Vercel-CLI, um vom Terminal aus zu deployen, Umgebungsvariablen lokal abzurufen und Projekte zu verwalten.

# Install:
npm install -g vercel

# Link project and deploy:
vercel

# Pull env variables for local dev:
vercel env pull .env.local

# Deploy to production:
vercel --prod

Serverless Functions

Dateien in api/ (Pages Router) oder app/api/*/route.ts (App Router) werden auf Vercel automatisch als Serverless Functions in der Edge- oder Node.js-Laufzeitumgebung bereitgestellt.

Deploy Hooks

Erstellen Sie Deploy Hooks (Webhook-URLs), um Deployments von externen Diensten auszulösen – nützlich für Änderungen an CMS-Inhalten, die ein erneutes Deployment der Website erfordern.

# Trigger a deploy from a CMS webhook:
curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_xxx/yyy

# In Sanity Studio:
// Call this URL on document publish

Monorepo-Deployment

Legen Sie in einem Nx- oder Turborepo-Monorepo das Stammverzeichnis von Vercel auf den Ordner der jeweiligen App fest und konfigurieren Sie den Build-Befehl so, dass der Task-Runner des Monorepos verwendet wird.

# Vercel project settings:
# Root Directory: apps/web
# Build Command: npx nx build web --prod
# Output Directory: apps/web/.next

Kurztest

Was ist ein Vercel Preview Deployment?

Zusammenfassung

Verbinden Sie ein Git-Repository mit Vercel, um Deployments ohne Konfiguration zu ermöglichen. Jeder Branch erhält eine Preview-URL. Verwalten Sie Umgebungsvariablen pro Umgebung im Dashboard, verwenden Sie vercel.json für Weiterleitungen und Header und die Vercel-CLI für Deployments und das Abrufen von Umgebungsvariablen im Terminal.

Häufig gestellte Fragen

Ist die Lektion „Deployment auf Vercel: Zero Config und Preview-URLs“ kostenlos?

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

Was lerne ich in „Deployment auf Vercel: Zero Config und Preview-URLs“?

Verbinden Sie ein GitHub-Repository mit Vercel, konfigurieren Sie Umgebungsvariablen und verwenden Sie Preview-Deployments. Du übst React 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 React Academy zu starten?

Keine Vorkenntnisse erforderlich. React 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 1 von 4.

Wie lange dauert die Lektion „Deployment auf Vercel: Zero Config und Preview-URLs“?

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 React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React 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

Deployment auf Vercel: Zero Config und Preview-URLs
Eine React-SPA auf AWS S3 und CloudFront hosten
Eine React-/Next.js-App in Docker ausführen
GitHub-Actions-CI/CD für React

← Zurück zu React Academy