Bab 10

Dari Kode ke Production

Deployment dan Operasi

"Kode yang bekerja di komputer Anda tetapi tidak di production adalah kode yang tidak bekerja."

Tujuan Pembelajaran

Men-deploy aplikasi Next.js ke production menggunakan Vercel dengan konfigurasi environment variables, build optimization, dan custom domain dengan HTTPS
Mengimplementasikan CI/CD pipeline dengan GitHub Actions untuk automated testing dan deployment otomatis pada setiap push ke repository
Memonitor dan mengoptimasi aplikasi production — setup error tracking (Sentry), performance monitoring (Lighthouse, Core Web Vitals), dan uptime monitoring

Tujuan Pembelajaran (lanjutan)

Melakukan production readiness audit — memvalidasi security, performance, reliability, dan monitoring sebelum launch menggunakan checklist terstruktur
Mendiagnosis dan menangani deployment issues — troubleshooting build failures, environment variable problems, performance regressions, dan incident response dengan rollback strategies

Di Mana Kita Sekarang?

Bab 7

Frontend dengan React dan Next.js

Bab 8

Database dan backend dengan Supabase

Bab 9

Authentication, authorization, dan security

Aplikasi bekerja sempurna di localhost:3000
Masalah: Hanya Anda yang bisa menggunakannya

Arsitektur: Dari Lokal ke Global

Sekarang (Development)

Next.js dev server di localhost:3000 → Hanya Anda yang bisa akses

Setelah Bab 10 (Production)

Custom domain → DNS → Vercel Edge Network (CDN global) → HTTPS/SSL → Next.js optimized → Supabase Production DB

Akses: Siapa saja, kapan saja. Uptime: 99.9%+

Mengapa Deployment ≠ Development?

Environment Management

Development vs staging vs production punya konfigurasi berbeda

Build Optimization

Production code di-minify, di-compress, di-optimize

Security Hardening

Secrets management, HTTPS, security headers

Performance Tuning

CDN, caching, image optimization, code splitting

Monitoring & Observability

Error tracking, performance metrics, logs

Incident Response

Rollback, debugging production issues, uptime maintenance

Analogi: Grand Opening Restoran

Pindah dari "masak di rumah" ke "buka restoran" bukan sekadar memindahkan kompor.

Menyediakan alamat yang bisa ditemukan → Custom domain dan DNS
Mendapatkan izin usaha → HTTPS dan SSL certificate
Menyiapkan dapur industrial → Build optimization
Menjaga resep rahasia → Environment variables dan secrets management
Sistem antrian dan pelayanan cepat → CDN dan caching
Inspeksi kesehatan berkala → Monitoring dan error tracking

Development vs Production

Aspek	Development	Production
Kode	Unminified, source maps	Minified, tree-shaken, compressed
Environment Vars	File `.env.local`	Platform secrets (terenkripsi)
Error Handling	Pesan error detail	Pesan generik (detail di-log)
Performa	Hot reload, dev server	Build optimal, CDN, caching
Database	Test/seed data	Data user nyata (backup wajib)
Akses	Hanya localhost	Internet publik (domain + HTTPS)

Proses Build: Dari Source Code ke Production Bundle

Resolusi Dependency — npm/yarn membaca package.json dan install dependencies
Kompilasi TypeScript — TypeScript Compiler converts .ts/.tsx ke JavaScript + type checking
Build Next.js — Pre-render halaman static (SSG), code splitting, tree shaking, minification
Pemrosesan Asset — Gambar di-resize, di-compress, dikonversi ke WebP/AVIF. CSS di-bundle.

Hasil Build

Output direktori .next/ berisi:

static/ — asset static dengan nama hash
server/ — kode server-side
cache/ — cache build untuk rebuild lebih cepat

Bundle Size Reduction

~5 MB → ~500 KB

Pengurangan ~90%!

Environment Variables: Tiga Environment

Development (Lokal)

File .env.local (tidak di-commit). Database menggunakan Supabase dev project.

Staging (Opsional)

Platform secrets. Testing sebelum production. Database terpisah.

Production (Live)

Platform secrets terenkripsi. User nyata, data nyata. Database production.

