DevOps

Deploy Next.js VPS Ubuntu Nginx Panduan Lengkap

M
MUGHU
22 menit baca
Deploy Next.js VPS Ubuntu Nginx Panduan Lengkap

deploy aplikasi Next.js ke VPS Ubuntu pakai Nginx dan PM2 jauh lebih stabil dibanding mengandalkan platform hosting instan jika teman teman ingin kontrol

Melakukan deploy aplikasi Next.js ke VPS Ubuntu pakai Nginx dan PM2 jauh lebih stabil dibanding mengandalkan platform hosting instan jika teman-teman ingin kontrol penuh atas environment production. Pendekatan ini memberi kebebasan penuh dalam mengatur alokasi resource, mengelola environment variables, dan memangkas biaya bulanan server tanpa batas limit serverless.

Setup dasarnya butuh koneksi SSH ke VPS Ubuntu yang bersih, akses sudo, serta repository Git yang sudah siap jalan.

Persiapan Awal dan Update Server Ubuntu

Persiapan Awal dan Update Server Ubuntu

Sebelum menyentuh file kode Next.js, pastikan sistem operasi Ubuntu di VPS teman-teman sudah di-update dan diproteksi dengan config firewall dasar. Langkah ini penting agar server tidak mudah disusupi bot scanner yang memindai port terbuka secara acak.

Teman-teman bisa merujuk ke dokumentasi Ubuntu Security Guide untuk memahami praktik hardening sistem Linux secara mendalam. Masuk ke terminal VPS via SSH, lalu jalankan perintah update paket di bawah ini:

BASH
sudo apt update && sudo apt upgrade -y
sudo apt install curl git ufw -y
sudo ufw allow OpenSSH
sudo ufw allow 'Nginx Full'
sudo ufw enable
TEXT
Status: active

To                         Action      From
--                         Name        Iface
----                       From        --
22/tcp                     ALLOW       Anywhere
Nginx Full                 ALLOW       Anywhere
22/tcp (v6)                ALLOW       Anywhere

Aktifkan aturan firewall tersebut dengan hati-hati agar akses SSH tidak terputus di tengah jalan. Pastikan port22Atau port custom teman-teman sudah masuk dalam daftar whitelistufw.

  • Update Berkala: Selalu jalankansudo apt upgradeSecara rutin tiap bulan untuk nambal celah keamanan kernel Linux.
  • Nonaktifkan Password Login: Demi keamanan maksimal, disarankan pakai autentikasi SSH Key daripada password standar.
  • Cek Status Firewall: Gunakan perintahsudo ufw status verboseUntuk memantau aturan jaringan yang sedang aktif di VPS.

Tips: Jangan pernah mengabaikan pengaturanufwKarena kegagalan setup port SSH sebelum mengaktifkan firewall bisa mengunci akses masuk ke VPS secara permanen.

Mengatasi Kendala Swap Memory Saat Build Next.js

Mengatasi Kendala Swap Memory Saat Build Next.js

Proses kompilasi aplikasi Next.js di VPS berkapasitas RAM kecil sering mengalami kegagalan mendadak atau terhenti dengan kode error "JavaScript heap out of memory". Masalah ini terjadi karena proses build production butuh lonjakan resource RAM yang cukup tinggi.

Teman-teman bisa menambahkan ruang swap di SSD VPS untuk mengantisipasi kekurangan memori fisik saat menjalankan perintahnpm run build. Ikuti langkah-langkah pembuatan swap file berukuran 2GB di bawah ini:

BASH
sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile
echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab

Pastikan swap aktif dengan mengetikkan perintahfree -hDi terminal. Penambahan swap ini sangat membantu VPS dengan RAM 1GB agar proses build Next.js berjalan lancar tanpa crash.

  • Alokasi Swap Optimal: Untuk VPS RAM 1GB, buat swap 2GB; untuk RAM 2GB, cukup buat swap 2GB atau 4GB.
  • Periksa Penggunaan Disk: Pastikan SSD VPS masih memiliki sisa ruang yang cukup sebelum membuat file swap.
  • Nonaktifkan Jika Perlu: Swap bisa dihapus kapan saja jika VPS sudah di-upgrade ke spesifikasi RAM yang lebih besar.

Instalasi Node.js dan Package Manager

