Von Vercel zu Netlify: Migration unserer Frontend-Projekte

Wir haben zelkulon.com und alle Kundenprojekte von Vercel zu Netlify migriert – nicht wegen technischer Mängel, sondern aus einer bewussten Entscheidung. Hier ist was wirklich passiert ist, inklusive aller Fallstricke.

Warum wir gewechselt haben

Vercel hat keine technischen Fehler gemacht. Kein Ausfall, kein schlechter Support, keine Performance-Probleme. Trotzdem haben wir als Zelkulon UG beschlossen, alle unsere Projekte zu Netlify zu migrieren.

Der Grund: Vercel Free ist für kommerzielle Nutzung verboten. Wer mit seiner Agentur Kundenprojekte hosted, muss direkt mit Vercel Pro starten – $20 pro Teammitglied. Netlify Free erlaubt kommerzielle Nutzung ohne Einschränkung. Dazu kommt: Vercel steht zunehmend unter VC-Druck mit aggressiveren Preisänderungen. Netlify agiert unabhängiger.

Schritt 1 – Netlify aufsetzen

Der Start ist unkompliziert: Netlify-Account anlegen, GitHub-Repo verknüpfen, Build-Einstellungen eintragen. Achtung bei Angular: der alte Befehl ng build --prod funktioniert seit Angular 12 nicht mehr.

Next.js
  Build command:     npm run build
  Publish directory: .next

Angular (ab Version 12+)
  Build command:     ng build --configuration production
  Publish directory: dist/<projektname>/browser

Umgebungsvariablen aus Vercel lassen sich manuell übertragen. Vercel exportiert sie nicht direkt – also einfach die Werte nacheinander eintragen oder per CLI übertragen.

# Vercel-Variablen lokal auflisten
vercel env pull .env.vercel

# Dann per Netlify CLI übertragen (oder manuell in der UI):
netlify env:set NEXT_PUBLIC_API_URL https://api.beispiel.de
netlify env:set DATABASE_URL postgres://...

Schritt 2 – Der CORS-Fehler (fast übersehen)

Das war der teuerste Fehler in Zeiteinheiten. Unsere Railway-Services hatten CORS_ORIGINS nur mit *.vercel.app konfiguriert. Netlify verwendet eine andere Domain – der Spring Boot CORS-Filter hat alle Requests der neuen URL geblockt, stillschweigend.

Richtige Reihenfolge:

1. Netlify-Domain zu CORS hinzufügen – Vercel NOCH NICHT entfernen
   CORS_ORIGINS=https://zelkulon.vercel.app,
               https://zelkulon.netlify.app,
               https://zelkulon.com

2. Railway-Service neu deployen

3. Netlify-Deployment testen → CORS funktioniert

4. Erst jetzt: vercel.app aus CORS entfernen
   CORS_ORIGINS=https://zelkulon.com

Wer die Reihenfolge umdreht – also zuerst Vercel abschaltet und dann Netlify-Domain zu CORS hinzufügt – hat für die Dauer des Railway-Redeploys eine kaputte Produktionsseite.

# application-prod.yml (Spring Boot Beispiel)
cors:
  allowed-origins:
    - https://zelkulon.com
    - https://zelkulon.netlify.app   # während der Migration

# Nach abgeschlossener Migration:
cors:
  allowed-origins:
    - https://zelkulon.com

Schritt 3 – DNS bei Strato umstellen

Strato unterstützt kein ALIAS- oder ANAME-Record. Das ist ein bekanntes Problem bei Apex-Domains. Netlify löst das mit einem festen Load-Balancer-IP.

# Apex-Domain (zelkulon.com)
Typ:  A
Name: @
Wert: 75.2.60.5

# www-Subdomain
Typ:  CNAME
Name: www
Wert: apex-loadbalancer.netlify.com

# Diese Records NICHT anfassen:
MX    →  Google Mail
TXT   →  SPF-Record (v=spf1 ...)
TXT   →  DKIM (_domainkey)
TXT   →  DMARC (_dmarc)

Die bestehenden DNS-Einträge für E-Mail (Google MX, SPF, DKIM, DMARC) bleiben unverändert. DNS-Propagation dauert je nach TTL zwischen 10 Minuten und einigen Stunden.

Schritt 4 – SSL schlägt fehl

⚠ SSL-Zertifikat schlägt fehl

Problem: Netlify kann kein Let's Encrypt Zertifikat ausstellen – der www-CNAME-Record fehlte.

Fix: CNAME für www ergänzen, DNS-Propagation abwarten, dann in Netlify 'Retry TLS certificate' klicken.

