Vercel'den Netlify'a: Frontend Projelerimizin Migrasyonu

Neden geçiş yaptık

Vercel hiçbir teknik hata yapmadı. Kesinti yok, kötü destek yok, performans sorunu yok. Yine de Zelkulon UG olarak tüm projelerimizi Netlify'a taşımaya karar verdik.

Neden: Vercel Free ticari kullanım için yasaktır. Ajansıyla müşteri projelerini barındıran herkesin doğrudan Vercel Pro ile başlaması gerekir – üye başına $20. Netlify Free, kısıtlama olmaksızın ticari kullanıma izin verir. Bunun yanı sıra Vercel, daha agresif fiyat değişiklikleriyle giderek artan VC baskısı altındadır.

Adım 1 – Netlify kurulumu

Başlangıç basit: Netlify hesabı oluşturun, GitHub repo'yu bağlayın, build ayarlarını girin. Angular için dikkat: ng build --prod komutu Angular 12'den beri çalışmıyor.

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

Vercel'deki ortam değişkenleri manuel olarak aktarılabilir. Vercel bunları doğrudan dışa aktarmaz – değerleri teker teker girin veya CLI üzerinden aktarın.

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

Adım 2 – CORS hatası (neredeyse gözden kaçtı)

Bu zaman açısından en pahalı hataydı. Railway servislerimizde CORS_ORIGINS yalnızca *.vercel.app ile yapılandırılmıştı. Netlify farklı bir domain kullanıyor – Spring Boot CORS filtresi yeni URL'den gelen tüm istekleri sessizce engelledi.

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

Sıralamayı tersine çeviren – önce Vercel'i devre dışı bırakan, sonra Netlify domainini CORS'a ekleyen – birinin Railway yeniden deploy süresi boyunca bozuk bir production sitesi olur.

# 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

Adım 3 – Strato'da DNS güncellemesi

Strato ALIAS veya ANAME kaydını desteklemiyor. Bu, apex domainlerde bilinen bir sorundur. Netlify bunu sabit bir load balancer IP'siyle çözüyor.

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

E-posta için mevcut DNS kayıtları (Google MX, SPF, DKIM, DMARC) değişmeden kalır. DNS yayılımı TTL'ye bağlı olarak 10 dakika ile birkaç saat arasında sürer.

Adım 4 – SSL sertifikası başarısız

• Strato'da www için CNAME ekleyin (apex-loadbalancer.netlify.com)
• DNS yayılımını bekleyin (Netlify Domain Management'ta durumu kontrol edin)
• Netlify'da: Domain management → HTTPS → Retry TLS certificate

Adım 5 – Angular build sorunları

Angular 14'lü bir müşteri projesinde Netlify build'i birkaç hatayla durdurdu.

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

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

Adım 6 – Kodda gizli anahtarlar

Netlify build sırasında bir uyarı verdi: kaynak kodda gizli anahtar bulundu. Bu bir koruma özelliği – Vercel'de böyle bir kontrol yok.

# 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

Değerleri koddan kaldırın ve Netlify ortam değişkenleri olarak girin. Kimlik bilgileri Git geçmişinde zaten varsa: hemen yenileyin.

# 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

Adım 7 – Vercel aboneliğini iptal etme

Yalnızca Netlify'da başarılı bir testten sonra, asla önce değil. İptal öncesi kontrol listesi:

• Tüm projeler Netlify'da canlı ve stabil
• Domainler Netlify'a işaret ediyor (DNS doğrulandı)
• SSL sertifikaları geçerli
• Railway'de CORS güncellendi (Vercel domainleri kaldırıldı)
• Müşteriler bilgilendirildi (müşteri projeleri etkileniyorsa)

Vercel Pro: Free'ye düşürme anında etkili olur, orantılı geri ödeme otomatik yapılır. Düşürme sırasında owner dışındaki tüm ekip üyeleri takımdan çıkarılır.

Netlify vs. Vercel – Dürüst karşılaştırma

Netlify kredi sistemi hakkında: Free planda ayda 300 kredi mevcuttur. Krediler deploy (15/deploy), bant genişliği (10/GB) ve sunucusuz işlevler (5/GB-saat) tarafından tüketilir. Takımdaki tüm projeler aynı havuzu paylaşır – havuz boşaldığında tüm projeler çevrimdışı kalır.

Sonuç

Migrasyon teknik olarak düşük eşiklidir. Tuzakları bilen biri bir saatten kısa sürede bitirebilir. Somut engeller:

• CORS sıralaması: önce Netlify domainini ekleyin, en son Vercel domainini kaldırın
• Strato'da DNS: A-Record + www için CNAME, ALIAS/ANAME mevcut değil
• SSL: www CNAME olmadan başarısız – DNS güncellemesinden sonra Retry anında çalışır
• Angular build bayrakları: --configuration production ve --legacy-peer-deps'i unutmayın
• Kodda gizli anahtar: Netlify onları tespit eder ve build'i engeller – iyi ama şaşırtıcı

Birden fazla projeyi yasal gri alanda kalmadan Free planda çalıştırmak isteyen ajanslar ve freelancer'lar için geçiş değerlidir. Ağırlıklı olarak Next.js kullanan ve Vercel Pro'yu zaten ödeyen birinin geçiş için zorlayıcı teknik bir nedeni yok – ama geçmemek için de bir neden yok.