Setup Nginx Reverse Proxy untuk Multiple App di 1 VPS

by -3 Views
by
nginx reverse proxy
dilihat : 3

Raytekno.com – Salah satu keuntungan pindah ke VPS adalah kemampuan untuk menghosting banyak aplikasi dalam satu server. Bayangkan: landing page company profile di port 80, dashboard admin Laravel di port 8000, API Node.js di port 3000, dan semuanya diakses dengan domain yang berbeda — tanpa perlu beli VPS baru untuk setiap project.

Ini dimungkinkan oleh Nginx Reverse Proxy. Konsepnya sederhana: Nginx berjalan di port 80/443 sebagai “penjaga pintu.” Setiap request datang, Nginx lihat domain-nya, lalu arahkan ke aplikasi yang sesuai di port internal. Artikel ini adalah panduan praktis untuk setup reverse proxy di VPS Ubuntu 24.04 — berdasarkan konfigurasi production yang saya pakai sendiri.

1. Arsitektur Reverse Proxy: Sebelum & Sesudah

Sebelum Reverse Proxy (1 App per VPS)

User → Domain A → VPS 1 (Laravel)
User → Domain B → VPS 2 (Next.js)
User → Domain C → VPS 3 (WordPress)

Biaya: $5 x 3 = $15/bulan

Sesudah Reverse Proxy (Multiple App di 1 VPS)

User → Domain A → Nginx (VPS 1) → :8000 (Laravel)
User → Domain B → Nginx (VPS 1) → :3000 (Next.js)
User → Domain C → Nginx (VPS 1) → :80 (WordPress)

Biaya: $5-6/bulan saja

Hemat 60-70% biaya server. Plus, semua app dikelola di satu tempat.

2. Prasyarat: VPS Sudah Siap

Saya asumsikan Anda sudah punya:

  • VPS Ubuntu 24.04 dengan Nginx terinstall
  • SSL/Let’s Encrypt aktif (opsional tapi direkomendasikan)
  • Minimal 1GB RAM (untuk 2-3 app kecil)
  • Domain yang sudah pointing ke IP VPS (A record)

Jika belum setup VPS, ikuti panduan kursus Belajar Server saya untuk fondasi yang benar.

3. App 1: Laravel di Port 8000 (PHP-FPM)

Asumsikan Laravel sudah terdeploy di /var/www/laravel-app. Secara default, Laravel tidak berjalan di port tertentu — dia pakai PHP-FPM via Unix socket.

Konfigurasi Nginx untuk Laravel

sudo nano /etc/nginx/sites-available/laravel.zulfianto.com

Isi:

server {
    listen 80;
    server_name laravel.zulfianto.com;
    root /var/www/laravel-app/public;
    index index.php index.html;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php8.3-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.ht {
        deny all;
    }
}

Aktifkan:

sudo ln -s /etc/nginx/sites-available/laravel.zulfianto.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

App 1 siap. Buka http://laravel.zulfianto.com.

4. App 2: Next.js di Port 3000 (Node.js + PM2)

Next.js berjalan sebagai server Node.js di port tertentu (default 3000). Kita tidak bisa langsung expose port 3000 ke publik — perlu reverse proxy.

Step 1: Jalankan Next.js dengan PM2

cd /var/www/nextjs-app
npm install
npm run build
pm2 start npm --name "nextjs-app" -- start
pm2 save
pm2 startup

Cek status:

pm2 status

Harus muncul nextjs-app dengan status online.

Step 2: Konfigurasi Nginx Reverse Proxy

sudo nano /etc/nginx/sites-available/nextjs.zulfianto.com

Isi:

server {
    listen 80;
    server_name nextjs.zulfianto.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }

    location /_next/static {
        proxy_cache_valid 60s;
        proxy_pass http://localhost:3000;
    }

    location /static {
        proxy_cache_valid 60s;
        proxy_pass http://localhost:3000;
    }
}

Penjelasan directive:

  • proxy_pass http://localhost:3000 — Arahkan ke app Node.js di port 3000
  • Upgrade & Connection — Support WebSocket (penting untuk Next.js dev/HMR, tapi juga untuk fitur real-time)
  • X-Forwarded-* — Header agar Next.js tahu IP asli user (untuk logging & security)
  • proxy_cache — Cache asset static untuk performa lebih baik

Aktifkan:

sudo ln -s /etc/nginx/sites-available/nextjs.zulfianto.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

App 2 siap. Buka http://nextjs.zulfianto.com.

5. App 3: Python Flask di Port 5000

Contoh ketiga: aplikasi Python (Flask/FastAPI) yang berjalan di port 5000.

Step 1: Jalankan Python App

cd /var/www/python-app
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
gunicorn -w 2 -b 127.0.0.1:5000 app:app

Atau pakai PM2 untuk Python:

pm2 start "gunicorn -w 2 -b 127.0.0.1:5000 app:app" --name python-app

Step 2: Nginx Reverse Proxy

