Cara Deploy Aplikasi Web ke Vercel: Panduan Lengkap Step-by-Step
Vercel adalah platform cloud yang sangat populer untuk mendeploy aplikasi frontend modern seperti Next.js, React, Vue, dan static site. Platform ini menawarkan deployment otomatis, preview URL untuk setiap branch, serta scaling yang mudah.
Berikut panduan lengkap cara deploy aplikasi ke Vercel, baik melalui integrasi Git maupun menggunakan Vercel CLI.
Persiapan Sebelum Deploy
Pastikan Anda sudah memiliki:
- Akun Vercel (bisa daftar gratis dengan GitHub, GitLab, atau Bitbucket)
- Project yang siap di-deploy (disarankan sudah di-push ke Git repository)
- Node.js terpasang di komputer (untuk metode CLI)
| Metode Deploy | Kelebihan | Cocok Untuk |
|---|---|---|
| Git Integration | Otomatis setiap push, preview URL | Tim & production workflow |
| Vercel CLI | Cepat, fleksibel, bisa dari terminal | Developer individual & testing |
| Vercel Drop | Tanpa setup, drag & drop | Prototype & static site |
Cara 1: Deploy via GitHub (Paling Direkomendasikan)
1. Login ke vercel.com menggunakan akun GitHub Anda.
2. Klik tombol Add New… → Project.
3. Pilih repository yang ingin di-deploy, lalu klik Import.
4. Vercel biasanya otomatis mendeteksi framework (misalnya Next.js). Periksa Build Command dan Output Directory jika diperlukan.
5. Tambahkan Environment Variables jika project Anda membutuhkannya (misalnya API keys).
6. Klik Deploy.
Setelah proses build selesai, Vercel akan memberikan URL production. Setiap kali Anda melakukan push ke branch utama, deployment production akan otomatis ter-update. Push ke branch lain akan menghasilkan Preview Deployment.
Cara 2: Deploy Menggunakan Vercel CLI
1. Install Vercel CLI secara global:
npm install -g vercel
2. Login ke akun Vercel:
vercel login
3. Masuk ke folder project Anda, lalu jalankan:
vercel
Ikuti instruksi di terminal untuk menghubungkan project. Perintah ini akan membuat Preview Deployment.
4. Untuk deploy ke production, gunakan:
vercel --prod
Anda juga bisa menarik environment variables ke lokal dengan perintah vercel env pull.
Tips Tambahan
• Pastikan file package.json memiliki script build yang benar (biasanya next build untuk Next.js).
• Gunakan Environment Variables di dashboard Vercel untuk menyimpan data sensitif.
• Custom domain bisa ditambahkan langsung dari dashboard project.
• Manfaatkan Preview Deployment untuk review sebelum merge ke production.
Dengan mengikuti langkah-langkah di atas, aplikasi Anda bisa live di Vercel dalam hitungan menit. Platform ini sangat cocok untuk project modern yang membutuhkan performa tinggi dan workflow development yang cepat.
Jika Anda membutuhkan bantuan untuk setup project, optimasi performa, atau integrasi AI ke dalam aplikasi web, tim Clovertechno siap membantu. Kunjungi clovertechno.id untuk konsultasi pengembangan software dan solusi AI yang disesuaikan dengan kebutuhan bisnis Anda.
Reza