Praktik: Continuous Deployment ke Vercel

Dua Cara Deploy ke Vercel

Vercel punya integrasi Git bawaan yang sangat mudah: connect repo, dan setiap push otomatis ter-deploy, titik. Itu bagus, tapi untuk seri ini kita sengaja pakai pendekatan yang lebih eksplisit — deploy lewat GitHub Actions kita sendiri.

Kenapa? Karena kita mau deployment itu betul-betul menjadi bagian akhir dari pipeline yang sudah kita bangun: test dulu, baru build, baru deploy. Kalau pakai integrasi native, Vercel deploy duluan tanpa peduli hasil test kita di GitHub Actions. Pendekatan eksplisit ini juga yang biasa dipakai kalau nanti kamu pindah ke platform lain — konsepnya portable.

Menyiapkan Aplikasi untuk Vercel

Vercel adalah platform serverless — tiap request idealnya ditangani oleh function yang hidup sebentar, bukan server yang nyala terus seperti biasa kita pakai app.listen(). Untungnya, Express app kita gampang banget diadaptasi.

Langkah 1 — buat api/index.js:

module.exports = require('../src/app');

File ini cuma re-export Express app yang sama persis yang sudah kita tes di artikel-artikel sebelumnya. Kita tidak menulis ulang logic apa pun — cukup satu baris.

Langkah 2 — buat vercel.json di root:

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

Baris ini bilang ke Vercel: semua request, apa pun path-nya — /health, /api/tasks, apa pun — arahkan ke function api/index.js. Nanti Express sendiri yang mengurus routing internal, persis seperti waktu jalan lokal.

Sebelum lanjut, kita bisa tes dulu perilaku Vercel ini secara lokal pakai npx vercel dev, buka localhost:3000/health, dan pastikan responsnya sama seperti sebelumnya.

Setup Project di Vercel & Ambil Credential

npm install --global vercel
vercel login
vercel link

vercel link menghubungkan folder lokal kita ke sebuah project di akun Vercel — kalau belum ada, dia akan membuatkan project baru. Setelah ini, akan muncul folder .vercel/, isinya project.json berisi orgId dan projectId. Folder ini JANGAN di-commit — makanya sudah dimasukkan ke .gitignore dari awal.

Ambil token:

Sekarang kita punya tiga informasi: VERCEL_TOKEN, VERCEL_ORG_ID, dan VERCEL_PROJECT_ID. Semuanya credential yang harus dijaga rahasia — ingat konsep GitHub Secrets dari artikel sebelumnya? Persis dipakai di sini.

Tambahkan 3 repository secrets di Settings → Secrets and variables → Actions:

Job deploy di Workflow

deploy:
  needs: build
  runs-on: ubuntu-latest
  if: github.ref == 'refs/heads/main' && github.event_name == 'push'
  environment:
    name: production
    url: ${{ steps.deploy.outputs.deployment-url }}
  env:
    VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
    VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

  steps:
    - uses: actions/checkout@v4

    - name: Install Vercel CLI
      run: npm install --global vercel@latest

    - name: Pull Vercel environment info
      run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

    - name: Build project artifacts untuk Vercel
      run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

    - name: Deploy ke Vercel (production)
      id: deploy
      run: |
        url=$(vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }})
        echo "deployment-url=$url" >> "$GITHUB_OUTPUT"

Beberapa poin penting:

Setelah run selesai, buka URL yang muncul di output — itu aplikasi kita yang sudah live di Vercel. Coba akses endpoint /health dan /api/tasks langsung dari browser atau curl.

Manual Approval Gate — GitHub Environments

Ingat di artikel pertama kita bahas beda Continuous Delivery dan Continuous Deployment? Bedanya cuma satu: ada approval manual sebelum ke production atau tidak. Sekarang kita praktikkan itu betulan.

Langkahnya:

Sekarang, begitu job deploy mau jalan, pipeline akan PAUSE dan menunggu approval manual dulu — muncul notifikasi ke reviewer yang kita set. Baru setelah di-approve, deployment lanjut jalan.

Kalau kamu push ke main lagi, job deploy akan berstatus "Waiting". Klik "Review deployments", klik "Approve and deploy", baru job-nya lanjut. Dengan satu toggle ini, pipeline kita otomatis berubah dari Continuous Deployment menjadi Continuous Delivery. Kalau nanti tim kamu sudah percaya diri penuh dengan test coverage, tinggal matikan required reviewer, dan kembali menjadi full Continuous Deployment.

Rangkuman

Kita baru saja menyelesaikan pipeline end-to-end: push kode → test di beberapa versi Node → build & package jadi artifact → deploy otomatis ke Vercel, lengkap dengan manual approval gate lewat GitHub Environments. Ini pipeline yang strukturnya sama persis dengan yang dipakai tim-tim production sungguhan, cuma skalanya dikecilkan untuk belajar.