Instalasi Node.js dan Package Manager

Aplikasi Next.js butuh runtime Node.js versi LTS agar kompatibel dengan modul-modul modern saat proses build production. Gunakan NodeSource untuk memasang versi Node.js yang stabil dan mutakhir di server Ubuntu.

Jangan pakai versi bawaan apt repository karena biasanya sudah sangat ketinggalan zaman dan memicu error saat menjalankannpm run build. Eksekusi perintah berikut untuk setup Node.js:

BASH
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
node -v
npm -v

Catatan: Sesuaikan versisetup_20.xDi atas jika aplikasi teman-teman butuh runtime Node.js versi lain yang spesifik.

Selain npm, teman-teman juga bisa pakai pnpm atau yarn tergantung preferensi package manager di proyek lokal. Jika memilih pnpm, instal secara global lewat perintahsudo npm install -g pnpm.

  • Gunakan Versi LTS: Selalu pilih versi Node.js berlabel Long Term Support (LTS) untuk stabilitas jangka panjang di server production.
  • Hindari Sudo untuk Global NPM: PakaisudoSaat instalasi package global dapat menimbulkan masalah hak akses di kemudian hari.
  • Kelola Versi via NVM: Pertimbangkan pakai Node Version Manager (NVM) jika teman-teman sering berganti versi Node.js antar proyek.

Clone Repo dan Build Aplikasi Next.js

Langkah berikutnya adalah menarik kode sumber dari GitHub atau GitLab ke dalam direktori VPS, lalu melakukan instalasi dependency serta proses build. Simpan proyek di direktori/var/wwwAgar strukturnya rapi sesuai standar server Linux.

Masuk ke direktori web root, clone repository, lalu buat file.env.productionUntuk menampung variabel rahasia aplikasi. Detail alurnya bisa dilihat pada diagram arsitektur deployment di bawah ini:

flowchart TD
    A[GitHub Repo] -->|git pull| B[/var/www/my-next-app/]
    B -->|npm install| C[Dependencies Ready]
    C -->|npm run build| D[.next Production Build]
    D -->|PM2 Start| E[Node.js Process Port 3000]
    E -->|Reverse Proxy| F[Nginx Port 80/443]

Berikut adalah urutan perintah CLI yang perlu dijalankan di terminal VPS:

BASH
sudo mkdir -p /var/www/my-next-app
sudo chown -R $USER:$USER /var/www/my-next-app
cd /var/www/my-next-app
git clone https://github.com/username/repo-name.git .
npm install
npm run build

Pastikan prosesnpm run buildSelesai tanpa ada error atau error TypeScript yang tertinggal. Jika build gagal di tengah jalan karena kekurangan RAM, teman-teman mungkin perlu membuat file swap sementara di VPS.

  • Struktur Direktori: Tempatkan kode aplikasi di/var/www/Agar konsisten dengan standar config web server Linux.
  • Hak Akses User: Pastikan kepemilikan folder sudah diubah ke user aktif agar perintah git dan npm tidak butuh hak akses root.
  • Environment Variables: Jangan lupa mengisi file.env.productionDengan kunci API dan config database yang valid sebelum melakukan build.

Menjalankan Aplikasi dengan PM2 Process Manager

Menjalankan Aplikasi dengan PM2 Process Manager

Next.js berjalan sebagai server Node.js mandiri yang harus terus menyala di latar belakang meskipun sesi terminal SSH ditutup. Di sinilah peran PM2 sangat dibutuhkan sebagai process manager yang handal untuk production environment.

Buat file config PM2 bernamaecosystem.config.jsDi root direktori proyek agar pengelolaan instance aplikasi lebih gampang diatur ulang. Contoh config file tersebut tampak seperti di bawah ini:

JAVASCRIPT
module.exports = {
  apps: [
    {
      name: 'my-next-app',
      script: 'node_modules/next/dist/bin/next',
      args: 'start',
      instances: 'max',
      exec_mode: 'cluster',
      env: {
        PORT: 3000,
        NODE_ENV: 'production',
      },
    },
  ],
};

Jalankan aplikasi pakai PM2 dan atur agar otomatis menyala kembali ketika VPS melakukan restart:

BASH
pm2 start ecosystem.config.js
pm2 save
pm2 startup

