Vibe Coding SDLC BiblePart 5 of 6

Deployment & DevOps: Dari Localhost ke Production

Kode yang perfect di laptop tidak berarti apa-apa sampai user bisa mengaksesnya. Part 5 mengajarkan CI/CD pipeline (GitHub Actions), environment management (dev/staging/production), Vercel zero-config deploy, database migration strategy, monitoring setup (Sentry, uptime monitoring), rollback strategy, dan DNS/SSL configuration — semua step-by-step dari zero ke production.

Maret 202640 menit bacaDeployment • CI/CD • Vercel • GitHub Actions • Monitoring
1 2 3 4 5 6

Daftar Isi — Part 5: Deployment & DevOps

  1. Deployment Strategy — Vercel vs Railway vs Docker vs AWS
  2. CI/CD Pipeline — GitHub Actions: auto test, build, deploy
  3. Environment Management — Dev, staging, production secrets
  4. Vercel Deploy — Zero-config untuk Next.js
  5. Database Migration — Prisma migrate di production
  6. Monitoring Setup — Error tracking, uptime, performance
  7. Rollback Strategy — Kalau deployment gagal
  8. Launch Checklist
🚀

1. Deployment Strategy

Pilih berdasarkan: complexity, budget, scaling needs, team size
StrategyBest ForComplexityCostScaling
Vercel (recommended)Next.js, solo/small team, MVPVery lowFree tier generousAuto-scale
RailwayFullstack + DB in one platformLow$5/mo+Auto-scale
Docker + VPSFull control, custom infraMedium$5-50/moManual
AWS/GCPEnterprise, complex requirementsHighVariableUnlimited

2. CI/CD Pipeline — GitHub Actions

Auto-test, auto-build, auto-deploy di setiap PR dan merge ke main
.github/workflows/ci.yml
name: CI/CD Pipeline on: push: { branches: [main] } pull_request: { branches: [main] } jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: { node-version: 20, cache: npm } - run: npm ci - run: npx tsc --noEmit # Type check - run: npx eslint . # Lint - run: npx vitest run # Unit + integration - run: npx playwright install --with-deps - run: npx playwright test # E2E - run: npm audit --production # Security deploy: needs: test if: github.ref == 'refs/heads/main' runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: amondnet/vercel-action@v25 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} vercel-args: '--prod'
🔐

3. Environment Management

Dev, staging, production — NEVER share secrets antar environment
VariableDev (.env.local)ProductionNotes
DATABASE_URLlocalhost:5432/devNeon production URLNEVER same DB for dev & prod
NEXTAUTH_SECRETdev-secret-12364-char random stringopenssl rand -base64 32
NEXTAUTH_URLhttp://localhost:3000https://taskflow.appMust match actual domain
SENTRY_DSN(optional)https://sentry.io/prodError tracking
📦

4. Vercel Deploy

Push ke main = auto deploy. Setup 5 menit.
Terminal — Vercel Setup
# 1. Install & link $ npm i -g vercel && vercel link # 2. Set env vars $ vercel env add DATABASE_URL production $ vercel env add NEXTAUTH_SECRET production # 3. Deploy! $ vercel --prod # Deployed to https://taskflow.vercel.app in ~60s # After this, every push to main auto-deploys! $ git push origin main # Auto build + deploy
📊

5. Monitoring Setup

Error tracking + uptime + performance — know before users complain
WhatTool (Free)SetupWhy
Error TrackingSentry5 minStack traces, user context, alerts
PerformanceVercel Analytics0 min (built-in)Core Web Vitals, response times
UptimeBetterUptime2 minAlert when site goes down
LogsVercel Logs0 min (built-in)Server-side logs
AnalyticsPostHog / Plausible10 minPrivacy-friendly usage data

6. Launch Checklist

10 items sebelum announce launch
#ItemDone?
1CI/CD pipeline running (all tests pass)
2Production env vars set correctly
3Database migrations applied
4Custom domain + SSL active
5Sentry error tracking connected
6Uptime monitoring active
7Database backup configured
8Rate limiting enabled
9Security headers configured
10Load test passed
SDLC
Tech Review Desk — Vibe Coding SDLC Bible
Sumber: GitHub Actions docs, Vercel docs, Neon docs, Sentry docs.
rominur@gmail.com  •  t.me/Jekardah_AI