Eğer NestJS ile backend ve Next.js ile frontend geliştirdiğiniz tam kapsamlı bir uygulamayı dağıtmak istiyorsanız, mutlaka Nginx ismini duyacaksınız.

Bu rehberde tüm bu soruları açık ve pratik bir şekilde cevaplayacağız. DevOps bilgisine ihtiyacınız yok — sadece temel web geliştirme deneyimi yeterli.

🌐 Nginx Nedir?

Nginx (okunuşu “Engine-X”), yüksek performanslı bir web sunucusu ve ters proxy sunucusudur. Milyonlarca web sitesi tarafından kullanılmaktadır.

Tam kapsamlı uygulamalarda aşağıdaki görevleri üstlenir:

1. Statik Dosya Sunucusu — HTML, CSS, JS ve görseller gibi statik içerikleri tarayıcıya doğrudan sunabilir.
2. Ters Proxy — İstemci isteklerini, iç portlarda çalışan backend ve frontend servislerine yönlendirir.
3. SSL Sonlandırma — HTTPS şifrelemesini SSL sertifikaları ile sağlar.
4. Yük Dengeleyici — Trafiği birden fazla backend servisine dağıtabilir.
5. Güvenlik Katmanı — Trafiği filtreleyebilir, sınırlandırabilir veya engelleyebilir.

Örnek: https://yourdomain.com/api/users isteği Nginx tarafından http://backend:5000/api/users adresine yönlendirilir.

🔍 Neden Full-Stack Dağıtımlarda Nginx Kullanılır?

✅ 1. Tek Giriş Noktası

Backend’inizi 5000, frontend’inizi 3000, veritabanınızı 5432 portundan yayınlamak yerine, Nginx ile tüm trafiği sadece 80 veya 443 portundan karşılayabilirsiniz.

Bu yöntem DNS ayarlarını, tarayıcı URL’lerini ve güvenliği çok daha basit hale getirir.

✅ 2. HTTPS & SSL Desteği

Tarayıcılar HTTPS bağlantı bekler. Çoğu hosting firması HTTP üzerinden yayın yapan uygulamaları desteklemez. Nginx sayesinde SSL sertifikaları (Certbot kullanarak) ile HTTPS kolayca entegre edilebilir.

✅ 3. Performans & Yük Dengeleme

Nginx asenkron ve olay tabanlı çalışır. Geleneksel sunuculara göre çok daha hızlıdır. Statik dosyaları anında sunabilir ve yükü birden fazla servise dağıtabilir.

✅ 4. Katmanlı Güvenlik

• İç ağdaki container IP'lerini gizleyebilir
• Belirli IP'leri veya ülkeleri engelleyebilir
• İstek oranlarını veya boyutlarını sınırlayabilir
• Güvenlik başlıkları (CORS, CSP, X-Frame-Options) ekleyebilir

Tüm bunlar, uygulamanıza ulaşmadan önce Nginx üzerinde gerçekleştirilir.

✅ 5. Görevlerin Ayrımı

Frontend ve backend sadece kendi işlerine odaklanır. Nginx ise dış dünya ile olan tüm bağlantıyı yönetir.

🛠️ Ters Proxy Olarak Nginx: Adım Adım

Varsayalım ki:

• Frontend (Next.js) http://localhost:3000 üzerinde çalışıyor
• Backend (NestJS) http://localhost:5000 üzerinde çalışıyor

Ve şunu istiyorsunuz:

• https://yourdomain.com → frontend’i göster
• https://yourdomain.com/api/ → backend’e yönlendir

Bunun için yapmanız gerekenler:

📁 Adım 1: Nginx Konfigürasyon Dosyası

nginx/default.conf dosyasını oluşturun:

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    location /api/ {
        proxy_pass http://backend:5000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location / {
        proxy_pass http://frontend:3000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

🔍 Neden Bu Ayarlar?

• proxy_pass gelen istekleri doğru container’a yönlendirir.
• proxy_set_header gerçek istemci IP’sini iletir.
• /api/ bloğu, frontend’in korumalı API’lere doğrudan erişmesini engeller.

📦 Adım 2: Docker Compose'a Nginx Ekleyin

  nginx:
    image: nginx:alpine
    container_name: nginx_proxy
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - frontend
      - backend

💡 Docker Compose hakkında bilginiz yoksa şu rehbere göz atın: Dockerize NestJS – Dockerfile & Compose

✅ Adım 3: Servisleri Başlatın

docker compose up -d --build

Artık http://yourdomain.com adresine girdiğinizde frontend görünür. Ve http://yourdomain.com/api/users gibi URL'ler backend’e yönlendirilir.

Tebrikler! Üretim kalitesinde bir ters proxy yapılandırdınız. 🎉

📌 Sık Sorulan Sorular ve Ekstra Bilgiler

🔐 HTTPS Ne Zaman Eklenir?

Certbot ve Let’s Encrypt kullanarak HTTPS desteğini bir sonraki blog yazımızda ekleyeceğiz. Tüm işlemi Docker içinde göstereceğiz.

🧪 Nginx Yerel Olarak Kullanılabilir mi?

Evet — yourdomain.com adresini 127.0.0.1'e yönlendirmek için hosts dosyasını düzenlemeniz yeterlidir.

⚙️ WebSocket Desteği Gerekli mi?

Eğer backend’iniz WebSocket kullanıyorsa, /api/ bloğuna şunları ekleyin:

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';

Bu, WebSocket ve SSE trafiğini destekler.

📁 Statik Dosyaları Nasıl Sunabilirim?

build/ klasörlerini doğrudan Nginx üzerinden sunabilirsiniz:

location /static/ {
    root /usr/share/nginx/html;
}

🧠 Özet

Nginx, uygulamanızı dünyaya nasıl sunacağınızı kontrol etmenizi sağlar. Hem güvenlik hem de performans açısından vazgeçilmezdir.

Bu yazıda şunları öğrendiniz:

• Nginx nedir ve ne işe yarar?
• Full-stack uygulamalarda neden ters proxy gerekir?
• Docker ile Nginx nasıl yapılandırılır?

Bir sonraki yazımızda, SSL sertifikaları ile HTTPS desteği eklemeyi anlatacağız — tamamen Docker ortamında.

📘 Docker hakkında bilginiz yoksa önce şuna göz atın: Dockerize NestJS – Dockerfile & Compose

👉 Hazır mısınız? Sıradaki yazıyla sitenizi güvenli hale getirelim.

Sorularınız mı var? kaisalhusrom.com üzerinden bana ulaşabilir ya da LinkedIn'den mesaj atabilirsiniz.