Belajar Fullstack Developer - Deployment & CI/CD

#Pendahuluan

Kode yang berjalan di mesin kalian belum berarti apa-apa — sampai ia mencapai pengguna. Episode ini membahas deployment & CI/CD: tiga hal yang mengubah kode lokal menjadi produk hidup — environment yang terpisah, pipeline yang menguji otomatis, dan proses deploy yang tidak membuat orang panik.

Di episode 2 kita memilih Next.js server-rendered. Sekarang waktunya mengirimnya ke dunia: Vercel sebagai platform (atau alternatifnya), dengan GitHub Actions sebagai pipeline.

#Environments: Tiga Dunia yang Terpisah

Jangan pernah deploy langsung ke production. Tiga environment standar:

Kunci utamanya: konfigurasi terpisah, kode sama. Selisih antara staging dan production hanyalah environment variables (DATABASE_URL, secrets) — bukan kode yang berbeda. Dengan begitu, apa pun yang lolos di staging besar kemungkinannya aman di production.

#CI/CD: Otomasi yang Menguji Setiap Commit

CI (Continuous Integration): setiap push diuji otomatis. CD (Continuous Deployment): jika lolos, perubahan terdeploy otomatis. Pipeline GitHub Actions kita akan menjalankan tiga tahap:

name: CI
on:
  push:
    branches: [main]
  pull_request:
 
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: pnpm
      - run: pnpm install --frozen-lockfile
      - run: pnpm lint
      - run: pnpm vitest run
      - run: pnpm build

pnpm install --frozen-lockfile memastikan dependensi persis dari pnpm-lock.yaml, lalu lint, unit test, dan build dijalankan berurutan. Jika salah satu gagal, PR tidak boleh merge — inilah nilai CI yang sesungguhnya.

#Deployment ke Vercel

Vercel mendeteksi Next.js secara otomatis. Setup manual singkat:

1. Push repo ke GitHub, lalu Import Project di Vercel.
2. Tambahkan environment variables untuk Production dan Preview.
3. Set Preview Deployments untuk tiap PR — Vercel membuat URL preview otomatis per branch.

Setiap push ke main membuat production deployment; setiap PR membuat preview deployment terpisah. Konfigurasi framework-nya:

{
  "framework": "nextjs",
  "buildCommand": "pnpm build",
  "installCommand": "pnpm install --frozen-lockfile"
}

#Migration Database Saat Deploy

Momen paling menegangkan: perubahan skema harus diterapkan ke database produksi tanpa downtime. Prisma memberikan alat yang tepat — migrate deploy:

- run: pnpm prisma migrate deploy
  env:
    DATABASE_URL: ${{ secrets.DATABASE_URL }}
- run: pnpm prisma generate
- run: pnpm build

Aturan yang wajib dihormati:

1. migrate dev hanya di development — di production pakai migrate deploy.
2. Buat migration yang backward compatible: tambahkan kolom sebelum kode yang memakainya di-deploy, hapus kolom setelah kode baru berjalan.
3. Untuk perubahan berat (rename, split tabel), jadwalkan jendela pemeliharaan dan uji di staging dulu.

#Rollback: Rencana yang Wajib Ada

Deploy yang gagal bukan masalah — masalah adalah tidak punya rencana saat itu terjadi. Dua strategi dasar:

• Redeploy versi sebelumnya: Vercel menyimpan deployment lama; satu klik untuk kembali.
• Feature flag: rilis fitur di belakang flag, matikan tanpa redeploy.

const showNewUI = await prisma.featureFlag.findUnique({
  where: { key: "new-note-ui" },
})
return showNewUI?.enabled ? <NewNoteUI /> : <LegacyNoteUI />

Feature flag memberi kalian saklar darurat — kalian bisa menonaktifkan fitur bermasalah dalam detik, tanpa deploy.

#Praktik: Deploy Produksi

Selesaikan dengan urutan berikut:

1. Buat .github/workflows/ci.yml seperti di atas dan push — pipeline harus hijau.
2. Import proyek ke Vercel, isi env variables, deploy pertama.
3. Buat PR kecil → cek preview deployment → merge → pantau production deploy.
4. Tambahkan prisma migrate deploy sebagai tahap deploy (untuk penyedia yang mendukung akses DB).

pnpm build

#Penutup

Inti yang harus dibawa pulang:

• Tiga environment terpisah (dev/staging/prod) dengan kode sama, konfigurasi beda.
• CI menguji tiap push; CD mengirim otomatis jika lolos.
• Vercel: production per push ke main, preview per PR.
• migrate deploy untuk production; migration harus backward compatible.
• Selalu punya rencana rollback — redeploy versi lama atau feature flag.

Di episode 18 selanjutnya kita membahas serverless & edge fullstack — edge functions, serverless, dan deployment global — untuk menghadirkan aplikasi lebih dekat ke pengguna. Sampai jumpa di episode 18!