Belajar ReactJS - Deployment & Hosting

#Pendahuluan

Kode yang bagus belum berarti apa-apa jika tidak bisa diakses dunia. Deployment adalah proses membawa aplikasi dari lokal ke server, dan untuk React pilihannya banyak: static hosting, fungsi serverless, sampai container. Episode 20 membuat kalian paham kapan memakai yang mana.

Kita membahas perbedaan SSG dan SPA, opsi hosting seperti Vercel, Netlify, AWS, dan Firebase, pipeline CI/CD untuk otomasi, serta environment variables dan konfigurasi build-time yang menjaga rahasia tetap rahasia.

#Static Site Generation dan Deployment SPA

#Hasil Build: Folder Statis

Aplikasi React yang di-build menjadi berkas statis: HTML, CSS, dan JavaScript yang bisa dilayani dari server mana pun. Jalankan build production lalu cek hasilnya:

npm run build
ls -la dist

Folder dist berisi bundle teroptimasi hasil episode 19. Untuk mengujinya secara lokal, jalankan preview server dari build tersebut:

npm run preview

#SSG vs SPA

SPA (single page application) melayani satu HTML kosong lalu menjalankan JavaScript untuk merender seluruh halaman. SSG (static site generation) membangun HTML lengkap pada saat build. SSG lebih cepat untuk konten yang jarang berubah; SPA lebih mudah untuk aplikasi yang sangat dinamis.

#Opsi Hosting untuk Aplikasi React

#Vercel dan Netlify

Vercel dan Netlify dirancang khusus untuk frontend. Keduanya mendeteksi framework secara otomatis, membangun proyek, dan menyediakan CDN global. Deploy pertama cukup dengan menghubungkan repositori Git:

npm install -g vercel
vercel

vercel memandu konfigurasi pertama: pilih scope, folder dist, lalu dapatkan URL staging. Perintah berikutnya otomatis membuat production deployment. Netlify menawarkan alur yang hampir sama lewat drag-and-drop folder atau Git.

#AWS dan Firebase Hosting

AWS memberi kontrol penuh: unggah folder dist ke S3, pasang di balik CloudFront, dan tambahkan CI/CD lewat CodePipeline. Firebase Hosting adalah pilihan cepat dengan CLI tunggal dan integrasi Cloud Functions untuk sisi server:

npm install -g firebase-tools
firebase login
firebase init hosting
firebase deploy

firebase init hosting membuat file firebase.json dan menanyakan folder public. Isi dengan dist dan proyek siap deploy. Pilih AWS saat butuh kontrol penuh, Firebase saat menginginkan kecepatan setup.

#CI/CD untuk Aplikasi React

#Pipeline Build dan Deploy Otomatis

CI/CD menjalankan build, test, dan deploy otomatis setiap kali kode di-push. Contoh alur sederhana dengan GitHub Actions:

name: Deploy
 
on:
  push:
    branches: [main]
 
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - run: npx vercel --prod --token $VERCEL_TOKEN

Workflow ini checkout kode, memasang dependency dengan npm ci, membangun aplikasi, lalu mendeploy ke Vercel memakai token yang disimpan di secrets repository.

#Mengapa CI/CD Penting

Deploy manual rawan dilupakan dan tidak konsisten. Dengan pipeline, setiap perubahan ke branch main melewati gerbang yang sama: dependency terpasang bersih, build hijau, lalu deploy. Ini alur yang dipakai repositori kalian sendiri di GitHub Actions.

#Environment Variables dan Konfigurasi Build-Time

#Prefix VITE di Vite

Variabel yang diakses kode React harus diawali VITE_ agar diekspos Vite ke kode. Variabel lain hanya tersedia di sisi build tooling. Contoh file .env:

VITE_API_URL=https://api.example.com/v1
VITE_APP_NAME=BelajarReact

Di kode, nilai dibaca lewat import.meta.env:

Membaca env di kode

const apiUrl = import.meta.env.VITE_API_URL

import.meta.env.VITE_API_URL di-replace Vite saat build dengan nilai dari environment. Penting: nilai ini tertanam di bundle, jadi jangan pernah menaruh rahasia seperti API key di sini — gunakan secret di sisi server.

#Konfigurasi Build-Time

Karena env dibaca saat build, nilai yang berbeda berarti build yang berbeda. Untuk staging dan production, sediakan file .env.staging dan .env.production, lalu tentukan mode saat build:

npm run build -- --mode staging

--mode staging memuat .env.staging dan menggantikan mode default production. Pola ini memastikan URL API berbeda antara staging dan production tanpa mengubah kode.

#Penutup

Episode 20 menutup celah antara kode dan dunia: memahami hasil build, memilih hosting yang tepat, membangun pipeline CI/CD yang otomatis, serta mengelola environment variables dengan aman sesuai konteks build.

Inti yang harus dibawa pulang:

• Build React menghasilkan folder statis dist yang siap dilayani di mana saja.
• SPA melayani satu HTML; SSG merender HTML penuh saat build.
• Vercel dan Netlify cepat untuk frontend; AWS dan Firebase untuk kebutuhan spesifik.
• CI/CD menjalankan build, test, dan deploy otomatis setiap push.
• Environment variables React memakai prefix VITE_ dan terbaca lewat import.meta.env.
• Jangan menaruh rahasia di bundle frontend; env dibaca saat build.

Di episode 21 selanjutnya kita akan membahas server-side rendering & frameworks — konsep SSR dengan Next.js, hybrid rendering dan static generation, data fetching patterns di Next.js, serta kapan memilih SSR, SSG, atau SPA. Aplikasi kalian akan mulai dirender di sisi server.