Frontend Academy · Ders

Vercel, Netlify ve Cloudflare Pages'e Dağıtım

Deponuzu her platforma bağlamayı, derleme komutlarını ve çıktı dizinlerini yapılandırmayı ve dallar için önizleme dağıtımlarını anlamayı öğrenin.

Vercel, Netlify ve Cloudflare Pages'e Dağıtım, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Modern Frontend Barındırma Üçlüsü

Vercel, Netlify ve Cloudflare Pages, frontend uygulamalarını dağıtmak için önde gelen platformlardır. Üçü de Git tabanlı dağıtımlar, önizleme dalları, özel alan adları, uç CDN ve sunucusuz işlevler sunar. Birini seçin ve ona bağlı kalın.

Vercel — Next.js için Tasarlandı

Next.js ekibi tarafından oluşturulmuştur. Sınıfının en iyi Next.js tümleştirmesini sunar: sıfır yapılandırmalı görsel optimizasyonu, ISR, uç işlevleri ve Speed Insights. Ayrıca Vite, Nuxt, Astro ve çoğu statik çatıyı destekler.

Vercel'e Dağıtım

Bir GitHub/GitLab/Bitbucket deposu bağlayın. Vercel çatıyı otomatik olarak algılar, build komutunu çalıştırır ve dağıtımı gerçekleştirir.

# 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 Yapılandırması

Varsayılanları geçersiz kılın (derleme komutları, yönlendirmeler, üst bilgiler, yeniden yazımlar).

{
  "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 — Öncü Platform

Modern statik dağıtımların öncülüğünü yaptı. Güçlü form işleme, kimlik yönetimi ve analiz özellikleri sunar. Sunucusuz kullanım için Netlify Functions ve Edge Functions sağlar. Vite/Hugo/Eleventy desteği mükemmeldir.

Netlify'ye Dağıtım

Bir depo bağlayın veya derlenmiş bir klasörü sürükleyip bırakın. Yapılandırmayı gösterge paneli ya da netlify.toml üzerinden yapın.

# 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

Sunucusuz işlevlerle yerel geliştirme.

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

Cloudflare Pages

Cloudflare'ın küresel uç ağına dağıtım yapar. Workers çalışma zamanında sunucusuz kullanım için Pages Functions sağlar. Cömert bir ücretsiz katmanı vardır. Astro, Hono ve Remix için mükemmeldir.

Cloudflare Pages'e Dağıtım

Cloudflare gösterge paneli üzerinden bir depo bağlayın. Alternatif olarak wrangler CLI kullanın.

# Direct upload via wrangler:
npm install -g wrangler
wrangler login
wrangler pages deploy ./dist --project-name=my-site

# Or push to GitHub — auto-deploys.

Pages için wrangler.toml

Cloudflare Pages, Workers/Functions yapılandırması için wrangler.toml kullanır.

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

Önizleme Dağıtımları

Üç platform da her PR dalı için benzersiz bir URL oluşturur. İnceleyenler bu URL'ye tıklayarak değişiklikleri yalıtılmış bir ortamda sınayabilir. Bu, artık standart ekip iş akışıdır.

Ortam Değişkenleri

Üçü de gösterge paneli veya CLI üzerinden her ortam için ayrı değişkenler (üretim, önizleme, geliştirme) sunar. Tarayıcıya gönderilebilmeleri için frontend değişkenlerine bir ön ek getirilmelidir (Vite: VITE_, Next: NEXT_PUBLIC_).

# 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

Özel Alan Adları ve SSL

Üçü de SSL sertifikalarını otomatik olarak yönetir (Let's Encrypt). DNS A/CNAME kaydınızı onların hedeflerine yönlendirin; sertifikaları oluşturup yenilerler. Özel alan adları, ücretli tüm katmanlarda ücretsizdir.

Üçü Arasında Seçim Yapmak

Vercel: Next.js için en iyisi, özenli DX, biraz daha pahalı. Netlify: formlar ve kimlik yönetimi için en iyisi, olgun eklenti ekosistemi. Cloudflare Pages: en iyi uç performansı, büyük ölçekte en düşük maliyet, Workers ile mükemmel tümleştirme. Üçü de mükemmeldir.

Hızlı Kontrol

Vercel/Netlify/Cloudflare Pages üzerinde bir PR için dağıtıma hazır bir önizleme URL'si oluşturmanın standart yolu nedir?

Özet: Frontend Barındırma

Vercel: en iyi Next.js tümleştirmesi. Netlify: formlar, kimlik yönetimi ve eklentiler. Cloudflare Pages: uç performansı, en düşük maliyet. Üçü de Git tabanlı otomatik dağıtımlar, PR başına önizleme URL'leri, ortam başına ortam değişkenleri, otomatik SSL ve özel alan adları sunar. Yapılandırmayı gösterge paneli veya platforma özgü yapılandırma dosyasıyla (vercel.json, netlify.toml, wrangler.toml) yapın.

Sıkça Sorulan Sorular

“Vercel, Netlify ve Cloudflare Pages'e Dağıtım” dersi ücretsiz mi?

Evet — “Vercel, Netlify ve Cloudflare Pages'e Dağıtım” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Vercel, Netlify ve Cloudflare Pages'e Dağıtım” dersinde ne öğreneceğim?

Deponuzu her platforma bağlamayı, derleme komutlarını ve çıktı dizinlerini yapılandırmayı ve dallar için önizleme dağıtımlarını anlamayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Vercel, Netlify ve Cloudflare Pages'e Dağıtım” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Ön Uç için GitHub Actions: Lint, Test ve Derleme
Vercel, Netlify ve Cloudflare Pages'e Dağıtım
CI'da Ortam Değişkenleri
Otomatik Lighthouse Denetimleri

← Frontend Academy Sayfasına Dön