React+Laravel Dağıtım Rehberi

React+Laravel projesini dağıtmak, frontend yapı süreci ve backend çalışma ortamı arasındaki etkileşimde gezinmeyi gerektirir. React (Vite + Tailwind ile) statik dosyalar (HTML, CSS, JS) haline gelir ve bunlar dist klasöründe saklanır. Laravel ise bir PHP çalışma zamanı, bir web sunucusu (örn. Nginx) ve bir MySQL veritabanı gerektirir. Frontend Yapı Süreci kaynak kodunu dağıtılabilir eserler haline dönüştürürken, Backend Yapı Süreci Composer’ı kullanarak PHP bağımlılıklarını vendor klasörüne kurar. Bu süreçler arasında uyumsuzluk olması—örneğin, derlenmemiş React kodunu dağıtmak veya eksik Laravel bağımlılıkları—kaynaklar veya çalışma zamanı hataları nedeniyle bozuk uygulamalara yol açar.

Dağıtımın Önemi

Doğru barındırma ve dağıtım, iki nedenle kritik öneme sahiptir: farklı cihazlarda test etme ve üretim için hazırlık. Geçici barındırma platformları (örn. Vercel, Netlify) genellikle sunucu erişimini kısıtlar ve geliştiricileri önceden oluşturulmuş eserleri dağıtmaya zorlar. Örneğin, node_modules veya vendor klasörlerini terminal erişimi olmadan bir sunucuya yüklemek, bu klasörlerin ortam spesifik olması ve gereksiz dosyalarla dolu olması nedeniyle bağımlılık uyuşmazlıklarına yol açar. Bunun yerine, bağımlılıkların paket-lock.json ve composer.lock kullanılarak sunucuda kurulması gerekmektedir; bu, sürüm tutarlılığını sağlamak için bilinen bir uygulamadır: Dependency Locking.

Ortak Hata Modları

Ortam Yanlış Yapılandırması, kaynak ayarlarının sert kodlanması veya açık .env dosyalarının güvenlik ihlallerine veya çalışma zamanı hatalarına yol açması gibi yaygın bir hata modudur. Örneğin, Laravel’in .env dosyası, veritabanı kimlik bilgileri gibi hassas veriler içerir. Heroku gibi barındırma sağlayıcıları, bu değişkenlerin panelleri aracılığıyla ayarlanmasını gerektirir; sürüm kontrolüne yüklenmesi yerine. Bu mekanizmanın göz ardı edilmesi, kimlik bilgilerini herkese açık havuzlara açarak, ücretsiz barındırma platformlarının sınırlı güvenlik özellikleriyle daha da arttırılmış bir riske yol açar.

Geçici Test İçin Ücretsiz Barındırma Seçenekleri

React+Laravel projenizi dağıtmadan önce farklı cihazlarda test etmek, tarayıcılar arası tutarsızlıklar ve API entegrasyon sorunlarını yakalamak için kritik öneme sahiptir. Ücretsiz barındırma platformları geçici bir kum havuzu sunar, ancak bu platformların sınırlamaları dikkatli bir seçim yapmayı gerektirir. Aşağıda, güvenilir seçenekler, mekanizmaları ve kurulum talimatları ele alınmaktadır.

1. Vercel (Frontend) + Heroku (Backend)

• Mekanizma: Vercel’in sunucusuz mimarisi, React’in dist klasörünü otomatik olarak dağıtırken, Heroku’nun buildpack’leri Laravel bağımlılıklarını composer.json üzerinden kurar.
• Kurulum Adımları:
  • React: dist klasörünü GitHub entegrasyonu aracılığıyla Vercel’e itiniz. Neden? Vercel’in kenar ağı, statik varlıkların teslimini optimize ederek gecikmeyi azaltır.
  • Laravel: Heroku’ya web: php artisan serve –port $PORT ile birlikte bir Procfile ekleyin. Risk: composer.lock olmaksızın, Heroku uyuşmaz bağımlılıklar yükleyebilir, Laravel’in otomatik yükleyicisini bozabilir.
• Sınırlamalar: Heroku’nun ücretsiz katmanı, 30 dakika hareketsiz kaldığında uykuya geçer, bu uzun vadeli testler için uygun değildir. Çözüm: Uygulamayı periyodik olarak pinglemek için bir cron işi kullanın.

2. Netlify (Frontend) + Render (Backend)

• Mekanizma: Netlify, React’in dist klasörünü bir yapı betiği aracılığıyla dağıtırken, Render’ın Docker tabanlı ortamı Laravel’in PHP çalışma zamanı tutarlılığını garanti eder.
• Kurulum Adımları:
  • React: netlify.toml içinde [build] command = “npm run build” ayarlayın. Neden? Tailwind’in CSS’sinin derleme sırasında doğru şekilde temizlenmesini sağlar.
  • Laravel: Render’a FROM laravel:8.0 içeren bir Dockerfile yükleyin. Risk: Dockerfile’da EXPOSE 80 eksik olması HTTP isteklerini engeller ve 502 hatasına neden olur.
• Sınırlamalar: Render’ın ücretsiz katmanı, dağıtımları 500 MB ile sınırlıdır, bu da Laravel’in vendor klasörünün optimize edilmesini gerektirir. Çözüm: composer.json içindeki geliştirme bağımlılıklarını hariç tutun.

3. GitHub Pages (Frontend) + 000Webhost (Backend)

• Mekanizma: GitHub Pages, React’in dist klasörünü Jekyll aracılığıyla servis ederken, 000Webhost, PHP 7.4 ortamı ve MySQL sunar.
• Kurulum Adımları:
  • React: dist klasörünü gh-pages dalına itin. Neden? GitHub Pages kök dizindeki HTML dışındaki dosyaları göz ardı eder, .env dosyasının kazara ifşasını önler.
  • Laravel: 000Webhost’a FTP aracılığıyla yükleyin. Kritik Risk: 000Webhost, Composer erişimini bulunmadığı için bağımlılıkların manuel kurulmasını gerektirir. Mekanizma: composer install olmaksızın, Laravel’in otomatik yükleyici hatası verir, Class ‘App\Http\Kernel’ bulunamadı.
• Sınırlamalar: 000Webhost, uygulamanıza reklamlar ekler. Çözüm: Test sırasında bir reklam engelleyici kullanın, ancak bu gerçek kullanıcı deneyimini gizler.

Sonuç

React+Laravel proje dağıtımı için, frontend ve backend yapı süreçlerini ayırmak, bağımlılıkları kilitleme dosyaları aracılığıyla yönetmek ve barındırma platformu kısıtlarıyla uyum sağlamak kritik öneme sahiptir. Yanlış yapılandırmaları ve güvenlik risklerini önlemek için her zaman .env dosyalarını sürüm kontrolüne yüklememek gerekir; hosting platformu panellerinden ortam değişkenlerini güvenli bir şekilde yönetmelisiniz. Ayrıca, her zaman composer.lock ve package-lock.json dosyalarını repoya ekleyin.

Kaynak: Orijinal Makale