De Vercel à Netlify : Migration de nos projets frontend

Nous avons migré zelkulon.com et tous les projets clients de Vercel vers Netlify – non pas pour des lacunes techniques, mais par décision délibérée. Voici ce qui s'est vraiment passé, avec tous les pièges.

Pourquoi nous avons migré

Vercel n’a commis aucune erreur technique. Pas de panne, pas de mauvais support, pas de problème de performance. Pourtant, nous avons décidé chez Zelkulon UG de migrer tous nos projets vers Netlify.

La raison : Vercel Free est interdit pour un usage commercial. Quiconque héberge des projets clients avec son agence doit démarrer directement avec Vercel Pro – $20 par membre. Netlify Free autorise l’usage commercial sans restriction. De plus, Vercel est de plus en plus sous pression des investisseurs avec des changements de prix plus agressifs.

Étape 1 – Configurer Netlify

Le démarrage est simple : créer un compte Netlify, lier le dépôt GitHub, saisir les paramètres de build. Attention pour Angular : l’ancienne commande ng build --prod ne fonctionne plus depuis Angular 12.

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

Les variables d’environnement de Vercel peuvent être transférées manuellement. Vercel ne les exporte pas directement – saisissez les valeurs une par une ou transférez-les via la CLI.

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

Étape 2 – L’erreur CORS (presque manquée)

C’était l’erreur la plus coûteuse en temps. Nos services Railway avaient CORS_ORIGINS configuré uniquement avec *.vercel.app. Netlify utilise un domaine différent – le filtre CORS Spring Boot a silencieusement bloqué toutes les requêtes depuis la nouvelle URL.

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

Quiconque inverse l’ordre – désactive d’abord Vercel puis ajoute le domaine Netlify à CORS – aura un site de production cassé pendant toute la durée du redéploiement Railway.

# 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

Étape 3 – Mettre à jour le DNS chez Strato

Strato ne prend pas en charge les enregistrements ALIAS ou ANAME. C’est un problème connu avec les domaines apex. Netlify résout cela avec une IP de load balancer fixe.

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

Les enregistrements DNS existants pour l’e-mail (Google MX, SPF, DKIM, DMARC) restent inchangés. La propagation DNS prend entre 10 minutes et quelques heures selon le TTL.

Étape 4 – Échec du provisioning SSL

⚠ Échec du provisioning du certificat SSL

Problem: Netlify ne pouvait pas émettre de certificat Let’s Encrypt – l’enregistrement CNAME www manquait.

Fix: Ajouter le CNAME pour www, attendre la propagation DNS, puis cliquer sur ‘Retry TLS certificate’ dans Netlify.

Ajouter le CNAME pour www dans Strato (apex-loadbalancer.netlify.com)
Attendre la propagation DNS (vérifier le statut dans Netlify Domain Management)
Dans Netlify : Domain management → HTTPS → Retry TLS certificate

Étape 5 – Problèmes de build Angular

Pour un projet client sous Angular 14, Netlify a interrompu le build avec plusieurs erreurs.

⚠ Conflits de dépendances peer

Problem: Angular 14 + @angular/cdk 12 génèrent des erreurs de dépendances npm lors du build Netlify.

Fix: Définir NPM_FLAGS = --legacy-peer-deps comme variable d’environnement Netlify, ou utiliser npm ci --legacy-peer-deps dans netlify.toml.

# 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: Un état node_modules incohérent entraîne un module webpack manquant.

Fix: Utiliser npm ci au lieu de npm install – force une installation propre basée sur package-lock.json.

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

Étape 6 – Secrets dans le code

Netlify a émis une alerte lors du build : secrets trouvés dans le code source. C’est une fonction de protection – Vercel ne dispose pas de cette vérification.

# 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

Supprimer les valeurs du code et les saisir comme variables d’environnement Netlify. Si les identifiants sont déjà dans l’historique Git : les régénérer immédiatement.

# 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

Étape 7 – Résilier Vercel

Uniquement après un test réussi sur Netlify, jamais avant. Liste de contrôle avant résiliation :

Tous les projets en ligne et stables sur Netlify
Les domaines pointent vers Netlify (DNS vérifié)
Certificats SSL valides
CORS mis à jour sur Railway (domaines Vercel supprimés)
Clients informés (si des projets clients sont concernés)

Vercel Pro : le passage à Free prend effet immédiatement, le remboursement au prorata est automatique. Lors du downgrade, tous les membres de l’équipe sauf le propriétaire sont supprimés.

Netlify vs. Vercel – La comparaison honnête

Fonctionnalité	Vercel	Netlify
Usage commercial Free Plan	❌ Verboten	✅ Erlaubt
Point fort	Next.js / Full-Stack	JAMstack, Multi-Framework
Postgres natif	✅	✅
Formulaires intégrés	❌	✅ (100/Monat gratis)
Tests A/B	❌	✅
Prix Pro	$20/Mitglied	$20/Mitglied

Sur le système de crédits Netlify : le plan Free offre 300 crédits/mois. Les crédits sont consommés par les déploiements (15/déploiement), la bande passante (10/Go) et les fonctions serverless (5/Go-heure). Tous les projets d’une équipe partagent le même pool – quand il est vide, tous les projets passent hors ligne.

Conclusion

La migration elle-même est techniquement accessible. Quiconque connaît les pièges peut terminer en moins d’une heure. Les obstacles concrets :

Ordre CORS : ajouter le domaine Netlify en premier, supprimer le domaine Vercel en dernier
DNS chez Strato : A-Record + CNAME pour www, pas d’ALIAS/ANAME disponible
SSL : échoue sans CNAME www – Retry fonctionne immédiatement après la mise à jour DNS
Flags Angular build : ne pas oublier --configuration production et --legacy-peer-deps
Secrets dans le code : Netlify les détecte et bloque le build – bien, mais surprenant

Pour les agences et freelances souhaitant faire tourner plusieurs projets sur le plan gratuit sans être dans une zone grise juridique, le changement vaut la peine. Quiconque utilise principalement Next.js et paie déjà Vercel Pro n’a pas de raison technique impérieuse de migrer – mais pas de raison de ne pas le faire non plus.