Cara Deploy Nuxt.js di Ubuntu 24.04 LTS

Nuxt.js adalah framework Vue yang menambahkan kemampuan server-side rendering, static generation, dan struktur project konvensional di atas Vue.js — posisinya di ekosistem Vue setara dengan Next.js di ekosistem React. Panduan ini menjelaskan langkah deploy aplikasi Nuxt.js versi terbaru di Ubuntu 24.04 LTS, menggunakan paket qVM-2, dengan Node.js LTS, PM2 sebagai process manager, dan Nginx sebagai reverse proxy. Pembahasan mencakup instalasi environment server, kustomisasi halaman utama sebagai studi kasus, build project, konfigurasi PM2 agar aplikasi berjalan persisten, konfigurasi Nginx, hingga pemasangan SSL gratis menggunakan Let's Encrypt.

Pengenalan

Nuxt.js (saat ini pada versi mayor 4, setelah Nuxt 3 memasuki end-of-life per 31 Juli 2026) menjalankan Vue dengan server-side rendering lewat Nitro, server engine bawaan Nuxt yang meng-compile aplikasi menjadi satu bundle Node.js siap jalan. Arsitekturnya mirip Next.js: hasil build tetap berupa proses Node.js yang harus berjalan terus-menerus di server, bukan sekadar file statis. Karena itu, PM2 tetap dibutuhkan untuk menjaga proses tetap hidup, dan Nginx berperan sebagai reverse proxy yang meneruskan request dari domain publik ke proses Nuxt.js tersebut.

Perbedaan utama dengan Next.js ada di lokasi dan bentuk hasil build: Nuxt.js menghasilkan folder .output/, dengan entry point server di .output/server/index.mjs, dibanding next start yang membaca folder .next/ secara langsung.

Ubuntu 24.04 LTS dipilih sebagai basis OS karena mendapat dukungan resmi (security update dan bug fix) hingga April 2029, sehingga sesuai digunakan untuk server aplikasi yang membutuhkan masa pakai jangka panjang. Panduan ini ditujukan untuk VPS atau qVM yang baru saja di-deploy (fresh install) dan belum memiliki konfigurasi tambahan apa pun.

Persyaratan

Sebelum memulai deploy, pastikan hal-hal berikut sudah terpenuhi:

Software

• Ubuntu 24.04 LTS, kondisi fresh install (belum ada web server/service lain yang bentrok port)
• Akses root atau user dengan hak sudo
• Koneksi internet untuk mengunduh paket dari repository Ubuntu, dependensi npm, dan sertifikat SSL
• SSH client pada sisi lokal untuk remote ke qVM
• Project Nuxt.js yang akan di-deploy (project baru maupun repository Git yang sudah ada)

Hardware / Spesifikasi VPS qVM

Panduan ini menggunakan paket qVM-2, dengan spesifikasi:

• vCPU: 1 core
• RAM: 2 GiB
• Storage: 50 GiB
• Domain yang sudah diarahkan (A record) ke IP Publik qVM — digunakan untuk konfigurasi reverse proxy dan penerbitan sertifikat SSL

Spesifikasi ini sudah memadai untuk deploy aplikasi Nuxt.js skala kecil hingga menengah. Sama seperti pada deployment Next.js, qVM-2 hanya memiliki 1 vCPU sehingga manfaat PM2 cluster mode masih terbatas — disarankan menggunakan paket qVM dengan vCPU lebih banyak apabila traffic sudah tinggi.

Tahapan

1. Update dan Upgrade OS Ubuntu 24.04 LTS

Lakukan update dan upgrade pada sistem operasi Ubuntu 24.04 LTS terlebih dahulu, sebelum memulai instalasi service lainnya.

apt update && sudo apt upgrade -y

2. Instalasi Nginx

apt install nginx -y

Aktifkan agar berjalan otomatis saat qVM di-reboot, lalu periksa statusnya:

systemctl enable nginx
systemctl status nginx

Apabila status menunjukkan active (running), Nginx sudah dapat digunakan. Akses http://<IP-qVM> melalui browser untuk memastikan halaman default "Welcome to nginx!" tampil dengan benar.

3. Instalasi Node.js dengan NVM

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

Muat ulang shell agar perintah nvm dapat langsung digunakan:

source ~/.bashrc

Instal Node.js versi Active LTS terbaru (saat ini Node.js 24.x) dan jadikan sebagai versi default:

nvm install --lts
nvm alias default lts/*

Verifikasi versi Node.js dan npm yang terpasang:

node -v
npm -v

NVM menginstal Node.js pada direktori home milik user yang menjalankan perintah di atas. Pastikan seluruh tahapan berikutnya — instalasi PM2, deploy project, hingga pm2 startup — dilakukan dengan user yang sama.

4. Instalasi PM2

npm install -g pm2

Verifikasi instalasi:

pm2 -v

5. Deploy Project Nuxt.js

Buat direktori project dan buat project Nuxt.js baru dengan versi terbaru:

mkdir -p /var/www
cd /var/www
npx nuxi@latest init nuxt-app

Ikuti prompt yang muncul (package manager, Git init, dan lain-lain) — pilih npm sebagai package manager supaya konsisten dengan perintah pada tahap berikutnya.

Instal dependensi:

cd nuxt-app
npm install

Apabila project sudah ada di repository Git, gunakan git clone diikuti npm install di dalam direktori project sebagai gantinya.

Pada qVM dengan RAM terbatas (misalnya qVM-2), proses instalasi dependensi maupun build project dapat memakan memori cukup tinggi. Apabila proses gagal karena kehabisan memori, tambahkan swap sementara sebagai penyangga sebelum menjalankan ulang perintah tersebut.

Atur kepemilikan direktori project:

chown -R $USER:www-data /var/www/nuxt-app

6. Studi Kasus: Kustomisasi Halaman Utama

Nuxt 4 memakai struktur direktori baru: kode aplikasi berada di dalam folder app/. Tanpa folder app/pages/, file app/app.vue menjadi satu-satunya halaman — cocok untuk kebutuhan landing page tanpa routing pada studi kasus ini.

vim /var/www/nuxt-app/app/app.vue

Ganti seluruh isinya dengan:

<template>
  <main>
    <section class="hero">
      <span class="badge">KB Sequel &middot; Landing Page Demo</span>
      <h1>Deployment Berhasil</h1>
      <p>
        Halaman ini adalah contoh landing page Nuxt.js yang berjalan di atas
        PM2 dan Nginx reverse proxy, pada paket qVM-2.
      </p>
      <a href="#status" class="btn">Lihat Status &rarr;</a>
    </section>

    <section id="status">
      <h2>Apa yang Sudah Berjalan?</h2>
      <p class="subtitle">Ringkasan komponen yang sudah dikonfigurasi sampai tahap ini</p>
      <div class="grid">
        <div class="card">
          <h3>Node.js Aktif</h3>
          <p>Aplikasi Nuxt.js dijalankan di atas Node.js LTS lewat Nitro server pada port 3000.</p>
        </div>
        <div class="card">
          <h3>PM2 Terkelola</h3>
          <p>Proses berjalan persisten, auto-restart, dan otomatis aktif kembali setelah reboot.</p>
        </div>
        <div class="card">
          <h3>Nginx Reverse Proxy</h3>
          <p>Permintaan dari domain publik diteruskan Nginx ke aplikasi Nuxt.js.</p>
        </div>
        <div class="card">
          <h3>Siap Dikustomisasi</h3>
          <p>Ganti konten halaman ini sesuai kebutuhan project Anda.</p>
        </div>
      </div>
    </section>

    <footer>
      <p>Landing page ini adalah contoh deploy Nuxt.js dengan PM2 di atas paket qVM-2.</p>
      <p>&copy; {{ year }} KB Sequel — Semua hak cipta dilindungi.</p>
    </footer>
  </main>
</template>

<script setup>
const year = new Date().getFullYear();
</script>

<style scoped>
main { font-family: 'Segoe UI', Arial, sans-serif; background: #0f172a; color: #f1f5f9; line-height: 1.6; }
.hero { background: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #22d3ee 100%); padding: 80px 20px; text-align: center; color: #fff; }
.badge { display: inline-block; background: rgba(255,255,255,0.15); padding: 6px 16px; border-radius: 999px; font-size: 0.85rem; margin-bottom: 20px; letter-spacing: 0.5px; }
.hero h1 { font-size: 2.5rem; margin-bottom: 16px; }
.hero p { font-size: 1.1rem; max-width: 560px; margin: 0 auto 32px; opacity: 0.95; }
.btn { display: inline-block; background: #fff; color: #4338ca; padding: 14px 32px; border-radius: 999px; font-weight: 600; text-decoration: none; }
section { padding: 60px 20px; max-width: 1000px; margin: 0 auto; }
h2 { text-align: center; font-size: 1.8rem; margin-bottom: 12px; }
.subtitle { text-align: center; color: #94a3b8; margin-bottom: 40px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.card { background: #1e293b; padding: 26px; border-radius: 16px; border: 1px solid #334155; }
.card h3 { margin-bottom: 8px; color: #fff; font-size: 1.05rem; }
.card p { color: #94a3b8; font-size: 0.9rem; }
footer { text-align: center; padding: 32px 20px; color: #64748b; font-size: 0.9rem; border-top: 1px solid #1e293b; }
</style>

Konten pada bagian "Apa yang Sudah Berjalan?" mengikuti pola yang sama dengan tutorial Next.js, karena arsitektur deployment keduanya memang serupa (Node.js runtime + PM2 + Nginx reverse proxy). Tahun pada footer dihitung sekali lewat <script setup> memakai Composition API, bukan langsung di dalam template.

7. Build Project Nuxt.js

cd /var/www/nuxt-app
npm run build

Perintah ini menghasilkan folder .output/, berisi .output/public/ untuk aset statis dan .output/server/index.mjs sebagai entry point server Node.js (Nitro) yang akan dijalankan pada tahap berikutnya.

8. Jalankan Aplikasi dengan PM2

pm2 start .output/server/index.mjs --name "nuxt-app"

Periksa status dan log aplikasi:

pm2 status
pm2 logs nuxt-app

9. Konfigurasi PM2 Startup

Agar aplikasi otomatis berjalan kembali setelah qVM reboot, buat PM2 startup script:

pm2 startup systemd

Perintah di atas akan menampilkan satu baris perintah tambahan yang perlu dijalankan sebagai root — salin dan jalankan perintah tersebut sesuai output yang muncul. Setelah itu, simpan daftar proses PM2 yang sedang berjalan:

pm2 save

10. Konfigurasi Nginx sebagai Reverse Proxy

Nginx berperan sebagai reverse proxy, meneruskan request dari domain publik ke aplikasi Nuxt.js yang berjalan pada port 3000.

vim /etc/nginx/sites-available/nuxtjs.sequel.web.id.conf

Isi dengan konfigurasi berikut:

server {
    listen 80;
    listen [::]:80;
    server_name nuxtjs.sequel.web.id;

    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;
    }

    access_log /var/log/nginx/nuxtjs-app_access.log;
    error_log /var/log/nginx/nuxtjs-app_error.log;
}

Aktifkan dengan symlink ke sites-enabled, lalu uji dan reload konfigurasi:

ln -s /etc/nginx/sites-available/nuxtjs.sequel.web.id.conf /etc/nginx/sites-enabled/
nginx -t
systemctl reload nginx

11. Uji Akses Aplikasi

Akses http://nuxtjs.sequel.web.id melalui browser. Pastikan subdomain yang Anda gunakan sudah dipointing ke IP Publik qVM Anda, contohnya seperti gambar di bawah ini

Apabila landing page pada tahap 6 tampil, berarti seluruh stack (Nginx, Node.js, dan PM2) sudah berjalan dengan benar.

12. Konfigurasi SSL dengan Let's Encrypt

apt install certbot python3-certbot-nginx -y

certbot --nginx -d nuxtjs.sequel.web.id

Certbot akan meminta email untuk notifikasi perpanjangan, konfirmasi persetujuan term of service, kemudian menawarkan opsi redirect otomatis dari HTTP ke HTTPS — pilih opsi redirect agar seluruh trafik diteruskan melalui HTTPS. Plugin ini secara otomatis mengedit server block yang sudah dibuat pada tahap 10 untuk menambahkan blok listen 443 ssl beserta path sertifikat.

Periksa terlebih dahulu apakah mekanisme perpanjangan (renewal) berjalan dengan normal:

certbot renew --dry-run

Setelah tahap ini, https://nuxtjs.sequel.web.id sudah dapat diakses dengan koneksi terenkripsi SSL.

Kesimpulan

Sampai tahap ini, VPS qVM-2 (1 core, 2 GiB RAM, 50 GiB storage) sudah menjalankan aplikasi Nuxt.js versi terbaru menggunakan Node.js LTS, dikelola PM2 agar berjalan persisten dan otomatis restart apabila terjadi crash atau server reboot, dengan Nginx sebagai reverse proxy di depannya. Aplikasi telah diamankan dengan SSL gratis dari Let's Encrypt beserta redirect otomatis ke HTTPS. Konfigurasi ini sudah memadai untuk aplikasi skala kecil hingga menengah dalam lingkungan production; untuk aplikasi yang lebih besar, langkah lanjutan yang disarankan adalah memanfaatkan PM2 cluster mode pada qVM dengan vCPU lebih banyak, mengatur log rotation untuk PM2, dan menyiapkan proses deployment otomatis (CI/CD) untuk pembaruan aplikasi berikutnya.