Gunakan perintahpm2 statusAtaupm2 logs my-next-appUntuk memastikan proses aplikasi berjalan di port3000Tanpa ada restart berulang.

  • Cluster Mode: Pakaiexec_mode: 'cluster'Bikin aplikasi Next.js membagi beban kerja ke semua core CPU yang tersedia di VPS.
  • Auto Restart: Perintahpm2 startupMemastikan aplikasi otomatis aktif kembali setelah server reboot akibat pemeliharaan atau mati lampu.
  • Monitoring Real-time: Gunakan perintahpm2 monitUntuk memantau penggunaan CPU dan memori aplikasi secara langsung melalui terminal.

Config Nginx sebagai Reverse Proxy

Aplikasi Next.js yang berjalan di port3000Harus dihubungkan ke port standar web (80Dan443) agar bisa diakses publik melalui domain. Nginx bertindak sebagai reverse proxy yang meneruskan trafik masuk ke port internal tersebut.

Hapus config default Nginx, lalu buat file blok server baru untuk domain teman-teman di direktori/etc/nginx/sites-available/.

  1. Buat file config baru:sudo nano /etc/nginx/sites-available/my-next-app
  2. Masukkan blok server block Nginx di bawah ini:
NGINX
server {
    listen 80;
    server_name contohdomain.com www.contohdomain.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_cache_bypass $http_upgrade;
    }
}
  1. Simpan file, lalu aktifkan config dengan membuat symlink kesites-enabled:
BASH
sudo ln -s /etc/nginx/sites-available/my-next-app /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

Perintahnginx -tBerfungsi mengecek apakah ada kesalahan sintaks sebelum Nginx di-restart ulang. Jika statusnya OK, aplikasi sudah bisa diakses lewat HTTP biasa pakai alamat IP atau domain VPS.

  • Reverse Proxy Setup: Configproxy_passWajib mengarah tepat ke port lokal tempat PM2 menjalankan aplikasi Next.js.
  • Header Forwarding: Pengaturan header sepertiHostDanUpgradeDiperlukan agar fitur WebSocket dan pelacakan IP klien berjalan normal.
  • Uji Sintaks: Selalu jalankansudo nginx -tSetiap kali mengubah file config Nginx untuk mencegah downtime akibat salah ketik.

Pemasangan SSL Let's Encrypt dengan Certbot

Mengaktifkan HTTPS adalah kewajiban mutlak untuk keamanan data user sekaligus meningkatkan performa SEO situs web di mesin pencari. Kita bisa pakai Certbot untuk menerbitkan sertifikat SSL gratis dari Let's Encrypt secara otomatis.

Instal Certbot beserta plugin Nginx, lalu jalankan perintah autifikasi domain melalui terminal Ubuntu:

BASH
sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d contohdomain.com -d www.contohdomain.com

Tips: Masukkan alamat email yang aktif saat diminta Certbot agar teman-teman mendapat notifikasi penting ketika masa berlaku sertifikat SSL hampir habis.

Certbot akan otomatis memodifikasi file config Nginx yang sudah dibuat sebelumnya untuk mengarahkan trafik HTTP ke HTTPS secara permanen. Pengujian update otomatis SSL juga bisa dicek pakai perintahsudo certbot renew --dry-run.

  • Otomatisasi Renew: Certbot secara otomatis memasang cron job atau systemd timer untuk update sertifikat SSL sebelum masa berlakunya habis.
  • Redirect HTTPS: Pastikan opsi redirect trafik dipilih saat proses config Certbot agar semua akses HTTP langsung beralih ke HTTPS.
  • Validasi Domain: Pastikan DNS domain sudah diarahkan dengan benar ke alamat IP VPS sebelum menjalankan perintah Certbot.

Otomasi Deployment dengan GitHub Actions

Melakukangit pullDannpm run buildSecara manual setiap kali ada update kode tentu sangat melelahkan dan membuang waktu. Teman-teman bisa mengotomatisasi proses tersebut pakai GitHub Actions agar berjalan otomatis setiap kali ada push ke branchmain.

Buat direktori.github/workflows/deploy.ymlDi dalam repository teman-teman dengan struktur skrip seperti di bawah ini:

