React ve Vue.js Projelerini Flyway ile Deploy Etme (Vite Zero-Config)

React ve Vue.js projelerinizi Vite ve Flyway ile sıfır konfigürasyon kullanarak yayınlayın. Statik yayın mimarisi, SPA yönlendirme, ortam değişkenleri ve otomatik Nginx fallback davranışı.

Okuma Süresi
7 dakika
Hedef Ortam
React & Vue (Vite)
Yapılandırma
Vite Zero-Config

1. Özet ve Ne Öğreneceksiniz

Vite ile derlenmiş statik React ve Vue projelerinde yayın sırasında sürekli çalışan bir Node.js uygulamasına ihtiyaç duyulmaz. Derleme süreci tamamlandıktan sonra uygulama dist/ dizinindeki statik çıktılar üzerinden servis edilir. Bu rehberde projenizi depodan canlıya alma adımlarını, SPA yönlendirme mimarisini, ortam değişkenlerini ve otomatik yayın sürecini inceleyeceksiniz.

2. Bu Rehber Kimler İçin?

  • ✅ Vite ile geliştirilmiş React veya Vue.js projesini canlıya almak isteyen geliştiriciler.
  • ✅ Sunucu yönetimi ve manuel web sunucusu konfigürasyonu gerektirmeyen yayın süreçlerini tercih eden ekipler.
  • ✅ SPA rotalarında sayfa yenilendiğinde oluşabilen 404 hatalarını önlemek isteyen geliştiriciler.

3. Flyway React ve Vue Projelerini Nasıl Yayınlar?

Vite derleme motoru, derleme esnasında kaynak kodlarınızı küçültülmüş (minified) ve içerik hash'lerine sahip statik dosyalara dönüştürür. Yayın ortamında şu prensiplerle çalışır:

  • ✅ Statik Yayın Motoru: Derleme tamamlandıktan sonra statik dosyalar yayın katmanına aktarılır ve HTTPS üzerinden erişilebilir hale gelir. Vite ile üretilen statik çıktılar için sürekli çalışan bir Node.js uygulama süreci başlatılmaz.
  • ✅ Önbellekleme Mantığı: Platform dosya isimlerini değiştirmez. Önbellek yönetimi tamamen Vite tarafından oluşturulan içerik hash'leri üzerinden çalışır. İçerik hash'leri, değişen dosyaların yeni adlarla üretilmesini sağlar. Böylece tarayıcı önbelleği güncel olmayan asset dosyalarını yeni sürüm yerine kullanmaz. Daha fazla bilgi için Statik Önbellekleme Mantığı rehberini inceleyebilirsiniz.
  • ✅ SPA Yönlendirme Desteği: İstemci taraflı rotalar (React Router / Vue Router) için yayın katmanında geri dönüş kuralı otomatik tanımlanır. Ayrıntılar için SPA Routing Rehberi sayfasını ziyaret edebilirsiniz.

4. Projeniz Nasıl Algılanır?

Derleme altyapısı, deponuzdaki dosyaları tararken aşağıdaki kriterleri esas alır:

Package Yapısı
package.json içindeki vite, react veya vue bağımlılıkları.
Paket Yöneticisi
Kök dizindeki package-lock.json, pnpm-lock.yaml, yarn.lock veya bun.lock / bun.lockb.
Çalışma Zamanı
Projenizin gereksinimlerine uygun LTS Node.js derleme ortamı.
Çıktı Dizini
Derleme sonucunda oluşan dist/ klasörü.

5. Adım Adım Deploy Süreci

1
Git Push Algılama
GitHub Webhook bildirimi ile değişiklik anında tespit edilir.
2
İzole Derleme Ortamı
Kaynak kodunuz güvenli derleme container'ına çekilir.
3
Bağımlılık Kurulumu
Lock dosyasına uygun paket yöneticisiyle bağımlılıklar yüklenir (npm ci, pnpm install vb.).
4
Statik Derleme (Vite Build)
package.json içerisindeki build betiği çalıştırılarak statik bundle üretilir.
5
Statik Yayın Katmanı
Derlenen dist/ dizini yayın sunucularına dağıtılır.
6
HTTPS & Canlı Yayın
SSL sertifikası doğrulanır ve uygulama erişime açılır.

6. Yapılandırma ve Kod Örnekleri

React ve Vue.js projelerinin platform üzerinde derlenebilmesi için package.json dosyasında geçerli bir build betiği bulunmalıdır.

React package.json 
{
  "name": "my-react-app",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.3.0",
    "vite": "^5.2.0"
  }
}
Vue 3 package.json 
{
  "name": "my-vue-app",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.27"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "vite": "^5.2.0"
  }
}
💡 Derleme altyapısı yalnızca build betiğini çalıştırmayı zorunlu tutar. Diğer betikler geliştirme ortamına özeldir.

İsteğe Bağlı TypeScript Tip Kontrolü (Type Checking)

