Hubungkan domain ke aplikasimu dengan Nginx

Bayangkan aplikasimu adalah dapur restoran yang sibuk di belakang — alamatnya 127.0.0.1:3000, hanya orang dalam yang tahu. Tamu (pengunjung internet) tidak boleh masuk ke dapur langsung. Mereka datang ke pintu depan yang rapi: app.domainku.com.

Nginx adalah pelayan di pintu depan itu. Ia menerima tamu di domain, lalu meneruskan pesanan ke dapur di port 3000, dan membawa hidangan kembali ke tamu. Inilah yang disebut reverse proxy: satu pintu publik yang cantik di depan, aplikasi tersembunyi aman di belakang.

Tiga hal saja:

• VPS dengan akses sudo (Ubuntu/Debian) dan aplikasi yang sudah jalan di port lokal, mis. :3000.
• Sebuah domain yang kamu miliki (mis. domainku.com).
• Akses ke panel DNS domain itu (di tempat kamu beli domain, atau di Cloudflare).

Masuk ke server lewat SSH, lalu pasang Nginx. Perintah di bawah juga langsung menyalakannya dan membuatnya otomatis hidup tiap server reboot:

# DI SERVER — pasang Nginx
sudo apt update
sudo apt install -y nginx
 
# pastikan Nginx hidup
sudo systemctl enable --now nginx
sudo systemctl status nginx --no-pager

Untuk memastikan, buka http://IP-VPS-kamu di browser. Kalau muncul halaman "Welcome to nginx!", berarti Nginx sudah hidup dan siap diatur:

deploy@server:~$ sudo systemctl status nginx --no-pager● nginx.service - A high performance web server   Active: active (running)# Nginx hidup ✅

Sekarang kita beri tahu internet bahwa app.domainku.com harus menuju ke IP VPS-mu. Buka panel DNS domain (di tempat beli domain atau di Cloudflare), lalu tambahkan satu A record:

Setelah disimpan, DNS butuh beberapa menit untuk menyebar. Cek dari laptop apakah domain sudah menunjuk ke IP yang benar:

kamu@laptop:~$ dig app.domainku.com +short203.0.113.10# muncul IP VPS = DNS sudah benar ✅

Setiap situs di Nginx punya satu file konfigurasi di folder /etc/nginx/sites-available/. Buat file baru sesuai nama domainmu:

deploy@server:~$ sudo nano /etc/nginx/sites-available/app.domainku.com

Isi file tersebut dengan konfigurasi ini:

1server {2    listen 80;3    server_name app.domainku.com;4 5    location / {6        proxy_pass http://127.0.0.1:3000;7        proxy_http_version 1.1;8        proxy_set_header Upgrade $http_upgrade;9        proxy_set_header Connection 'upgrade';10        proxy_set_header Host $host;11        proxy_set_header X-Real-IP $remote_addr;12        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;13        proxy_set_header X-Forwarded-Proto $scheme;14        proxy_cache_bypass $http_upgrade;15    }16}

Teks lengkap yang bisa kamu salin (ganti app.domainku.com dan port 3000 sesuai punyamu):

# /etc/nginx/sites-available/app.domainku.com
server {
    listen 80;
    server_name app.domainku.com;
 
    location / {
        proxy_pass http://127.0.0.1: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;
    }
}

File di sites-availablebelum aktif sampai kita "menyalakannya" dengan membuat symlink ke sites-enabled. Selalu jalankan nginx -t dulu untuk memastikan tidak ada salah ketik sebelum reload:

# Aktifkan situs: bikin symlink ke folder sites-enabled
sudo ln -s /etc/nginx/sites-available/app.domainku.com \
  /etc/nginx/sites-enabled/
 
# Tes apakah konfigurasi tidak ada salah ketik
sudo nginx -t
 
# Kalau "syntax is ok" -> muat ulang Nginx
sudo systemctl reload nginx

deploy@server:~$ sudo nginx -tnginx: configuration file /etc/nginx/nginx.conf test is successfuldeploy@server:~$ sudo systemctl reload nginx# situs aktif tanpa downtime ✅

Buka http://app.domainku.com di browser. Aplikasimu kini tampil lewat domain sendiri — IP dan port yang jelek sudah tersembunyi rapi di belakang Nginx:

Kalau ada yang belum jalan, cek tabel ini dulu sebelum panik: