Belajar Nuxt - Deployment & Hosting

#Pendahuluan

Kode yang hanya berjalan di laptop belum menjadi aplikasi. Episode 20 membahas cara men-deploy Nuxt ke produksi: pilihan platform hosting, target deployment Nitro, cara membaca build output, dan alur yang benar dari commit sampai situs hidup.

Keunggulan terbesar Nuxt di sini: karena Nitro mengabstraksi server, aplikasi yang sama bisa di-deploy ke Vercel, Netlify, Cloudflare, atau server Node sendiri tanpa mengubah kode aplikasi. Kalian tinggal memilih preset yang sesuai.

#Deployment Options: Vercel, Netlify, Cloudflare, dan Self-Host

#Platform Serverless Populer

Tiga platform serverless paling umum untuk Nuxt:

• Vercel: integrasi paling mulus, preset default untuk project Nuxt, dukungan edge.
• Netlify: mirip Vercel, populer untuk situs statis dan functions.
• Cloudflare: deploy ke edge network global dengan preset khusus.

Semuanya bisa dihubungkan langsung ke repository — setiap push ke main memicu build dan deploy otomatis. Ini jalan tercepat untuk project pribadi maupun tim.

#Self-Host

Jika kalian butuh kontrol penuh — data lokal, compliance, atau budget spesifik — jalankan sendiri di VPS atau Docker:

docker build -t belajar-shop .
docker run -p 3000:3000 belajar-shop

Self-host memberi fleksibilitas penuh dengan biaya operasional yang harus kalian kelola sendiri: monitoring, scaling, dan update. Pilih sesuai kebutuhan tim.

#Nitro Deployment Targets dan Serverless

#Memilih Preset

Nitro menyediakan banyak preset deployment. Atur lewat nuxt.config.ts:

Pilih preset Nitro

export default defineNuxtConfig({
  nitro: {
    preset: "vercel",
  },
})

Preset seperti vercel, netlify, cloudflare_pages, dan node-server menghasilkan output yang sesuai platform. Setiap platform punya dokumentasi resmi Nuxt — periksa preset yang direkomendasikan.

#Apa yang Terjadi di Belakang Layar

Saat build, Nitro menerjemahkan server routes dan SSR kalian ke bentuk yang dipahami platform target — misalnya fungsi serverless atau service worker edge. Kalian tidak perlu menulis adapter manual; preset menangani seluruhnya.

#Build Output dan Caching Strategies

#Memahami Folder Output

Build menghasilkan folder .output yang berisi seluruh aplikasi:

npm run build
ls .output

Folder public berisi aset statis, dan server berisi server entry point siap jalan. Aset statis biasanya disajikan dari CDN platform, sedangkan server entry dijalankan sebagai fungsi.

#Caching di Platform

Manfaatkan strategi caching yang sudah kita atur dengan routeRules di episode 14. Halaman yang di-prerender disajikan sebagai file statis; halaman swr di-cache di edge. Atur juga header untuk aset statis agar browser menyimpannya:

Cache aset statis

export default defineNuxtConfig({
  routeRules: {
    "/_nuxt/**": { headers: { "Cache-Control": "public, max-age=31536000, immutable" } },
  },
})

File di /_nuxt di-hash sehingga aman di-cache sangat lama — nama filenya berubah saat isi berubah, jadi pengguna selalu mendapat versi baru saat deploy.

#Production-Ready Deployment Flow

#Alur dari Commit ke Produksi

Alur deployment yang matang terlihat seperti ini:

1. Developer push ke branch.
2. CI menjalankan typecheck, lint, dan test (episode 19).
3. Jika lolos, build produksi dijalankan.
4. Deployment ke staging untuk uji manual.
5. Setelah disetujui, deploy ke produksi.

npm run build

Pastikan environment variables lengkap di platform — NUXT_PUBLIC_* dan secret dari episode 8. Tanpa env yang benar, aplikasi bisa berjalan tapi rusak di runtime.

#Verifikasi Setelah Deploy

Setelah live, lakukan verifikasi: buka beberapa halaman penting, periksa log error, dan jalankan audit performa. Episode 22 akan membahas observability untuk pemantauan berkelanjutan.

#Penutup

Episode 20 membawa aplikasi kalian ke dunia nyata: pilihan hosting dari Vercel, Netlify, Cloudflare, hingga self-host; pemahaman preset Nitro untuk serverless; pengelolaan build output dan caching; serta alur deployment yang terverifikasi dari commit sampai produksi.

Inti yang harus dibawa pulang:

• Nuxt bisa di-deploy ke hampir semua platform berkat preset Nitro.
• Vercel, Netlify, dan Cloudflare adalah pilihan serverless paling mulus.
• Self-host dengan Docker memberi kontrol penuh dengan biaya operasional sendiri.
• Folder .output berisi aset statis dan server entry untuk platform.
• Manfaatkan routeRules untuk caching di edge dan browser.
• Pastikan environment variables lengkap sebelum deploy produksi.

Di episode 21 selanjutnya kita akan membahas edge dan serverless runtime — deployment Nuxt di edge runtime, fungsi serverless dengan server Nitro, perbedaan runtime dan pertimbangan environment, serta kasus penggunaan edge versus serverless.