Fasa 8 — Modul Pelajar

Deployment & Production

Pelajari cara menyiarkan aplikasi web anda ke Internet menggunakan pelbagai platform percuma.

🌍 Apa Itu Deployment?

Bayangkan awak dah siapkan lukisan yang cantik di atas kertas. Sekarang nak tunjuk kat semua orang. Tapi lukisan tu ada dalam bilik awak — hanya awak yang nampak.

Deployment adalah proses "memindahkan" lukisan tu dari bilik awak ke galeri pameran yang boleh dikunjungi semua orang. Dalam dunia web, deployment bermaksud:

💻

Dari Komputer Awak (Localhost)

Kod dan fail HTML/CSS/JS awak sekarang ada dalam komputer/laptop sendiri. Hanya awak boleh akses melalui localhost.

☁️

Ke Server Internet (Production)

Kod awak disalin ke komputer istimewa yang dipanggil server. Server ini sentiasa hidup dan bersambung ke internet 24/7.

🌐

Boleh Diakses Semua Orang

Sesiapa sahaja di dunia boleh buka pelayar web, taip URL awak (contoh: projek-saya.pages.dev), dan nampak hasil kerja awak.

Ingat: "Deploy" = "hantar ke internet". "Production" = "versi live yang orang lain boleh guna".

📦 Jenis Deployment

Jenis Penerangan Contoh Sesuai Untuk
Static Site HTML + CSS + JavaScript tulen. Tiada server backend. Landing page, portfolio, blog ringkas Beginner — paling mudah
Dynamic / Serverful Ada backend (Node.js, Python, etc.) dan database. Dashboard, e-commerce, social app Intermediate — Advanced
Jamstack / Edge Static frontend + serverless functions di edge. Modern web apps, API endpoints Intermediate — Advanced

☁️ Deploy ke Cloudflare Pages

Cloudflare Pages adalah platform deployment paling mudah dan paling sesuai untuk beginner. Free tier-nya sangat generous: unlimited site, 500 builds sebulan, dan bandwidth tak terhad.

Kelebihan Cloudflare Pages: Build paling pantas, UI paling clean, SSL automatik, dan integration dengan GitHub yang seamless. Paling penting — free selama-lamanya untuk kegunaan biasa.

Langkah Demi Langkah

1 Buka Cloudflare Dashboard
  1. Buka https://dash.cloudflare.com
  2. Daftar akaun (guna Google login)
  3. Di menu kiri, pilih Workers & Pages
  4. Klik Create application → Pages
2 Sambung ke GitHub
  1. Klik Connect to Git
  2. Kali pertama: authorize Cloudflare akses GitHub
  3. Cari repository projek landing page / portfolio awak
  4. Klik Begin setup
3 Konfigurasi Build
Project name: projek-anda Production branch: main Framework preset: None Build command: (kosongkan) Build output directory: / Root directory: (kosongkan)
  1. Isi nama projek (contoh: landing-page-ali)
  2. Pastikan Production branch adalah main
  3. Untuk HTML tulen, Build command dikosongkan
  4. Set Build output directory ke /
  5. Klik Save and Deploy
4 Tunggu & Lihat Hasil
  1. Cloudflare akan clone repo dan deploy
  2. Build akan siap dalam 10-30 saat
  3. URL: https://projek-anda.pages.dev
  4. Klik URL untuk buka projek awak — dah live di internet!
5 Update Selepas Deploy
  1. Ubah kod awak di komputer
  2. Git add, commit, dan push ke GitHub
  3. Cloudflare auto-deploy — dalam 30 saat, perubahan akan live!
  4. Ini dipanggil Continuous Deployment

🔷 Deploy ke Netlify (Alternatif)

Netlify adalah platform deployment yang sangat popular dan mature. Ia offer free tier 100GB bandwidth dan 300 minit build sebulan.

Langkah Demi Langkah

1 Buka Netlify
  1. Buka https://app.netlify.com
  2. Login dengan GitHub
  3. Klik Add new site → Import an existing project
2 Deploy dari GitHub
  1. Pilih Deploy with GitHub
  2. Authorize Netlify jika perlu
  3. Cari dan pilih repository awak
  4. Klik Deploy site
3 URL & Nama
  1. URL akan diberi rawak: https://random-name.netlify.app
  2. Awak boleh ubah nama: pergi ke Site settings → Site details → Change site name
  3. Contoh: https://portfolio-anda.netlify.app

Tip: Netlify ada feature Deploy Preview — setiap pull request di GitHub akan dapat URL preview sementara. Berguna untuk semak perubahan sebelum merge.

🐙 Deploy ke GitHub Pages (Termudah)

GitHub Pages adalah cara paling ringkas untuk deploy. Kebaikannya — semua pelajar dah ada akaun GitHub, zero setup diperlukan.

Syarat: Repository mestilah public (untuk free tier). GitHub Pages free untuk unlimited static sites.

1 Pergi ke Repository Settings
  1. Buka repository GitHub projek awak
  2. Klik tab Settings
  3. Di sidebar kiri, klik Pages
2 Konfigurasi GitHub Pages
Source: Deploy from a branch Branch: main Directory: / (root) Klik "Save"
  1. Set Source ke Deploy from a branch
  2. Pilih main branch
  3. Pilih folder / (root)
  4. Klik Save
3 Akses URL
  1. GitHub akan deploy dalam 1-2 minit
  2. URL: https://[username].github.io/[repo-name]/
  3. Contoh: https://ali.github.io/landing-page/
  4. Refresh halaman Settings → Pages untuk lihat URL

