Sudah capek-capek belajar Vue 3, bikin komponen, nulis logika, dan akhirnya aplikasimu jalan mulus di localhost:5173. Tapi kalau ditanya: "Eh, bisa dilihat orang lain nggak?" — kamu malah bengong. Familiar? 😅
Ini artikel terakhir dari seri 16 Artikel Belajar Vue: Vue from Zero to Zorro, dan kita akan tutup seri ini dengan cara yang paling memuaskan: deploy vue 3 ke internet sungguhan. Kita akan bahas cara build vue 3 jadi file statis yang siap upload, lalu deploy ke dua platform hosting gratis terpopuler — Vercel dan Netlify. Dari laptop ke internet, step by step, tanpa perlu bayar hosting!
Build = proses mengubah source code Vue (banyak file .vue, .js, .css) menjadi file HTML/JS/CSS statis yang bisa dibuka browser tanpa server backend. Deploy = proses mengunggah file-file itu ke server publik agar bisa diakses siapa saja di seluruh dunia.
🏗️ Memahami Proses Build Vue 3: Dari Kode ke File Statis
Bayangkan kamu punya resep rahasia masakan (source code Vue 3). Sebelum bisa dijual ke restoran (internet), kamu harus memasak dulu sampai jadi hidangan siap saji (build output). Proses itulah yang dilakukan perintah npm run build.
Vite — build tool default Vue 3 — akan melakukan beberapa hal sekaligus: bundling (menggabungkan ratusan file jadi beberapa file saja), minifikasi (menghapus spasi dan komentar), tree-shaking (membuang kode yang tidak dipakai), dan code splitting (memecah bundle agar loading lebih cepat). Hasilnya masuk ke folder /dist.
Setelah build, buka folder dist/ dan lihat isinya. Kamu akan menemukan index.html, folder assets/ berisi JS dan CSS yang sudah diminifikasi. Itulah yang nanti diupload ke hosting!
Jalankan dev server dulu, pastikan tidak ada error sebelum build.
npm run dev
Ini perintah utama untuk build vue 3 menggunakan Vite.
npm run build
Sebelum deploy, cek dulu apakah hasil build berjalan normal.
npm run preview # Buka http://localhost:4173
Vite menggunakan Rollup di balik layar untuk proses build production. Hasilnya jauh lebih kecil dibanding Webpack — ukuran bundle bisa 30–50% lebih ringan untuk project yang sama!
🚀 Deploy Vue 3 ke Vercel: Cara Termudah dan Tercepat
Vercel adalah pilihan favorit para developer Vue dan React karena sangat pintar mendeteksi framework secara otomatis. Kamu tidak perlu konfigurasi manual — cukup hubungkan GitHub repo, dan Vercel akan tahu sendiri cara build dan deploy aplikasimu. Inilah cara deploy vue 3 ke vercel yang paling direkomendasikan.
git init git add . git commit -m "first commit" git branch -M main git remote add origin https://github.com/username/repo.git git push -u origin main
Klik "Add New → Project" lalu pilih repo yang baru kamu push.
Vercel mendeteksi Vite secara otomatis. Build command: npm run build, Output dir: dist.
Dalam 1–2 menit, aplikasimu live di namaproject.vercel.app.
Setiap kali kamu git push ke branch main, Vercel otomatis melakukan re-deploy! Ini disebut Continuous Deployment. Kamu tidak perlu deploy manual setiap ada perubahan — sungguh workflow yang ajaib untuk developer modern.
Satu hal penting yang sering dilupakan pemula: jika aplikasimu di-deploy ke sub-folder (misalnya di GitHub Pages), kamu perlu set base di vite.config.js. Untuk Vercel, ini tidak diperlukan karena deploy di root domain.
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], // base: '/' sudah default, tidak perlu diubah untuk Vercel })
🌐 Deploy Vue 3 ke Netlify: Alternatif Handal dengan Fitur Lengkap
Kalau Vercel adalah si cepat dan minimalis, Netlify adalah saudaranya yang lebih banyak fitur: ada form handling bawaan, A/B testing, dan edge functions. Tidak kalah mudah untuk deploy vue 3, dan juga gratis untuk project personal!
npm run build
Kamu akan melihat zona drop besar di tengah halaman.
dist/ ke sana — done!Netlify langsung deploy dan memberimu URL publik. Tidak perlu akun!
Untuk deployment yang lebih profesional dengan auto-deploy, kamu bisa connect Netlify ke GitHub sama seperti Vercel. Masuk ke netlify.com, klik "Add new site → Import an existing project", pilih GitHub, dan konfigurasikan:
# Build command: npm run build # Publish directory: dist # Node version (opsional, di Environment Variables): NODE_VERSION = 20
Jika kamu pakai Vue Router dengan mode history, kamu harus tambahkan file _redirects di folder public/ agar routing tidak error saat di-refresh:
# public/_redirects (untuk Netlify)
/* /index.html 200
Untuk Vercel, buat file vercel.json di root project:
{
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
⚖️ Vercel vs Netlify: Mana yang Cocok untuk Deploy Vue 3?
Kedua platform sama-sama gratis, sama-sama hebat. Perbedaannya ada di filosofi dan fitur unggulan masing-masing. Berikut perbandingan lengkapnya agar kamu bisa pilih yang paling pas:
Pilih Vercel jika kamu sudah familiar dengan Git dan ingin pengalaman deploy paling seamless untuk Vue/React. Pilih Netlify jika kamu butuh form handling gratis, lebih sering uji coba cepat, atau tim kamu sudah pakai Netlify untuk project lain.
🛠️ Tips Optimasi Sebelum Build & Deploy Vue 3 ke Production
Deploy bukan sekadar upload file. Ada beberapa hal yang perlu kamu cek agar aplikasimu tidak hanya jalan, tapi juga cepat dan aman di production.
Jangan commit .env ke GitHub! Gunakan fitur Environment Variables di dashboard Vercel/Netlify.
npm i -D rollup-plugin-visualizer
Gunakan format WebP untuk gambar dan plugin vite-plugin-imagemin untuk kompresi otomatis saat build.
// router/index.js — lazy load component component: () => import('../views/AboutView.vue')
Vite hanya mengekspos env variables dengan prefix VITE_ ke client. Jadi, jika kamu punya API key, pastikan namanya seperti VITE_API_KEY agar bisa diakses via import.meta.env.VITE_API_KEY.
# .env.production
VITE_API_BASE_URL=https://api.produksiku.com
16 Artikel Belajar Vue: Vue from Zero to Zorro
Artikel ini adalah bagian dari seri lengkap belajar Vue 3 dari nol. Mulai dari konsep dasar, komponen, state management, routing, testing, hingga deploy — semua ada di sana.
🗺️ Lihat Semua 16 Artikel →
No comments:
Post a Comment