React Academy · Ders

Vercel'e Dağıtım: Sıfır Yapılandırma ve Önizleme URL'leri

Bir GitHub deposunu Vercel'e bağlayın, ortam değişkenlerini yapılandırın ve önizleme dağıtımlarını kullanın.

Vercel'e Dağıtım: Sıfır Yapılandırma ve Önizleme URL'leri, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 1. 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, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Neden Vercel?

Vercel, Next.js ekibi tarafından geliştirilen platformdur. Sıfır yapılandırmalı dağıtım sunar: bir GitHub deposu bağladığınızda Vercel, çerçeveyi otomatik olarak algılar, derler ve her gönderimde dağıtır.

Depo Bağlama

Vercel kontrol panelinden bir GitHub/GitLab/Bitbucket deposunu içe aktarın. Vercel, çerçeveyi (Next.js, Vite, CRA) algılar ve derleme ayarlarını otomatik olarak yapılandırır.

Proje Ayarları

Vercel şunları otomatik olarak algılar: çerçeveyi, derleme komutunu (npm run build), çıktı dizinini (.next, dist) ve kurulum komutunu (npm install). Gerekirse bunları proje ayarlarından geçersiz kılabilirsiniz.

Ortam Değişkenleri

Vercel kontrol panelinde Proje Ayarları → Ortam Değişkenleri bölümüne ortam değişkenlerini ekleyin. Üretim, Önizleme ve Geliştirme ortamları için farklı değerler belirleyin.

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

Önizleme Dağıtımları

Her git dalı gönderimi ve çekme isteği benzersiz bir önizleme URL'si alır (ör. myapp-git-feature-xyz.vercel.app). Birleştirmeden önce inceleme için bu URL'yi paylaşın; elle hazırlama ortamı oluşturmanız gerekmez.

Özel Alan Adları

Vercel kontrol panelinden özel bir alan adı ekleyin. DNS'inizi (A kaydı veya CNAME) Vercel'in IP adreslerine yönlendirin; Vercel, SSL sertifikasının sağlanmasını otomatik olarak yönetir.

vercel.json Yapılandırması

Dağıtım davranışını; yeniden yönlendirmeleri, üstbilgileri, yeniden yazma kurallarını ve bölge seçimini hassas şekilde ayarlayın.

// 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

Terminalden dağıtım yapmak, ortam değişkenlerini yerel olarak çekmek ve projeleri yönetmek için Vercel CLI'yi kullanın.

# 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

Sunucusuz İşlevler

api/ (Pages Router) veya app/api/*/route.ts (App Router) içindeki dosyalar, Vercel'in edge ya da Node.js çalışma zamanında otomatik olarak sunucusuz işlevler olarak dağıtılır.

Dağıtım Kancaları

Harici hizmetlerden dağıtımları tetiklemek için dağıtım kancaları (web kancası URL'leri) oluşturun; bunlar, sitenin yeniden dağıtılmasını gerektiren CMS içerik değişiklikleri için kullanışlıdır.

# 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 Dağıtımı

Nx veya Turborepo monoreposunda Vercel kök dizinini belirli uygulama klasörüne ayarlayın ve derleme komutunu monorepo görev çalıştırıcısını kullanacak şekilde yapılandırın.

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

Kısa Kontrol

Vercel Önizleme Dağıtımı nedir?

Özet

Sıfır yapılandırmalı dağıtımlar için bir Git deposunu Vercel'e bağlayın. Her dal bir önizleme URL'si alır. Ortam değişkenlerini kontrol panelinde ortama göre yönetin, yeniden yönlendirmeler ve üstbilgiler için vercel.json kullanın; terminal tabanlı dağıtımlar ve ortam değişkenlerini çekmek için Vercel CLI'den yararlanın.

Sıkça Sorulan Sorular

“Vercel'e Dağıtım: Sıfır Yapılandırma ve Önizleme URL'leri” dersi ücretsiz mi?

Evet — “Vercel'e Dağıtım: Sıfır Yapılandırma ve Önizleme URL'leri” 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 React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“Vercel'e Dağıtım: Sıfır Yapılandırma ve Önizleme URL'leri” dersinde ne öğreneceğim?

Bir GitHub deposunu Vercel'e bağlayın, ortam değişkenlerini yapılandırın ve önizleme dağıtımlarını kullanın. React 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.

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

Önceden deneyim gerekmez. CoddyKit'te React 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 1. dersidir.

“Vercel'e Dağıtım: Sıfır Yapılandırma ve Önizleme URL'leri” 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 React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React 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

Vercel'e Dağıtım: Sıfır Yapılandırma ve Önizleme URL'leri
AWS S3 ve CloudFront'ta React SPA Barındırma
React/Next.js Uygulamasını Docker'laştırma
React için GitHub Actions CI/CD

← React Academy Sayfasına Dön