Vite, TypeScript dosyalarını JavaScript'e dönüştürür ancak varsayılan olarak tip kontrolü yapmaz. Tip hatalarının deploy işlemini durdurmasını istiyorsanız build betiğinizi React projelerinde tsc --noEmit && vite build, Vue projelerinde ise vue-tsc --noEmit && vite build olarak güncelleyebilirsiniz.

vite.config.js dosyanızda varsayılan kök dizin ayarı: 

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: '/',
  build: {
    outDir: 'dist'
  }
});
💡 Uygulama kök alan adında yayınlanıyorsa varsayılan base: '/' değeri korunabilir. Alt dizinde yayınlanan projelerde bu değer ilgili yayın yoluna göre düzenlenmelidir.

7. Ortam Değişkenleri Nasıl Yönetilir?

Vite, yalnızca VITE_ ön ekiyle tanımlanan değişkenleri import.meta.env üzerinden istemci koduna aktarır. Konsolda tanımlanan değerler, build işlemi başlamadan önce izole derleme ortamına yüklenir. 

// İstemci tarafında değişken okuma örneği:
const apiUrl = import.meta.env.VITE_API_URL;
⚠️ İstemci Tarafı Değişkenleri: VITE_ ön ekiyle tanımlanan tüm değerler kullanıcıya gönderilen JavaScript çıktısında açıkça bulunabilir. Veritabanı parolaları, özel API anahtarları veya sunucu tarafına ait gizli bilgiler istemci değişkenlerinde tutulmamalıdır.

Ortam değişkenlerinin ayrıntılı kullanımı için Ortam Değişkenleri Yönetimi dokümanını ziyaret edebilirsiniz.

8. Flyway Bu Süreçte Neleri Otomatikleştirir?

İşlem Manuel Sunucu Kurulumu Flyway Otomasyonu
Node.js & Bağımlılık Yönetimi Manuel NVM & SSH yönetimi gerektirir Otomatik derleme ortamı kurulur
Nginx SPA Rewrites Manuel vhost ve try_files ayarı gerekir Konfigürasyonsuz otomatik tanımlanır
SSL Sertifikası (HTTPS) Manuel Certbot kurulumu ve cron takibi Otomatik yenilenen SSL sertifikası
Sürekli Entegrasyon (CI/CD) Özel deployment script'leri yazılması gerekir Git push sonrası otomatik deploy hattı

9. Sorun Giderme Rehberi

Hata Mesajı Neden Çözüm
npm ci failed Lock dosyası ile package.json uyuşmuyor. Lokalde npm install çalıştırıp lock dosyasını commit edin.
vite: command not found Vite bağımlılık olarak eklenmemiş. npm install -D vite komutu ile devDependencies alanına ekleyin.
404 Not Found (Sayfa Yenileme) SPA rewrite yapılandırması devreye girmemiştir. Proje türünün Statik (SPA) olarak algılandığını doğrulayın.
Blank White Screen base dizin ayarı hatalı. vite.config.js içerisinde base: '/' ayarını doğrulayın.
VITE_ variable is undefined Ön ek VITE_ olarak girilmemiş. Ortam değişkeni adını VITE_API_URL şeklinde güncelleyin.
ERR_OUTPUT_DIR_NOT_FOUND Build çıktısı dist dışında bir dizine yazılıyor. vite.config.js içinde build.outDir değerini dist yapın.

10. Sıkça Sorulan Sorular

React Router veya Vue Router kullanırken sayfa yenilemede 404 alır mıyım?

Hayır. Statik projelerde istemci taraflı rotaları desteklemek için otomatik geri dönüş yapılandırması aktif edilir.

pnpm, Yarn veya Bun paket yöneticileri destekleniyor mu?

Evet. Kök dizindeki lock dosyası (bun.lock dahil) incelenerek ilgili paket yöneticisi otomatik seçilir.

TypeScript projeleri için ek ayar gerekir mi?

Vite, TypeScript dosyalarını JavaScript'e dönüştürür ancak varsayılan olarak tip kontrolü yapmaz. Tip kontrolünü build adımına dahil etmek için React projelerinde tsc --noEmit, Vue projelerinde vue-tsc --noEmit kullanabilirsiniz.

11. İlgili Dokümanlar

SPA Routing Rehberi →
React ve Vue Router için Nginx fallback ve 404 çözümü.
Ortam Değişkenleri Yönetimi →
Derleme zamanı .env değişkenleri ve istemci güvenliği.
Özel Alan Adı ve SSL Bağlama →
CNAME/A kaydı yönlendirmesi ve otomatik SSL aktivasyonu.
Deploy Loglarını İnceleme →
Derleme hatalarını ve build adımlarını canlı izleme.

12. Sonraki Adımlar

React veya Vue.js uygulamanız artık production ortamında yayındadır. Bundan sonraki adımda özel alan adınızı bağlayabilir, ortam değişkenlerinizi yönetebilir veya Deploy Logları üzerinden her yayın sürecini ayrıntılı olarak inceleyebilirsiniz.

Son güncelleme: 24 Temmuz 2026
Bu sayfayı GitHub'da düzenle