Limitasi GitHub Pages: Hanya untuk static content. Tak support server-side processing (PHP, Node.js, Python). Untuk frontend framework (React, Vue), kena set build output dengan betul.

🌐 Custom Domain

Platform deployment bagi URL percuma (macam .pages.dev, .netlify.app). Tapi untuk kelihatan lebih profesional, awak boleh guna domain sendiri.

Macam mana nak dapat domain?

  • Beli dari registrar: Namecheap, GoDaddy, Cloudflare Registrar
  • Harga: RM15-RM100/tahun (bergantung pada ekstensi: .com, .my, .xyz)
  • Domain murah: .xyz, .shop, .online — boleh dapat bawah RM10/tahun

Cara Setup Custom Domain (Cloudflare Pages)

1 Tambah Domain di Cloudflare
  1. Pergi ke projek Pages awak di dashboard
  2. Klik Custom domains
  3. Klik Set up a custom domain
  4. Taip domain awak (contoh: portfolioku.com)
2 Update DNS Record
  1. Cloudflare akan tunjuk DNS record yang perlu ditambah
  2. Biasanya CNAME record: @ → projek-anda.pages.dev
  3. Tambahkan record ini di DNS provider awak
  4. Atau kalau domain guna Cloudflare: auto-detect

DNS Propagation: Selepas update DNS, tunggu 5 minit hingga 48 jam untuk perubahan berkuat kuasa di seluruh dunia. Guna whatsmydns.net untuk semak status.

🔒 HTTPS — Kenapa Automatik?

Pernah nampak 🔒 di sebelah URL pelayar web? Itu tanda HTTPS (HyperText Transfer Protocol Secure) — sambungan selamat antara browser dan server.

📨

HTTP (tanpa S) = Pos Biasa

Data dihantar dalam teks kosong. Kalau orang jahat intercept, dia boleh baca semua data. Macam poskad — semua orang nampak isinya.

📬

HTTPS (dengan S) = Surat Bertutup

Data dihantar dalam keadaan dienkripsi. Walaupun orang jahat intercept, dia tak boleh baca. Macam surat dalam sampul surat bertutup.

Kenapa "Auto"?

Dulu, nak setup HTTPS kena:

  • Beli SSL certificate (dulu beratus ringgit setahun)
  • Install dan konfigurasi manually
  • Renew setiap tahun — kalau lupa, site jadi "Not Secure"

Sekarang, platform deployment moden (Cloudflare, Netlify, Vercel, GitHub Pages) sediakan HTTPS secara automatik dan percuma. Tak perlu buat apa-apa — SSL cert auto-dihasilkan, auto-renew, dan auto-dipasang.

Kelebihan HTTPS: (1) Data selamat dari eavesdropping, (2) Ranking lebih baik dalam Google Search, (3) Dipercayai pengguna (nampak ikon 🔒), (4) Diperlukan untuk banyak feature web moden (Service Workers, Geolocation API).

🔐 Environment Variables & Secrets

Bayangkan awak nak guna API key (kata laluan untuk perkhidmatan luar) dalam kod awak. Tapi API key tak boleh letak terus dalam kod — sebab nanti orang lain nampak masa tengok GitHub.

Environment Variables (Env Vars) adalah tempat simpan "rahsia" secara selamat:

  • API key, database URL, secret tokens
  • Disimpan di platform deployment, bukan dalam kod
  • Kod guna process.env.VARIABLE_NAME untuk baca nilai
  • Tak akan terbocor ke GitHub

Cara Set Env Vars di Cloudflare Pages

Dashboard → Workers & Pages → Pilih projek → Settings → Environment variables → Add variable Name: API_KEY Value: sk-abc123... → Save

Peringatan: Jangan simpan password, API key, atau secret dalam kod JavaScript di frontend. Sesiapa yang inspect page boleh nampak. Guna backend/serverless functions untuk uruskan rahsia.

Perbezaan: Build-time vs Runtime

Jenis Bila Diguna Contoh
Build-time Semasa build (masa generate static files) API URL untuk prerender content
Runtime Semasa run (masa user akses site) API key untuk serverless functions

⚙️ Build Settings Asas

Untuk projek HTML/CSS/JS tulen — tiada build step diperlukan. Tapi kalau guna framework macam React, Vue, atau Next.js, kena set build settings dengan betul.

Build Settings untuk Framework Popular

Framework Build Command Output Directory
HTML Tulen(kosong)/
React (Vite)npm run builddist
Next.jsnpm run buildout (static) / .next
Vue (Vite)npm run builddist
SvelteKitnpm run buildbuild
Astronpm run builddist
Hugohugopublic
Jekylljekyll build_site

Tip: Kalau tak pasti apa build settings untuk projek awak, tanya AI: "Apa build command dan output directory untuk [framework] di [platform]?". AI akan bagi jawapan tepat.

Node Version

Kebanyakan platform guna Node.js version default (biasanya v18 atau v20). Kalau projek perlukan version spesifik, set dalam .nvmrc atau package.json ("engines" field).

# .nvmrc v18.17.0

📝 Ringkasan

Apa yang awak dah belajar dalam modul ini:

  • Deployment = proses siarkan kod ke internet
  • Cloudflare Pages — platform utama, paling mudah, free tier paling power
  • Netlify — alternatif popular, feature-rich
  • GitHub Pages — cara paling ringkas jika dah guna GitHub
  • Custom domain — guna nama domain sendiri untuk tampil profesional
  • HTTPS — selamat, automatik, dan percuma
  • Environment variables — simpan rahsia (API key) secara selamat
  • Build settings — konfigurasi untuk framework berbeza