⚠️ Prefix NEXT_PUBLIC_* → Terekspos ke browser (public keys only)

❌ JANGAN PERNAH commit .env.local ke Git

CDN dan Edge Network

CDN (Content Delivery Network) adalah jaringan server global yang meng-cache asset statis Anda di lokasi tersebar di seluruh dunia.

Tanpa CDN

User di Tokyo → US server → ~150ms latency
User di Sydney → US server → ~200ms latency

Dengan CDN (Vercel Edge)

User di Tokyo → Tokyo edge → ~10ms latency
User di Sydney → Sydney edge → ~12ms latency

10–20x lebih cepat!

Mengapa Vercel untuk Next.js?

Zero-Config Deployment

Deteksi Next.js otomatis dan konfigurasi build

Automatic HTTPS

SSL certificate instan tanpa konfigurasi manual

Edge Network

CDN di 300+ lokasi global

Serverless Functions

API routes scale otomatis sesuai traffic

Preview Deployments

Setiap Git branch dapat URL unik untuk testing

One-Click Rollback

Kembali ke deployment sebelumnya dengan 1 klik

Hands-On

Deploy ke Vercel

Pra-Deployment: Siapkan Repository

Pastikan kode ada di Git repository (GitHub)
Buat file .env.example (template tanpa nilai sensitif)
Update .gitignore — pastikan .env*.local, .next/, node_modules/ tidak di-commit
Verifikasi build lokal: npm run build dan npm run start

# Test production build
npm run build
npm run start

Deploy via Vercel Dashboard

Buat akun Vercel — sign up dengan akun GitHub
Import Project — pilih repository task-manager
Vercel otomatis mendeteksi Next.js
Konfigurasi otomatis tersedia:
- Framework: Next.js
- Build Command: npm run build
- Output Directory: .next

Tambahkan Environment Variables

Di Vercel Dashboard → Project Settings → Environment Variables:

Name: NEXT_PUBLIC_SUPABASE_URL
Value: https://your-project.supabase.co
Environments: Production, Preview, Development

Name: NEXT_PUBLIC_SUPABASE_ANON_KEY
Value: eyJhbGc...your-anon-key
Environments: Production, Preview, Development

Name: SUPABASE_SERVICE_ROLE_KEY
Value: eyJhbGc...your-service-role-key
Environments: Production only

Production sebaiknya menggunakan Supabase project terpisah

Deploy & Verifikasi

Klik tombol "Deploy"
Tunggu ~2–3 menit (deployment pertama)
Vercel generate URL: https://task-manager-abc123.vercel.app

Checklist Verifikasi

Buka URL di browser
Test signup/login
Buat, edit, dan hapus task
Cek browser console untuk error

Deploy via Vercel CLI (Metode Alternatif)

# Install Vercel CLI
npm install -g vercel

# Login
vercel login

# Deploy dari direktori root project
vercel

# Deploy ke production
vercel --prod

Kapan menggunakan CLI? Deploy cepat tanpa browser, atau integrasi ke script custom.

Deployment Otomatis dengan Git Integration

Push ke branch main → Production deployment
Push ke branch lain → Preview deployment (URL unik untuk testing)
Pull Request → Preview deployment dengan komentar otomatis di PR

# Buat feature branch
git checkout -b feature/improve-ui

# Commit dan push
git add .
git commit -m "Improve task card UI"
git push origin feature/improve-ui

# Vercel otomatis membuat preview deployment
# URL: https://task-manager-git-feature-improve-ui-username.vercel.app

Troubleshooting Masalah Deployment (1/2)

❌ Build gagal: "Module not found"

Penyebab: Package di devDependencies bukan dependencies

Solusi: npm install package --save

❌ Environment variables tidak terbaca

Penyebab: Variable belum ditambahkan di Vercel atau typo nama

Solusi: Cek Environment Variables di dashboard, pastikan nama exact match (case-sensitive)

Troubleshooting Masalah Deployment (2/2)

❌ Error 500 di production

Di mana cek: Vercel Dashboard → Deployments → Function Logs