CNAME für www in Strato eintragen (apex-loadbalancer.netlify.com)
DNS-Propagation abwarten (Status in Netlify Domain Management prüfen)
In Netlify: Domain management → HTTPS → Retry TLS certificate

Schritt 5 – Angular Build-Probleme

Bei einem Kundenprojekt mit Angular 14 hat Netlify den Build mit mehreren Fehlern abgebrochen.

⚠ Peer-Dependency-Konflikte

Problem: Angular 14 + @angular/cdk 12 erzeugen npm-Dependency-Fehler beim Netlify-Build.

Fix: NPM_FLAGS = --legacy-peer-deps als Netlify Environment Variable setzen, oder npm ci --legacy-peer-deps in netlify.toml verwenden.

# Als Netlify Environment Variable:
NPM_FLAGS = --legacy-peer-deps

# Oder in netlify.toml:
[build]
  command = "npm ci --legacy-peer-deps && ng build --configuration production"
  publish = "dist/projektname/browser"

⚠ Cannot find module 'webpack'

Problem: Inkonsistenter node_modules-Stand führt zu fehlendem webpack-Modul.

Fix: npm ci statt npm install verwenden – erzwingt sauberen Install auf Basis der package-lock.json.

[build]
  command = "npm ci --legacy-peer-deps && ng build --configuration production"

Schritt 6 – Secrets im Code

Netlify hat beim Build einen Alert ausgegeben: Secrets im Quellcode gefunden. Das ist eine Schutzfunktion – bei Vercel gibt es diese Prüfung nicht.

# Netlify blockiert den Build wenn Secrets im Code gefunden werden:
# Build blocked: potential secret detected in source code
# SMTP_USER, SMTP_PASS found in src/environments/environment.ts

Werte aus dem Code entfernen und als Netlify Environment Variables eintragen. Falls die Credentials bereits in der Git-History stehen: sofort neu generieren.

# Falls Credentials bereits in der Git-History stehen:
# Sofort neu generieren/ändern – History bereinigen:
git filter-branch --tree-filter   'sed -i "s/echtes_passwort/ENTFERNT/g" src/environments/environment.ts' HEAD
git push origin --force

Schritt 7 – Vercel kündigen

Erst nach erfolgreichem Test auf Netlify, nie vorher. Checkliste vor der Kündigung:

Alle Projekte auf Netlify live und stabil
Domains auf Netlify zeigen (DNS gecheckt)
SSL-Zertifikate gültig
CORS auf Railway aktualisiert (Vercel-Domains entfernt)
Kunden informiert (falls Kundenprojekte betroffen)

Vercel Pro: Der Downgrade auf Free ist sofort wirksam, anteilige Rückerstattung erfolgt automatisch. Beim Downgrade werden alle Teammitglieder außer dem Owner aus dem Team entfernt.

Netlify vs. Vercel – Die ehrliche Übersicht

Merkmal	Vercel	Netlify
Free Plan kommerziell	❌ Verboten	✅ Erlaubt
Stärke	Next.js / Full-Stack	JAMstack, Multi-Framework
Native Postgres	✅	✅
Formulare eingebaut	❌	✅ (100/Monat gratis)
A/B-Testing	❌	✅
Pro Preis	$20/Mitglied	$20/Mitglied

Zum Netlify Credit-System: Im Free Plan stehen 300 Credits/Monat zur Verfügung. Credits werden für Deploys (15/Deploy), Bandwidth (10/GB) und Serverless Functions (5/GB-Std) verbraucht. Alle Projekte eines Teams teilen denselben Pool – wenn der Pool leer ist, gehen alle Projekte offline.

Fazit

Die Migration selbst ist technisch niedrigschwellig. Wer die Fallstricke kennt, ist in unter einer Stunde fertig. Die konkreten Stolperstellen:

CORS-Reihenfolge: Netlify-Domain zuerst hinzufügen, Vercel-Domain zuletzt entfernen
DNS bei Strato: A-Record + CNAME für www, kein ALIAS/ANAME verfügbar
SSL: Scheitert ohne www-CNAME – Retry funktioniert nach DNS-Update sofort
Angular Build-Flags: --configuration production und --legacy-peer-deps nicht vergessen
Secrets im Code: Netlify erkennt sie und blockt den Build – gut, aber überraschend

Für Agenturen und Freelancer, die mehrere Projekte auf dem Free Plan betreiben wollen, ohne rechtlich in der Grauzone zu stehen, lohnt sich der Wechsel. Wer hauptsächlich Next.js einsetzt und Vercel Pro bereits bezahlt, hat keinen zwingenden technischen Grund zu wechseln – aber es gibt ihn eben auch nicht nicht.