Kenalan dengan Vercel: Deploy Aplikasi Web Semudah Push ke GitHub

Dulu, proses deploy sebuah aplikasi web bisa memakan waktu berjam-jam. Perlu setup server, konfigurasi nginx, urus SSL certificate, setup CI/CD pipeline, dan masih banyak lagi. Buat developer yang fokusnya di product, ini semua terasa seperti hambatan yang tidak perlu.

Vercel hadir dengan pendekatan yang berbeda: cukup hubungkan repository Git, dan setiap kali kita push kode, aplikasi langsung ter-deploy secara otomatis — lengkap dengan HTTPS, CDN global, dan preview URL untuk setiap branch. Tidak ada konfigurasi server, tidak ada urusan SSL manual.

Artikel ini akan membahas apa itu Vercel, bagaimana cara kerjanya, dan langkah praktis untuk mulai deploy aplikasi dari awal sampai production — termasuk menggunakan Vercel CLI dan file konfigurasi vercel.json.

Apa Itu Vercel?

Vercel adalah platform deployment yang dioptimalkan untuk frontend frameworks modern seperti Next.js, Astro, SvelteKit, Nuxt, dan Remix. Vercel dikembangkan oleh tim yang sama yang membuat Next.js, jadi integrasi keduanya sangat erat — meski Vercel sendiri mendukung hampir semua framework frontend.

Cara kerja Vercel bisa dianalogikan seperti ini: bayangkan kita menyewa tim DevOps yang tidak pernah tidur. Setiap kali ada commit baru, mereka langsung membangun ulang aplikasi, mendistribusikannya ke server di seluruh dunia, dan memastikan HTTPS aktif — semua dalam hitungan detik. Kita tidak perlu memikirkan infrastruktur sama sekali.

Vercel menggunakan Edge Network miliknya sendiri untuk melayani konten dari server yang paling dekat dengan pengguna. Hasilnya, latency lebih rendah dibanding hosting konvensional yang hanya punya satu lokasi server.

Dibanding platform sejenis seperti Netlify atau Railway, Vercel unggul terutama untuk proyek yang menggunakan Next.js karena dukungan fitur-fitur seperti Server Components, Edge Functions, dan Incremental Static Regeneration (ISR) langsung out-of-the-box tanpa konfigurasi tambahan.

Tiga Environment Deployment

Sebelum mulai praktik, penting untuk memahami tiga environment yang Vercel sediakan:

• Production — deployment yang berjalan di custom domain kita (misalnya www.namadomain.com). Ter-trigger saat ada push ke branch utama (biasanya main atau master).
• Preview — setiap push ke branch lain atau saat membuat Pull Request, Vercel otomatis membuat deployment terpisah dengan URL unik seperti project-git-feature-login-username.vercel.app. Berguna untuk review sebelum merge.
• Development — environment lokal saat kita jalankan vercel dev di mesin sendiri, dengan environment variables yang sama seperti di Vercel.

Pemisahan ini membuat workflow kolaborasi menjadi lebih bersih: reviewer bisa langsung buka URL preview tanpa perlu clone dan run proyek secara lokal.

Membuat Akun dan Deploy Pertama via Dashboard

Langkah pertama adalah membuat akun di vercel.com. Vercel menawarkan akun gratis (Hobby plan) yang sudah cukup untuk proyek personal dan eksperimen.

Setelah masuk ke dashboard, klik tombol Add New Project, lalu pilih Import Git Repository. Vercel akan meminta izin untuk mengakses repository GitHub, GitLab, atau Bitbucket. Setelah repository dipilih, Vercel biasanya sudah mendeteksi framework yang digunakan secara otomatis.

Untuk kebanyakan proyek, kita tidak perlu mengubah konfigurasi build apapun. Klik Deploy, dan Vercel akan mulai build. Dalam satu hingga dua menit, URL production sudah bisa diakses.

Menggunakan Vercel CLI

Untuk workflow yang lebih fleksibel — terutama saat kita perlu deploy tanpa menghubungkan repository, atau ingin kontrol lebih detail dari terminal — Vercel CLI adalah pilihan yang tepat.

Install Vercel CLI secara global menggunakan bun:

bun add -g vercel

Setelah terinstall, kita perlu login terlebih dahulu:

vercel login

Perintah di atas akan membuka browser dan meminta autentikasi. Setelah berhasil, CLI siap digunakan.

Menghubungkan Proyek Lokal ke Vercel

Masuk ke direktori proyek, lalu jalankan perintah berikut untuk menghubungkannya ke proyek Vercel:

vercel link

Perintah ini bersifat interaktif — Vercel akan bertanya nama tim dan proyek yang ingin dihubungkan. Jika proyek belum ada di Vercel, ia akan otomatis membuatnya. Hasil perintah ini adalah direktori .vercel/ yang menyimpan ID proyek dan organisasi.

Menarik Environment Variables untuk Development Lokal

Salah satu fitur CLI yang sangat membantu adalah kemampuan menarik environment variables langsung dari Vercel ke file .env.local:

vercel env pull .env.local

Ini memastikan development lokal menggunakan environment variables yang sama persis dengan yang ada di Vercel, sehingga mengurangi perbedaan perilaku antara lokal dan production.

Deploy Preview dan Production

Untuk membuat preview deployment (tanpa memengaruhi production):

vercel deploy

Output-nya adalah URL preview yang bisa langsung dibuka dan dibagikan ke tim untuk review. Setelah preview dirasa oke, deploy ke production:

vercel deploy --prod

Perintah --prod memastikan deployment ini diarahkan ke domain production, bukan hanya URL sementara.

Konfigurasi dengan vercel.json

Untuk kebutuhan konfigurasi yang lebih spesifik — misalnya mengubah build command, menambahkan redirect, atau mengatur custom headers — kita bisa menggunakan file vercel.json di root proyek. Referensi lengkapnya ada di dokumentasi vercel.json.

Berikut contoh konfigurasi untuk proyek Astro yang di-deploy ke Vercel:

// vercel.json
{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "buildCommand": "bun run build",
  "outputDirectory": "dist",
  "framework": "astro",
  "redirects": [
    {
      "source": "/blog/lama/:slug",
      "destination": "/artikel/:slug",
      "permanent": true
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        }
      ]
    }
  ]
}

buildCommand mengganti perintah build default, outputDirectory memberitahu Vercel di mana hasil build berada, redirects mengatur pengalihan URL (kode 308 untuk permanent redirect), dan headers menambahkan HTTP header kustom ke setiap response.

Properti $schema di baris pertama bukan wajib, tapi sangat membantu — dengan ini, editor seperti VS Code akan memberikan autocomplete dan validasi saat mengedit file.

Mengatasi Error “This Serverless Function has crashed”

Salah satu error yang paling sering ditemui saat pertama kali deploy ke Vercel adalah pesan 500: INTERNAL_SERVER_ERROR dengan keterangan “This Serverless Function has crashed.” Error ini tidak selalu berarti kode kita salah — seringkali penyebabnya adalah perbedaan antara environment lokal dan environment serverless milik Vercel.

Berikut penyebab paling umum beserta cara mengatasinya.

Dependency ada di devDependencies, bukan dependencies

Saat Vercel membangun proyek dengan NODE_ENV=production, package manager hanya menginstall yang ada di dependencies — semua yang ada di devDependencies diabaikan. Jika ada package yang diimport di runtime tapi terdaftar di devDependencies, function akan crash dengan error Cannot find module.

Periksa package.json dan pastikan semua package yang dibutuhkan saat runtime berada di bawah dependencies:

// package.json
{
  "dependencies": {
    "express": "^4.18.2",
    "prisma": "^5.0.0"
  },
  "devDependencies": {
    "typescript": "^5.0.0",
    "@types/express": "^4.17.0"
  }
}

Jika tidak yakin, jalankan npm ls nama-package untuk melihat di mana package tersebut terdaftar.

Environment variables tidak terdefinisi

Environment variables yang ada di file .env lokal tidak otomatis tersedia di Vercel. Vercel membaca environment variables dari pengaturan proyek di dashboard, bukan dari file .env yang ada di repository.

Tambahkan semua environment variables yang dibutuhkan melalui Project Settings > Environment Variables di dashboard, atau gunakan CLI:

vercel env add NAMA_VARIABLE

Satu hal yang sering terlewat: jika environment variable ditambahkan setelah deployment dibuat, nilainya tidak akan tersedia di deployment yang sudah ada. Perlu redeploy agar perubahan berlaku.

Dependency dengan native binaries

Package seperti bcrypt, sharp, atau canvas menggunakan native code (C/C++) yang dikompilasi untuk arsitektur sistem operasi tertentu. Binary yang dikompilasi di mesin macOS atau Windows tidak kompatibel dengan environment Linux yang digunakan Vercel.

Solusi paling bersih adalah beralih ke alternatif pure JavaScript:

• bcrypt → bcryptjs
• sharp biasanya aman karena Vercel sudah menyertakan binary-nya, tapi pastikan versinya kompatibel

Ukuran function bundle melebihi 250 MB

Batas ukuran bundle Vercel Functions adalah 250 MB setelah di-unzip. Proyek dengan banyak dependency besar bisa melebihi batas ini. Untuk mengidentifikasi package yang berat, gunakan bundlephobia.com atau npm ls untuk audit dependency tree.

Dalam vercel.json, bisa menggunakan excludeFiles untuk mengecualikan file yang tidak diperlukan dari bundle:

// vercel.json
{
  "functions": {
    "api/**/*.js": {
      "excludeFiles": "**/*.test.js"
    }
  }
}

Cara membaca log untuk diagnosis

Cara tercepat untuk menemukan akar masalah adalah dengan membaca Function logs langsung dari Vercel CLI:

vercel logs --environment production --level error --since 5m

Output-nya akan menampilkan stack trace yang jauh lebih informatif dibanding pesan “has crashed” yang generik di browser.

Hal Penting yang Perlu Diperhatikan

• Direktori .vercel/ jangan di-commit. Tambahkan ke .gitignore karena berisi ID organisasi yang bersifat sensitif.
• Environment variables tidak otomatis tersedia di build time kecuali di-prefix dengan NEXT_PUBLIC_ (untuk Next.js) atau dikonfigurasi sebagai “Exposed to the browser” di dashboard.
• Batas durasi function di Hobby plan adalah 300 detik secara default — cukup untuk kebanyakan use case, tapi perlu diperhatikan untuk operasi yang berat.
• Preview deployments memiliki deployment protection secara default. Visitor akan diminta autentikasi Vercel sebelum bisa mengakses URL preview. Ini bisa dimatikan di Project Settings jika tidak diinginkan.

Referensi

• Vercel Documentation — Getting Started
• Vercel Documentation — Deploying to Vercel
• Vercel Documentation — Deploy from CLI
• Static Configuration with vercel.json
• Vercel Functions Limits
• Why does my Serverless Function work locally but not when deployed?

Kesimpulan

Vercel memindahkan fokus developer dari urusan infrastruktur ke hal yang sebenarnya penting: produk itu sendiri. Dengan deployment otomatis, preview environment per branch, dan Edge Network yang tersebar global, hambatan antara “kode di lokal” dan “berjalan di internet” menjadi sangat tipis. Langkah berikutnya yang menarik untuk dieksplorasi adalah Vercel Functions — cara menulis serverless endpoint langsung di dalam proyek frontend tanpa perlu backend terpisah.