Deploy Next.js ke VPS Menggunakan Nginx dan PM2

Managed Hosting (Vercel) vs VPS Manual

Platform seperti Vercel atau Netlify menawarkan kenyamanan luar biasa (managed hosting) karena proses deploy terjadi secara otomatis dengan sistem zero-config. Namun, dalam skenario bisnis tertentu di mana kita membutuhkan kustomisasi server, instalasi database internal, atau menghemat biaya skala besar, menggunakan Virtual Private Server (VPS) menjadi pilihan yang lebih logis.

Dengan VPS, kita memiliki akses root (kontrol penuh) terhadap lingkungan Linux. Ini berarti kita bebas menginstal modul keamanan tambahan, memodifikasi firewall, dan menjalankan beberapa aplikasi secara bersamaan di satu mesin yang sama tanpa biaya tersembunyi. Tidak ada pembatasan waktu eksekusi (cold starts) karena aplikasi selalu berjalan (always-on).

Tabel Perbandingan

Alur Deployment Next.js

Proses deployment manual memerlukan beberapa tahapan berurutan agar aplikasi dapat diakses publik dengan aman. Sangat disarankan untuk mengaktifkan mode 'standalone' pada next.config.js sebelum proses build untuk hasil yang lebih teroptimasi.

• Persiapan Server: Melakukan update VPS dan menginstal Node.js versi terbaru.
• Duplikasi Kode: Meng-clone repository proyek ke server menggunakan SSH atau Git.
• Build Produksi: Menjalankan instalasi dependency dan mem-build proyek (npm run build).
• Manajemen Proses: Menjalankan proyek dengan PM2 agar tidak terhenti saat terminal ditutup.
• Reverse Proxy: Mengarahkan traffic publik menggunakan Nginx ke aplikasi lokal.
• Keamanan: Memasang sertifikat SSL/TLS menggunakan Certbot (Let's Encrypt).

Konfigurasi PM2

PM2 adalah process manager tingkat lanjut untuk aplikasi Node.js yang memungkinkan kita menjaga aplikasi tetap hidup tanpa batas waktu, melakukan auto-restart jika terjadi crash, dan me-load ulang (reload) aplikasi tanpa downtime.

# Instalasi PM2 secara global
npm install -g pm2

# Build aplikasi Next.js
npm run build

# Menjalankan Next.js dengan PM2 di port 3000
pm2 start npm --name "web-portfolio" -- run start

# Menyimpan state agar PM2 otomatis berjalan saat server reboot
pm2 save
pm2 startup

Setelah dijalankan, PM2 akan memonitor status aplikasi. Anda bisa memantau log secara real-time dengan perintah `pm2 logs`.

Mengatur Nginx sebagai Reverse Proxy

Secara default, aplikasi Next.js berjalan di localhost port 3000. Untuk membuatnya dapat diakses melalui port standar web (80 untuk HTTP dan 443 untuk HTTPS), kita membutuhkan Nginx sebagai Reverse Proxy.

server {
    listen 80;
    server_name fajargeran.my.id www.fajargeran.my.id;

    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_cache_bypass $http_upgrade;
    }
}

Blok konfigurasi ini memerintahkan Nginx untuk menerima setiap permintaan web eksternal, lalu meneruskannya secara efisien ke aplikasi Next.js internal.

Keamanan .env, SSL, dan Proses Update

Sangat penting untuk tidak pernah men-commit file .env ke repository GitHub Anda. Buat file .env secara langsung di dalam VPS menggunakan text editor seperti nano atau vim. Setelah aplikasi berjalan, gunakan Certbot untuk menghasilkan sertifikat SSL gratis secara otomatis agar koneksi aman (HTTPS).

Ketika memperbarui aplikasi, alurnya cukup sederhana: git pull untuk kode terbaru, npm install jika ada package baru, npm run build untuk mem-build ulang, dan terakhir pm2 restart web-portfolio untuk menerapkan pembaruan tanpa mengganggu pengunjung situs.