YAML
name: Deploy Next.js to VPS

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v4

      - name: Executing Remote SSH Commands
        uses: appleboy/[email protected]
        with:
          host: ${{ secrets.VPS_HOST }}
          username: ${{ secrets.VPS_USER }}
          key: ${{ secrets.VPS_SSH_KEY }}
          script: |
            cd /var/www/my-next-app
            git pull origin main
            npm install
            npm run build
            pm2 reload my-next-app

Simpan SSH private key dan alamat IP VPS di bagian GitHub Repository Secrets dengan namaVPS_SSH_KEY,VPS_HOST, danVPS_USER. Dengan cara ini, pipeline CI/CD sederhana sudah aktif dan proses rilis fitur baru jadi jauh lebih cepat tanpa perlu intervensi manual di terminal server.

  • Keamanan Secret Keys: Jangan pernah menuliskan password atau SSH key secara langsung di dalam file YAML; selalu gunakan fitur GitHub Secrets.
  • Zero Downtime Reload: Gunakan perintahpm2 reloadAlih-alihpm2 restartAgar proses update aplikasi berjalan mulus tanpa gangguan bagi user aktif.
  • Pantau Log Pipeline: Periksa tab Actions di repository GitHub untuk memantau status eksekusi skrip deployment jika terjadi kegagalan koneksi SSH.

Optimalisasi Kinerja Nginx dan Caching untuk Next.js

Setelah aplikasi berjalan dengan baik di balik reverse proxy Nginx, langkah berikutnya adalah meningkatkan performa pengiriman aset statis. Next.js menghasilkan folder_next/staticYang berisi file JavaScript dan CSS hasil bundel dengan hash unik, sehingga sangat aman untuk di-cache dalam jangka panjang.

Teman-teman bisa menambahkan aturan caching khusus di dalam blok server Nginx agar browser pengunjung dapat memuat aset statis secara instan pada kunjungan berikutnya. Buka kembali file config Nginx di/etc/nginx/sites-available/my-next-appLalu tambahkan blok location berikut:

NGINX
location /_next/static/ {
    alias /var/www/my-next-app/.next/static/;
    expires 365d;
    access_log off;
}

location /static/ {
    alias /var/www/my-next-app/public/static/;
    expires 30d;
    access_log off;
}

Config di atas memberitahu Nginx untuk melayani file statis secara langsung dari disk tanpa harus meneruskan permintaan ke proses Node.js. Hal ini banyak mengurangi beban CPU pada server VPS milik teman-teman.

  • Penghematan Resource: Melayani aset statis langsung via Nginx membebaskan proses Node.js dari tugas non-esensial.
  • Header Kadaluarsa: Pengaturanexpires 365dSangat ideal untuk file Next.js karena nama file akan berubah otomatis setiap kali dilakukan build ulang.
  • Nonaktifkan Akses Log: Mematikanaccess_logUntuk file statis membantu menghemat ruang penyimpanan SSD dari log yang tidak perlu.

Manajemen Log dan Pembersihan Cache PM2

Seiring berjalannya waktu, aplikasi Next.js yang berjalan di VPS akan menghasilkan file log dalam ukuran yang cukup besar. Jika dibiarkan terus-menerus tanpa pengelolaan, file log tersebut dapat memenuhi kapasitas disk dan memicu masalah baru pada sistem operasi Ubuntu.

Teman-teman bisa pakai modul tambahan PM2 bernamapm2-logrotateUntuk mengatur rotasi dan penghapusan file log secara otomatis berdasarkan ukuran atau batas waktu tertentu. Instal modul tersebut langsung melalui terminal VPS dengan perintah berikut:

BASH
pm2 install pm2-logrotate
pm2 set pm2-logrotate:max_size 10M
pm2 set pm2-logrotate:retain 7

Config di atas akan memastikan setiap file log dibatasi maksimal 10 megabita dan hanya menyimpan cadangan log selama 7 hari terakhir. Pengaturan ini menjaga kesehatan server tetap optimal tanpa perlu intervensi pembersihan manual.

  • Rotasi Otomatis: Mencegah fileout.logDanerror.logMembengkak hingga gigabita dan melumpuhkan penyimpanan server.
  • Batasan Ukuran: Tentukan ukuran maksimal file log sesuai dengan kapasitas sisa SSD pada VPS teman-teman.
  • Pembersihan Cache: Jalankan perintahpm2 flushJika ingin membersihkan seluruh riwayat log yang tersimpan sekarang.

Troubleshooting Kendala Umum Saat Deploy Next.js

Meskipun seluruh langkah config di atas sudah diikuti dengan teliti, terkadang ada saja kendala teknis tak terduga yang muncul saat aplikasi pertama kali diakses lewat domain publik. Mengenal gejala dan solusi dari masalah umum ini akan sangat menghemat waktu ketika melakukan debugging di environment production.

Berikut adalah beberapa masalah klasik yang sering ditemui saat melakukan deploy aplikasi Next.js ke VPS Ubuntu:

  • Error 502 Bad Gateway: Biasanya terjadi karena Nginx gagal meneruskan trafik ke port3000. Pastikan aplikasi PM2 sedang berjalan dengan mengetikkanpm2 status.
  • Perubahan Kode Tidak Muncul: Lupa menjalankan perintahnpm run buildSetelah melakukangit pull. Next.js butuh proses kompilasi ulang agar perubahan kode terbaca oleh production server.
  • Koneksi Database Timeout: Pastikan alamat IP VPS sudah dimasukkan ke dalam daftar izin akses (whitelist) di panel provider database eksternal seperti Supabase, MongoDB Atlas, atau Neon.
  • Masalah Hak Akses File: Jika muncul error penulisan file, periksa kembali kepemilikan direktori proyek dengan perintahsudo chown -R $USER:$USER /var/www/my-next-app.

Dengan memahami titik-titik krusial troubleshooting ini, teman-teman bisa dengan cepat mendiagnosis sumber masalah tanpa harus panik ketika server menunjukkan respon error di layar browser.

Mengamankan Environment Variables dan File Rahasia Proyek

Mengelola file environment variables (.envDan.env.production) di VPS butuh perhatian khusus agar kunci API, secret key JWT, dan kredensial database tidak bocor ke publik. Ketika kode aplikasi di-clone langsung dari repo Git privat, file.envBiasanya tidak ikut terunggah karena masuk ke dalam daftar pengecualian.gitignore.

Teman-teman harus membuat dan mengisi file.env.productionSecara manual di dalam direktori root proyek pada VPS pakai teks editor nano atau vim. Pastikan hak akses file tersebut dibatasi hanya untuk user sistem yang bersangkutan agar proses Node.js dapat membacanya tanpa mengizinkan user lain di server melihat isinya.

BASH
touch /var/www/my-next-app/.env.production
chmod 600 /var/www/my-next-app/.env.production
nano /var/www/my-next-app/.env.production

Isi file tersebut dengan variabel yang dibutuhkan oleh aplikasi Next.js milik teman-teman, misalnya config koneksi database dan URL publik:

ENV
NODE_ENV=production
PORT=3000
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
NEXT_PUBLIC_API_URL=https://contohdomain.com/api
  • Batasi Hak Akses: Perintahchmod 600Penting banget agar file.env.productionHanya bisa dibaca dan ditulis oleh pemilik file saja.
  • Awalan Variabel Publik: Variabel Next.js yang ingin diekspos ke sisi klien (browser) wajib diawali dengan prefiksNEXT_PUBLIC_.
  • Jangan Commit File ENV: Selalu pastikan file.envDan variasinya masuk ke dalam file.gitignoreAgar tidak terdorong secara tidak sengaja ke GitHub.

config Firewall Lanjutan dengan Fail2ban di Ubuntu

Selain pakai UFW untuk menutup port yang tidak perlu, menginstal dan setupfail2banDi VPS Ubuntu akan memberikan lapisan keamanan tambahan terhadap serangan brute force pada layanan SSH dan Nginx. Bot berbahaya sering mencoba menebak kredensial login SSH secara otomatis berulang kali sepanjang hari.

Instal fail2ban pakai manajer paket bawaan apt, lalu buat salinan file konfigurasinya agar pengaturan default tidak tertimpa saat ada update sistem operasi:

BASH
sudo apt install fail2ban -y
sudo cp /etc/fail2ban/jail.conf /etc/fail2ban/jail.local
sudo nano /etc/fail2ban/jail.local

Aktifkan jail untuk layanan SSH dan tentukan durasi pemblokiran IP mencurigakan melalui parameterbantimeDanfindtime. Setelah selesai menyunting file config, restart layanan fail2ban untuk menerapkan aturan baru tersebut:

BASH
sudo systemctl restart fail2ban
sudo systemctl enable fail2ban
  • Pemantauan Log Otomatis: Fail2ban memindai log sistem secara real-time untuk mendeteksi alamat IP yang menunjukkan aktivitas percobaan login gagal beruntun.
  • Blokir Alamat IP Malicious: IP penyerang akan otomatis dimasukkan ke dalam aturan iptables atau ufw untuk memutus koneksi mereka ke VPS.
  • Periksa Status Jail: Gunakan perintahsudo fail2ban-client status sshdUntuk melihat daftar IP yang sedang diblokir oleh sistem keamanan.

Memantau Kinerja Server dan Penggunaan Resource Real-time

Menjalankan aplikasi Next.js bersama Nginx dan database di dalam satu VPS berkapasitas terbatas menuntut pemantauan resource server. Teman-teman bisa pakai beberapa utilitas bawaan Linux sepertihtop,df -h, daniotopUntuk mendeteksi potensi kelonjakan beban kerja.

Jika belum terpasang, instalhtopMelalui terminal Ubuntu untuk melihat penggunaan setiap core CPU dan alokasi RAM secara visual:

BASH
sudo apt install htop -y
htop

Selain itu, manfaatkan fitur monitoring bawaan PM2 kalau teman-teman ingin fokus melihat performa spesifik dari instans aplikasi Next.js yang sedang berjalan di balik reverse proxy Nginx.

  • Deteksi Lonjakan CPU: Proses build Next.js atau query database yang tidak dioptimalkan dapat membuat penggunaan CPU melonjak hingga 100%.
  • Kapasitas Disk SSD: Pastikan sisa ruang penyimpanan tidak kurang dari 15% agar sistem operasi Ubuntu dan file log tidak mengalami kegagalan tulis.
  • Penggunaan Memori Swap: Jika file swap terus-menerus terpakai dalam jumlah besar, itu tanda nyata bahwa VPS teman-teman sudah waktunya di-upgrade ke spesifikasi RAM yang lebih tinggi.

Melakukan Rollback Versi Saat Deployment Gagal

Terkadang update kode yang baru saja di-push lewat GitHub ternyata memiliki bug fatal yang membuat aplikasi Next.js crash setelah proses build selesai. Mengetahui cara melakukan rollback ke versi sebelumnya dengan cepat akan meminimalkan waktu downtime situs web.

Karena kita pakai Git di dalam direktori proyek VPS, proses rollback bisa dilakukan dengan mengarahkan pointer HEAD ke commit stabil sebelumnya, lalu melakukan build ulang:

BASH
cd /var/www/my-next-app
git log --oneline -n 5
git reset --hard <commit-hash-stabil>
npm install
npm run build
pm2 reload my-next-app

Pastikan untuk selalu mencatat atau mengingat hash commit terakhir yang berjalan stabil sebelum melakukan uji coba fitur eksperimental di environment production.

  • Riwayat Commit Git: Gunakangit log --onelineUntuk melihat daftar kode historis yang pernah masuk ke branch aktif server.
  • Reset Paksa: Perintahgit reset --hardAkan mengembalikan file kerja ke kondisi persis seperti pada commit target.
  • Reload Zero Downtime: Kombinasikan denganpm2 reloadAgar user tidak merasakan gangguan koneksi yang berarti selama proses pemulihan berjalan.

Analisis Performa Node.js Memory Heap pada Instance Production

Menjaga performa aplikasi Next.js di VPS Ubuntu agar tetap stabil dalam jangka panjang butuh pemahaman mendalam tentang manajemen memori V8 engine. Ketika aplikasi melayani ribuan request harian, seringkali terjadi kebocoran memori (memory leak) yang bersumber dari komponen server-side rendering atau global state yang tidak dibersihkan dengan benar. Teman-teman bisa memantau alokasi heap memory secara langsung melalui dashboard monitoring PM2 atau dengan menyisipkan flag khusus saat proses startup Node.js di dalam file config ecosystem.

