Daftar Isi Utama

• Lihat indeks lengkap di [01. Pengenalan]

Panduan ini untuk siapa

• Pembelajar yang siap memindahkan project dari lokal ke deployment publik
• Pemula yang ingin kebiasaan rilis lebih aman dan rapi
• Siapa pun yang pernah deploy lalu bingung kenapa masalahnya muncul hanya di production

Apa yang akan Anda pelajari

• Perbedaan praktis mode development vs production build
• Strategi environment variable dan manajemen secret yang aman
• Alur deployment dasar frontend dan backend yang realistis untuk pemula

Mengapa topik ini penting

Deployment adalah momen saat project belajar berubah jadi produk nyata yang dipakai orang.

Kebiasaan production yang baik membantu Anda menghindari masalah mahal: rilis gagal, API salah konfigurasi, atau secret yang bocor.

Konsep inti

Build pipeline

• Mengubah source code agar optimal di production
• Menggunakan konfigurasi sesuai environment

Build production harus konsisten dan bisa diulang dengan hasil yang sama.

Secrets dan environment variables

• Simpan secret di luar source code
• Sediakan .env.example untuk dokumentasi

Perlakukan secret sebagai data operasional sensitif, bukan bagian dari source code.

Opsi hosting

• Frontend: Vercel/Netlify
• Backend: Render/Railway

Pilih platform yang memudahkan deploy dan observability sesuai tahap project Anda.

Panduan langkah demi langkah

Langkah 1 — Siapkan script build

Pastikan app build sukses dan gagal dengan jelas saat env var penting belum diset.

Langkah 2 — Konfigurasi environment variables

Definisikan env vars untuk development, staging (opsional), dan production.

Langkah 3 — Deploy dan verifikasi

Deploy frontend dan backend, lalu jalankan smoke test untuk alur user utama.

Target: setiap rilis terasa prediktif, bukan bikin deg-degan.

Contoh praktis

Contoh 1 — Pemakaian environment variable

const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;

Tip:

• Validasi nilai ini saat startup aplikasi dan tampilkan error yang jelas jika kosong.

Contoh 2 — Checklist deployment

• Build sukses
• Env vars terpasang benar
• Health route merespons

Tambahan penting:

• Frontend menunjuk ke backend URL yang benar,
• satu flow fitur utama lolos end-to-end.

Kesalahan umum dan cara menghindarinya

• File .env ikut ter-commit -> gunakan .gitignore dan rawat .env.example
• URL production di-hardcode -> selalu pakai environment variables
• Verifikasi pasca-deploy dilewati -> jalankan smoke test setiap rilis
• Tidak punya rencana rollback -> dokumentasikan rollback sederhana

Mini Project

• Deploy frontend + API lalu validasi:
• satu alur user lengkap,
• satu alur error (misalnya API gagal),
• satu health/monitoring check.

Bonus:

• Tulis file checklist rilis singkat untuk deployment berikutnya.

Latihan cepat

• Buat .env.example dengan seluruh key yang dibutuhkan
• Verifikasi runtime memakai API URL production
• Jalankan satu smoke test setelah deploy
• Tambahkan satu bagian “deployment notes” di README project

Ringkasan utama

• Kemampuan deploy ke production adalah skill engineering inti
• Hygiene environment variable wajib untuk keamanan dan reliabilitas
• Verifikasi pasca-deploy harus cepat, repeatable, dan wajib dijalankan

Langkah berikutnya

Lanjut ke [19. Sumber Belajar dan Langkah Berikutnya].