Penyebab umum: Koneksi database salah, RLS policies terlalu ketat

❌ Style tidak muncul / gambar tidak loading

Penyebab: Domain eksternal tidak di-whitelist di next.config.js

Solusi: Tambahkan ke images.remotePatterns

Custom Domain

Professional Address untuk Aplikasi Anda

Mengapa Custom Domain?

Profesional

taskmanager.com lebih baik untuk portfolio dan bisnis

Memorable

Lebih mudah diingat dan dibagikan

Branding

Merepresentasikan identitas Anda

SEO

Custom domain memberikan sinyal trust yang lebih baik ke search engine

Biaya: $10–15/tahun untuk domain .com

DNS (Domain Name System)

DNS menerjemahkan nama domain yang human-readable menjadi IP address yang machine-readable.

A Record

Mengarahkan domain (misalnya taskmanager.com) langsung ke IP address

CNAME Record

Mengarahkan subdomain (misalnya www.taskmanager.com) ke domain lain

Propagasi DNS: 5 menit – 48 jam (biasanya < 1 jam)

Metode 1: Nameserver (Direkomendasikan)

Serahkan pengelolaan DNS sepenuhnya kepada Vercel. Kapan pakai? Jika domain hanya untuk web app.

Beli domain (misalnya taskmanager.com)
Di Vercel Dashboard → Project Settings → Domains → Tambahkan domain
Vercel menyediakan nameservers:
```
ns1.vercel-dns.com
ns2.vercel-dns.com
```
Di domain registrar → Ganti nameservers
Tunggu propagasi DNS (biasanya < 1 jam)

Metode 2: DNS Record (Kontrol Penuh)

Kapan pakai? Jika Anda ingin mempertahankan nameserver yang ada (untuk email atau layanan lain).

Di domain registrar, tambahkan DNS records:

Type: A
Name: @ (root domain)
Value: 76.76.21.21

Type: CNAME
Name: www
Value: cname.vercel-dns.com

Di Vercel Dashboard: Tambahkan taskmanager.com dan www.taskmanager.com

HTTPS dan SSL Certificate

Vercel menangani HTTPS secara otomatis:

Menyediakan SSL certificate dari Let's Encrypt
Memperbarui certificate sebelum kedaluwarsa
Meredirect HTTP ke HTTPS
Mengaktifkan HSTS (HTTP Strict Transport Security)

Tanpa HTTPS: (a) data bisa disadap, (b) browser tandai "Not Secure", (c) Google turunkan ranking.

Production Readiness Checklist (1/2)

Security ✅/⚠️/❌

Semua secrets di environment variables
HTTPS enforced
Security headers dikonfigurasi
Authentication berfungsi
RLS policies diuji

Performa ✅/⚠️/❌

Lighthouse score ≥ 90
Gambar dioptimasi (WebP/AVIF)
Bundle size dianalisis
Caching strategies aktif
Core Web Vitals lolos

Production Readiness Checklist (2/2)

Reliabilitas ✅/⚠️/❌

Error tracking dikonfigurasi
Database backups aktif
Prosedur rollback dokumentasi
Health check endpoint

Monitoring ✅/⚠️/❌

Analytics tracking terpasang
Error alerts dikonfigurasi
Performance monitoring aktif
Uptime monitoring di-setup

Aturan: Jika ada ❌ di Security atau Reliabilitas, aplikasi TIDAK BOLEH di-deploy

Key Takeaways

Deployment bukan sekadar "upload kode" — melibatkan environment management, build optimization, security hardening, dan monitoring
Build process mengubah bundle development ~5 MB menjadi production ~500 KB — pengurangan ~90%
Environment variables berbeda untuk development, staging, dan production — prefix NEXT_PUBLIC_* terekspos ke browser
CDN (Edge Network) mengurangi latency 10–20x lipat dengan meng-cache konten di server terdekat user
Vercel menyediakan zero-config deployment, automatic HTTPS, preview deployments, dan one-click rollback

Selamat! 🎉

Aplikasi Anda sekarang live di production

"Production engineering adalah tentang kode yang bekerja secara andal untuk ribuan pengguna di seluruh dunia, 24/7."