Peningkatan batas alokasi memori V8 dapat dilakukan langsung dari fileecosystem.config.jsDengan menambahkan argumen node_args yang sesuai dengan kapasitas RAM VPS. Config tambahan ini penting banget bagi aplikasi Next.js yang sering memproses data berukuran besar dalam sekali render.

JAVASCRIPT
module.exports = {
  apps: [
    {
      name: 'my-next-app',
      script: 'node_modules/next/dist/bin/next',
      args: 'start',
      node_args: '--max-old-space-size=1536',
      instances: 'max',
      exec_mode: 'cluster',
      env: {
        PORT: 3000,
        NODE_ENV: 'production',
      },
    },
  ],
};

Pengaturan--max-old-space-size=1536Memastikan bahwa proses Node.js diizinkan pakai memori hingga 1.5GB sebelum V8 memicu garbage collection yang agresif atau menghentikan proses akibat kehabisan memori. Sesuaikan angka ini dengan kapasitas total RAM VPS teman-teman agar tidak terjadi bentrok dengan layanan lain seperti Nginx atau database PostgreSQL.

  • Alokasi Heap Tepat: Sesuaikan batasan memori V8 dengan kapasitas fisik RAM VPS agar kernel Linux tidak mematikan proses PM2 lewat mekanisme OOM Killer.
  • Garbage Collection: Pemantauan berkala membantu mendeteksi fungsi JavaScript yang menahan referensi objek terlalu lama di memori server.
  • Stabilitas Cluster: Penggunaan cluster mode bersama batasan heap terstruktur membuat distribusi beban kerja antar core CPU menjadi jauh lebih merata.

Manajemen DNS dan Config Subdomain Wildcard untuk Multi-Tenancy

Banyak proyek modern berbasis Next.js yang menerapkan sistem multi-tenancy di mana setiap klien atau user mendapatkan subdomain unik secara dinamis. Untuk mendukung arsitektur seperti ini di VPS Ubuntu, config DNS dan blok server Nginx harus disesuaikan agar mampu menangkap seluruh trafik wildcard dari berbagai subdomain.

Langkah pertama yang harus dilakukan pada panel pengelola DNS domain adalah menambahkan record tipeADengan simbol wildcard*Yang mengarah langsung ke alamat IP publik VPS teman-teman. Setelah itu, perbarui blok server Nginx agar pakai parameterserver_nameDengan pola dinamis.

