Ana içeriğe geç
Destek Çevrimiçi
MirrorLooking Glass
RabisuRabisu
Müşteri Paneli
RehberlerBilgi Bankası

Nginx ile React Uygulaması Yayınlama (Ubuntu) | Production Rehberi

Nginx ile React Uygulamasını Ubuntu Üzerinde Yayına Alma​

React uygulamasını canlıya almak yalnızca dosya kopyalamak değildir.
Bu rehber, hızlı, güvenli ve SPA uyumlu bir yayın sürecini anlatır.

Bu Rehberde Ne Öğreneceksiniz?​

  • React uygulaması için production build oluşturmayı
  • Nginx’i React Router ile uyumlu yapılandırmayı
  • Gzip ve cache ayarlarıyla performans artırmayı
  • Let’s Encrypt ile HTTPS geçişini
  • Basit CI/CD mantığını

1. React Projesini Hazırlama ve Derleme​

Önce React projesinin üretim çıktısını alın.

npx create-react-app react-deploy
cd react-deploy
npm run build
  • Bu komut optimize edilmiş build/ klasörünü üretir.

2. Sunucu Dizin Yapısını Oluşturma​

  1. Sunucuya SSH ile bağlanın.

ssh kullanici@sunucu_ip
  1. React dosyaları için web kök dizinini hazırlayın.

sudo mkdir -p /var/www/rabisu.cloud/html
sudo chown -R $USER:$USER /var/www/rabisu.cloud
  • Bu dizin Nginx tarafından servis edilir.

3. Build Dosyalarını Sunucuya Yükleme​

  1. Yerel makineden build çıktısını sunucuya aktarın.

scp -r build/* kullanici@sunucu_ip:/var/www/rabisu.cloud/html
  • Bu işlem React uygulamasını canlıya taşır.

4. React İçin Optimize Edilmiş Nginx Yapılandırması​

  1. SPA’ler için fallback zorunludur.

server {
    listen 80;
    server_name rabisu.cloud www.rabisu.cloud;

    root /var/www/rabisu.cloud/html;
    index index.html;

    gzip on;
    gzip_types text/plain text/css application/javascript application/json;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
    }
}
  • try_files satırı React Router için kritiktir.

Yapılandırmayı test edin:


sudo nginx -t
sudo systemctl reload nginx

5. SSL (HTTPS) Kurulumu​

  1. SEO ve güvenlik için HTTPS zorunludur.

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d rabisu.cloud -d www.rabisu.cloud
  • Bu işlem HTTP → HTTPS yönlendirmesini otomatik yapar.

6. (Opsiyonel) API Reverse Proxy​

  1. Frontend ve backend aynı domain altında çalışabilir.

location /api/ {
    proxy_pass http://localhost:3001;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
  • Bu yapı CORS sorunlarını ortadan kaldırır.

7. (Opsiyonel) CI/CD Mantığı (Kısa)​

  1. React projelerinde en yaygın yaklaşım:

  • npm run build

  • rsync ile /var/www/.../html

  • nginx reload

Bu işlem GitHub Actions veya GitLab CI ile otomatikleştirilebilir.

Sıkça Sorulan Sorular (SSS)​

1. Sayfa yenileyince neden 404 alıyorum? SPA fallback yoktur. try_files /index.html şarttır.

2. Gzip gerçekten fark yaratır mı? Evet. JS dosyalarında %60–80 küçülme sağlar.

3. React dosyaları nereye konmalı? /var/www/domain/html dizinine.

4. Nginx mi Apache mi? React SPA’lerde Nginx daha hızlıdır.

Sonuç​

Bu kurulum ile React uygulamanız:

⚡ Hızlı

🔐 Güvenli

🔁 SPA uyumlu

📈 SEO dostu

hale gelir.

Profesyonel React projelerinizi bu mimariyle Rabisu Bulut altyapısında hemen yayına alabilirsiniz.