Bagian 5 — Deploy Aplikasi Web · Langkah 21 dari 38

Deploy Aplikasi (Pilih Stack-mu)

Empat cabang yang mengikuti pola sama: install runtime → jalankan app → jaga tetap hidup → sambungkan ke nginx.

Pilih satu (atau lebih) stack yang mau kamu praktikkan di tab di bawah checklist ini. Tidak harus linear — satu step, satu progres, berapa pun tab yang kamu buka. Polanya selalu sama di semua tab: runtime → app → process manager → nginx → tes.

Ekosistem JavaScript — satu-satunya yang punya opsi PM2

1. Install Node.js lewat nvm

Jangan install node dari apt (versinya sering tertinggal) — pakai nvm (Node Version Manager): bisa ganti versi per proyek, tidak perlu sudo, dan bisa pasang versi LTS terbaru.

$curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

script installer resmi nvm

$source ~/.bashrc && nvm install --lts

reload shell supaya command nvm dikenal, lalu pasang LTS

$node -v && npm -v

bukti terpasang

2. Buat aplikasi contoh

Express paling jelas untuk melihat pola 'proses listen di port':

$mkdir ~/webapp && cd ~/webapp && npm init -y

folder proyek + package.json otomatis

$npm install express

dependensi aplikasi tersimpan di package.json — resep yang bikin proyek bisa dibangun ulang di mana saja

~/webapp/app.js

const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.send("<h1>Halo dari VM Xubuntu! 🎉</h1><p>Jalan lewat PM2 + nginx.</p>");
});

app.listen(3000, () => console.log("app hidup di :3000"));

$node app.js

tes manual dulu — Ctrl+C untuk mati. Ini fase dev; sekarang kita buat 'produksi'.

Bedanya Next.js/React: ada langkah BUILD (npm run build) yang mengubah kode jadi artefak produksi (untuk React: file statis; untuk Next.js: server Node yang dioptimalkan). Dev server (npm run dev) untuk development, tidak untuk produksi. Konsep 'proses yang dijaga' tetap sama — hanya command start-nya ganti menjadi npm start / node server.js.

3. Jaga hidup dengan PM2

$npm install -g pm2

-g = global, supaya command pm2 tersedia

$cd ~/webapp && pm2 start app.js --name webapp

PM2 membaca app.js, menyalakannya di background, memberi nama 'webapp'

$pm2 list && pm2 logs webapp --lines 20

status + log — lihat sendiri prosesnya online

$pm2 startup && pm2 save

startup = bikin systemd unit yang membangunkan PM2 saat boot; save = simpan daftar app yang harus dihidupkan

Coba buktikan auto-restart: kill $(pgrep -f 'node.*app.js') lalu pm2 list → status tetap online dengan restart count naik. PM2 menemukannya mati dan menyalakannya lagi — itulah pekerjaannya.

4. Sambungkan ke nginx

Pakai template dari step nginx tadi, arahkan proxy_pass ke 3000:

/etc/nginx/sites-available/webapp

server {
    listen 80;
    server_name _;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

$sudo ln -s /etc/nginx/sites-available/webapp /etc/nginx/sites-enabled/ && sudo rm -f /etc/nginx/sites-enabled/default

aktifkan site-mu, matikan halaman default nginx

$sudo nginx -t && sudo systemctl reload nginx

pola wajib: tes dulu, baru reload

5. Tes

$curl -s http://127.0.0.1/

di VM — harusnya keluar 'Halo dari VM Xubuntu!' lalu coba juga dari browser laptop: http://IP_VM

Command PM2 yang wajib tahu

Command	Fungsi
pm2 list	semua app & statusnya
pm2 logs webapp	log real-time (Ctrl+C keluar)
pm2 restart webapp	restart (misal setelah update kode)
pm2 stop / delete webapp	hentikan / hapus dari daftar PM2
pm2 save	simpan kondisi saat ini untuk bangkit lagi

✓ Tanda berhasil — centang kalau sudah kamu lihat/buktikan sendiri

Aku menyelesaikan minimal SATU tab stack sampai halaman aplikasiku tampil di http://IP_VM
Prosesnya enable/auto-start: sudah kubuktikan (pm2 startup + save, atau systemctl enable, atau service php-fpm)
Aku paham beda model PHP (per-request) vs sisanya (long-running)
Aku bisa menjelaskan unit file .service baris per baris untuk tab yang kupilih

Tombol “lanjut” terbuka setelah semua tercentang — bukan hukuman, tapi jaring pengaman: pastikan step ini benar-benar beres sebelum menumpuk step berikutnya di atasnya.

Lagi bermasalah?

PM2: app online tapi versi lama terus yang tampil setelah edit kode

PM2 menjalankan snapshot proses yang start tadi. Setelah edit kode: pm2 restart webapp. Untuk app yang butuh build (Next/Vite): build dulu, baru restart.

502 Bad Gateway dari nginx

nginx tidak menemukan yang listen di port tujuan. Cek proses aplikasi-mu hidup (pm2 list / systemctl status / ss -tlnp). Kalau hidup tapi port beda, sesuaikan proxy_pass. 502 = 'resepsionis mengantarkan tamu ke ruangan kosong' — gejala wajib hafal.

Aplikasi cuma listen di 127.0.0.1 padahal harusnya bisa dari luar VM?

Di setups ini TIDAK masalah — nginx-lah yang menerima dari luar lalu meneruskan ke loopback; itu justru desain yang benar (aplikasi tidak boleh listen 0.0.0.0 kalau sudah ada nginx). Yang boleh bikin pusing cuma saat tes curl langsung ke port app dari HOST — memang harus gagal, dan itu benar.

← Nginx sebagai Reverse Proxy🔒 Lanjut (checklist dulu)