NGINX
server {
    listen 80;
    server_name contohdomain.com *.contohdomain.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_cache_bypass $http_upgrade;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

Dengan meneruskan header tambahan sepertiX-Forwarded-Host, aplikasi Next.js di dalam kode server-side dapat mendeteksi subdomain apa yang sedang diakses oleh pengunjung. Logika routing internal bisa menampilkan data yang spesifik untuk setiap tenant. Certbot juga mendukung pembuatan SSL wildcard dengan metode DNS validation agar seluruh subdomain aman diakses lewat HTTPS.

  • Wildcard DNS Record: Tambahkan record*.contohdomain.comDi panel DNS agar semua variasi subdomain otomatis mengarah ke VPS.
  • Header Forwarding Tambahan: PastikanX-Forwarded-HostDikirimkan oleh Nginx agar Next.js dapat membaca nama host secara akurat.
  • Sertifikat SSL Wildcard: Gunakan validasi DNS Certbot untuk mengamankan domain utama beserta seluruh subdomain turunannya sekaligus.

Checklist

  • Update sistem operasi Ubuntu dan aktifkan UFW firewall dengan aturan port SSH serta Nginx.
  • Buat swap file berukuran 2GB di SSD VPS untuk mencegah error memori saat build Next.js.
  • Pasang Node.js versi LTS pakai repo resmi NodeSource di server.
  • Clone repository Next.js ke direktori/var/wwwDan jalankannpm run build.
  • Atur PM2 dengan file ecosystem untuk menjalankan aplikasi Next.js di latar belakang.
  • Setel Nginx sebagai reverse proxy yang meneruskan trafik publik ke port lokal aplikasi.
  • Pasang sertifikat SSL Let's Encrypt pakai Certbot agar domain aktif via HTTPS.
  • Otomasi proses rilis kode pakai GitHub Actions dan SSH key rahasia.

Poin penting

  • Deploy Next.js ke VPS Ubuntu memberikan kontrol penuh atas resource server dan environment.
  • Selalu aktifkan firewall ufw untuk mengamankan port SSH dan Nginx sebelum membuka akses publik.
  • Tambahkan swap memory minimal 2GB agar proses build Next.js tidak gagal karena kekurangan RAM.
  • Gunakan Node.js versi LTS resmi dari NodeSource untuk menjaga stabilitas runtime aplikasi production.
  • Manfaatkan PM2 untuk mengelola proses background Next.js agar otomatis berjalan stabil dan restart sendiri.
  • Konfigurasikan Nginx sebagai reverse proxy untuk meneruskan trafik HTTP ke port lokal aplikasi Next.js.

Referensi

  1. GitHub (2026). Nextjs-deploy-hostinger/README.md at main · jagfxx/nextjs
  2. Gist (2026). Step-by-Step Guide to Deploy a Next.js App on a VPS with PM2, Nginx
  3. GitHub (2026). Deploying a Next.js Application on a VPS with Hostinger
  4. Hostmycode (2026). Host Next.js Application with Nginx on Ubuntu
  5. Gist (2026). How to Deploy a Next.js App on a VPS Using Pnpm, PM2, Nginx, and SSL
  6. Techify (2026). Step-by-Step Guide: Deploying a Next.js App on Ubuntu VPS with Nginx
  7. Codewithharry (2026). How to Host a Next.js App in Production on an Ubuntu VPS
  8. Hackerwasii (2026). Hosting a Next.js App in Production on Ubuntu VPS
  9. GitHub (2026). GitHub - leerob/next-self-host: An Example Deploying Next / Postgres
  10. DEV (2026). How to Deploy Next.js App to VPS (Ubuntu Server) with GitHub

Pertanyaan Umum

Kenapa proses build Next.js di VPS sering mengalami error out of memory?
Proses kompilasi aplikasi Next.js butuh lonjakan alokasi RAM yang cukup tinggi di sisi server. Jika VPS teman-teman memiliki kapasitas memori fisik yang terbatas, penambahan file swap sebesar 2GB sangat dianjurkan agar proses build berjalan lancar tanpa mengalami crash mendadak.
Apa fungsi utama Nginx dalam arsitektur deployment Next.js?
Nginx bertindak sebagai reverse proxy yang bertugas menerima trafik masuk dari port standar web melalui protokol HTTP atau HTTPS. Komponen ini meneruskan permintaan tersebut ke port internal tempat aplikasi Next.js berjalan sekaligus melayani aset statis secara langsung untuk menghemat resource CPU.
Mengapa harus pakai PM2 alih-alih menjalankan perintah npm start secara langsung?
PM2 berfungsi sebagai process manager handal yang memastikan aplikasi Next.js tetap menyala di latar belakang meskipun sesi terminal SSH ditutup. Utilitas ini juga dilengkapi fitur auto-restart dan cluster mode untuk membagi beban kerja ke seluruh core CPU yang tersedia di server.
Bagaimana cara update kode aplikasi di VPS tanpa harus melakukan config ulang dari awal?
Teman-teman bisa pakai integrasi Git untuk menarik update kode terbaru langsung ke direktori proyek di server. Setelah itu, jalankan perintah instalasi dependency, kompilasi ulang aset production, dan lakukan reload pada proses PM2 agar perubahan langsung aktif tanpa downtime.

Kesimpulan

Melakukan deploy aplikasi Next.js ke VPS Ubuntu mandiri memberi teman-teman kendali penuh atas performa server, alokasi memori, dan fleksibilitas environment tanpa batasan layanan hosting instan. Kombinasi Ubuntu, Nginx, PM2, dan Certbot terbukti tangguh untuk menangani trafik production secara stabil sekaligus menjaga keamanan data tetap optimal melalui enkripsi HTTPS dan proteksi firewall.

Meskipun butuh sedikit usaha awal di terminal dibanding platform serverless, stabilitas jangka panjang dan efisiensi biaya yang didapat sepadan dengan proses konfigurasinya. Mulailah merancang pipeline otomatisasi sederhana agar proses rilis fitur berikutnya jauh lebih cepat dan minim kesalahan manual.

Komentar (0)

Belum ada komentar. Jadilah yang pertama berbagi pendapat!

Tinggalkan komentar