Belajar Vue - Deployment & Hosting

#Pendahuluan

Setelah semua episode membangun aplikasi, saatnya mengirimkannya ke dunia nyata. Deployment adalah momen di mana kode menjadi produk: build harus benar, environment harus pas, dan semua rute harus berfungsi di domain produksi.

Episode 20 membahas cara membawa aplikasi Vue ke produksi: deployment ke Vercel dan Netlify, hosting SPA dan static site termasuk rewrite rules, konfigurasi environment dan build-time variables, serta alur deploy production yang bisa diulang dengan aman.

#Deployment ke Vercel dan Netlify

#Build dari Folder dist

Vercel dan Netlify membangun otomatis dari repo dengan perintah yang sama:

npm install
npm run build

Build menghasilkan folder dist berisi HTML, JavaScript, CSS, dan aset statis. Platform akan memilih framework Vue secara otomatis dan menyalakan CDN di depan hasil build.

#Deploy dengan CLI

Untuk kontrol penuh, gunakan CLI:

npm install -g vercel
vercel --prod

vercel --prod mengunggah build ke produksi. URL preview juga bisa dibuat sebelum produksi untuk ditinjau tim — fitur yang membuat deploy tidak lagi menakutkan.

#SPA Hosting dan Static Site

#Rewrite untuk SPA Routing

SPA dengan vue-router memakai History mode, jadi semua rute harus diarahkan ke index.html:

/*    /index.html   200

/* /index.html 200 membuat Netlify mengirim semua path ke aplikasi. Tanpa aturan ini, refresh di /produk/1 akan menampilkan 404.

#Konfigurasi Vercel

Vercel memakai vercel.json untuk efek yang sama:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

"source": "/(.*)" menangkap semua rute dan meneruskannya ke index.html. JavaScript router yang menentukan halaman mana yang tampil.

#Firebase Hosting

Firebase juga menyediakan hosting statis:

npm install -g firebase-tools
firebase init hosting
firebase deploy --only hosting

firebase deploy --only hosting mengunggah folder dist ke CDN Firebase. Firebase Hosting cocok bila aplikasi sudah memakai ekosistem Firebase lain.

#Environment dan Build-time Variables

#Variabel Build-time

Variabel VITE_ diganti nilainya saat build, bukan saat runtime:

VITE_API_BASE_URL=https://api.example.com npm run build

VITE_API_BASE_URL dibakar ke bundle saat build. Nilainya bisa berbeda untuk tiap environment: staging memakai URL staging, produksi memakai URL produksi. Pastikan secret tidak pernah masuk variabel build.

#Konfigurasi di Platform

Di Vercel dan Netlify, atur variabel di dashboard atau file konfigurasi, lalu nilai tersebut otomatis dipakai saat build. Simpan nilai di secret manager platform, bukan di repo.

#Production Deployment Workflow

• Gunakan branch main sebagai sumber produksi dan staging untuk pratinjau.
• Bangun dan deploy otomatis dari CI setelah test lulus.
• Periksa URL preview sebelum menyetujui rilis.
• Sediakan rollback: platform hosting menyimpan riwayat deploy.
• Pantau health endpoint dan error rate setelah deploy.

#Penutup

Episode 20 mengantarkan aplikasi kalian ke produksi: build yang benar untuk Vercel dan Netlify, rewrite rules untuk SPA hosting, Firebase Hosting sebagai alternatif, environment variables pada build-time, dan alur deploy yang bisa diulang dengan aman.

Inti yang harus dibawa pulang:

• Vercel dan Netlify membangun dari repo secara otomatis.
• SPA butuh rewrite rules agar rute tidak 404.
• Firebase Hosting menyediakan hosting statis dari CDN.
• Variabel VITE_ di-resolve saat build.
• Simpan secret di platform, bukan di repo.
• Selalu siapkan rollback untuk setiap rilis.

Di episode 21 selanjutnya kita membahas server-side rendering dan Nuxt — dasar SSR dengan Nuxt.js, hybrid rendering dan static generation, model data fetching Nuxt beserta middleware, serta kapan memilih SSR dibanding SPA.