sudo nano /etc/nginx/sites-available/api.zulfianto.com

Isi:

server {
    listen 80;
    server_name api.zulfianto.com;

    location / {
        proxy_pass http://127.0.0.1:5000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Aktifkan:

sudo ln -s /etc/nginx/sites-available/api.zulfianto.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

App 3 siap. Buka http://api.zulfianto.com.

6. App 4: WordPress (PHP Standalone)

WordPress tradisional juga bisa dihosting bersama. Setup-nya sama dengan Laravel — pakai PHP-FPM.

sudo nano /etc/nginx/sites-available/blog.zulfianto.com

Isi:

server {
    listen 80;
    server_name blog.zulfianto.com;
    root /var/www/wordpress;
    index index.php;

    location / {
        try_files $uri $uri/ /index.php?$args;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php8.3-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

Aktifkan:

sudo ln -s /etc/nginx/sites-available/blog.zulfianto.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

7. SSL Multi-Domain dengan Let’s Encrypt

Semua domain di atas perlu HTTPS. Certbot bisa handle multiple domain sekaligus:

sudo certbot --nginx -d laravel.zulfianto.com -d nextjs.zulfianto.com -d api.zulfianto.com -d blog.zulfianto.com

Pilih redirect HTTP ke HTTPS untuk semua. Certbot akan otomatis edit masing-masing server block.

Verifikasi:

sudo certbot renew --dry-run

8. Troubleshooting Reverse Proxy

Error: 502 Bad Gateway

Penyebab: Aplikasi di port internal tidak jalan, atau Nginx tidak bisa connect.
Solusi:

pm2 status                    # Cek app Node.js/Python jalan
sudo systemctl status php8.3-fpm  # Cek PHP-FPM
curl http://localhost:3000    # Test app dari server sendiri
sudo tail -f /var/log/nginx/error.log  # Cek error Nginx

Error: 404 Not Found untuk Asset (CSS/JS)

Penyebab: Path asset tidak di-serve dengan benar.
Solusi: Pastikan proxy_pass tidak ada trailing slash kalau location adalah root. Untuk Next.js, pastikan /_next/static dan /static di-handle.

Error: Permission Denied saat Upload File

Penyebab: Nginx berjalan sebagai www-data, tapi folder app owned oleh user lain.
Solusi:

sudo chown -R www-data:www-data /var/www/app-folder/storage
sudo chmod -R 775 /var/www/app-folder/storage

Error: Too Many Redirects

Penyebab: App mendeteksi HTTP tapi Nginx sudah HTTPS, atau sebaliknya.
Solusi: Pastikan X-Forwarded-Proto $scheme ada di header. Di Laravel/Next.js, trust proxy harus di-setup.

App 1 Lambat saat App 2 Traffic Tinggi

Penyebab: Resource VPS habis (RAM/CPU).<
Solusi: Monitor dengan htop. Scale VPS ke RAM lebih besar, atau limit resource per app dengan systemd/cgroup.

9. Tips Optimasi Reverse Proxy

9.1 Gzip Compression

sudo nano /etc/nginx/nginx.conf

Pastikan ada:

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 1000;

9.2 Rate Limiting per App

limit_req_zone $binary_remote_addr zone=api:10m rate=10r/s;

server {
    location / {
        limit_req zone=api burst=20 nodelay;
        proxy_pass http://localhost:5000;
    }
}

9.3 Logging per App

access_log /var/log/nginx/laravel-access.log;
error_log /var/log/nginx/laravel-error.log;

Isi per server block untuk memudahkan debug.

9.4 Health Check (Opsional)

location /health {
    access_log off;
    return 200 "healthy\n";
    add_header Content-Type text/plain;
}

Kesimpulan: 1 VPS, Banyak Kemungkinan

Dengan reverse proxy, satu VPS $5-6/bulan bisa menjadi rumah untuk:

  • ✅ Company profile (WordPress/HTML)
  • ✅ Dashboard admin (Laravel)
  • ✅ Frontend modern (Next.js)
  • ✅ API backend (Node.js/Python)
  • ✅ Landing page marketing

Ini adalah cara developer indie dan startup bootstrap menghemat biaya infrastruktur tanpa mengorbankan profesionalisme. Setiap app punya domain sendiri, SSL sendiri, dan bisa di-scale independen.

Tapi perlu diingat: 1 VPS punya limit. Kalau traffic naik signifikan, app akan saling “berebut” resource. Saat itu, waktunya scale — either upgrade VPS atau pisahkan app ke VPS dedicated.

Semua konsep reverse proxy, multi-app deployment, dan optimasi di atas saya ajarkan secara praktis di kursus Belajar Server. Bukan sekadar konfigurasi copy-paste, tapi pemahaman kenapa Nginx bekerja seperti itu, cara debug saat error, dan kapan harus scale.

— Konfigurasi tested di Ubuntu 24.04 + Nginx 1.24, Mei 2026

Don't Miss

No More Posts Available.

No more pages to load.