AI ile Yapılan React Sitesi Nasıl Yayınlanır?

Bu rehber Vite ile oluşturulmuş istemci tarafı React SPA içindir. Next.js/SSR projesinde yalnız dist klasörünü aramak doğru değildir. Önce package.json scripts bölümünde vite build kullanıldığını doğrulayın.

1. Üretim çıktısını oluşturun

Güvendiğiniz projede, package-lock.json bulunan kök dizinde:

node --version
npm --version
npm ci
npm run build

Node sürümü projenin engines ve kurulu Vite sürümü gereksinimlerini karşılamalı. npm ci kilit dosyasıyla kurulumu tekrarlar; hata verirse rastgele npm update ile sürümleri değiştirmeyin. Build başarılıysa varsayılan çıktı dist olur; build.outDir değiştirilmişse farklı olabilir.

2. Ortam değerlerini doğru ayırın

VITE_ ile başlayan değerler tarayıcı paketine girebilir; veritabanı veya SMTP parolasını burada saklamayın. Public API URL'sini üretim adresiyle ayarlayıp yeniden build alın. Build sonrasında .env dosyası yüklemek daha önce üretilmiş JavaScript'i değiştirmez.

3. Dist içeriğini yükleyin

Dist klasörünün içindekileri site belge köküne aktarın. Kaynak src, node_modules ve .git klasörünü yüklemeniz gerekmez. Alt dizinde yayın varsa vite.config içindeki base ve router basename değerlerini birlikte uyarlayın.

// vite.config.js: /uygulama/ altında yayın örneği
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({ plugins: [react()], base: '/uygulama/' });

Kök domainde yayın için varsayılan / uygundur. Bu örnek router ayarını değiştirmez; kullandığınız router'da da aynı taban yolu tanımlayın.

4. Doğrudan alt sayfa açılışını düzeltin

Apache/mod_rewrite ve kök domaine kurulmuş SPA için belge kökündeki .htaccess örneği:

RewriteEngine On
RewriteRule ^api(?:/|$) - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

API aynı domainde ise kendi backend yönlendirmesi ayrıca tanımlanmalı; API hatasını index.html ile gizlemeyin. Nginx bu dosyayı okumaz; ilgili location içinde try_files $uri $uri/ /index.html; kullanımı sunucu yöneticisiyle uygulanır. Statik asset isteğinin HTML döndürmesi MIME hatasına neden olur.

5. Doğrulama ve geri dönüş

Önce menüden /hesap/ayarlar sayfasına gidin, sonra adresi doğrudan açıp yenileyin. Konsolda JavaScript/MIME hatası ve Network'te eski API adresi arayın. Giriş gerektiren veriler backend tarafından yetkilendirilmeli; React route gizlemek güvenlik değildir. Hatalı build çıkarsa önceki dist paketini geri koyun; eski hash dosyalarını kullanan açık oturumları hesaba katın.