Latihan Amali

Latihan Deployment

Empat latihan praktikal untuk menguasai deployment. Klik setiap latihan untuk melihat langkah terperinci.

4
Latihan
3
Platform Berbeza
45-60
Minit
Beginner
Tahap
1
Deploy Landing Page ke Cloudflare Pages Mudah
⏱ 15-20 minit ☁️ Cloudflare Pages 📄 Landing page HTML
▼

🎯 Objektif

Objektif: Deploy landing page HTML (dari Fasa 3) ke Cloudflare Pages. Pelajar akan belajar sambung GitHub repository, konfigurasi build settings, dan dapatkan URL production.

📋 Prasyarat

  • Projek landing page HTML (dari Fasa 3) yang sudah di-push ke GitHub
  • Akaun Cloudflare (daftar di dash.cloudflare.com)
  • Akaun GitHub yang aktif

🔧 Langkah-langkah

  1. Buka https://dash.cloudflare.com dan login
  2. Di sidebar kiri, klik Workers & Pages
  3. Klik Create application → pilih Pages
  4. Klik Connect to Git — authorize Cloudflare jika perlu
  5. Cari dan pilih repository landing page awak
  6. Klik Begin setup
  7. Isi borang konfigurasi:
    Project name: landing-page-[nama] Production branch: main Build command: (kosongkan) Build output directory: / Root directory: (kosongkan)
  8. Klik Save and Deploy
  9. Tunggu build selesai (10-30 saat)
  10. Klik URL yang diberi — landing page awak sudah live!
  11. Kongsi URL dengan rakan sekelas/pengajar

💡 Tips

Continuous Deployment: Cuba ubah warna latar landing page, Git push, dan lihat Cloudflare auto-deploy dalam beberapa saat. Inilah kuasa CI/CD!

📸 Bukti Screenshot

📸

Screenshot landing page yang berjaya di-deploy

Ambil screenshot yang menunjukkan URL (contoh: landing-page-nama.pages.dev) di pelayar web, dengan halaman landing page awak kelihatan.

✅ Checklist

2
Deploy Portfolio ke Netlify Mudah
⏱ 15-20 minit 🔷 Netlify 📄 Portfolio HTML
▼

🎯 Objektif

Objektif: Deploy portfolio peribadi ke Netlify. Pelajar akan belajar menggunakan alternative platform deployment dan mengubah nama subdomain Netlify.

📋 Prasyarat

  • Projek portfolio (dari Fasa 5) di GitHub
  • Akaun Netlify (daftar di app.netlify.com — guna GitHub login)

🔧 Langkah-langkah

  1. Buka https://app.netlify.com dan login dengan GitHub
  2. Klik Add new site → Import an existing project
  3. Pilih Deploy with GitHub
  4. Authorize Netlify untuk akses GitHub (jika pertama kali)
  5. Cari dan pilih repository portfolio awak
  6. Biarkan build settings default (Netlify auto-detect)
  7. Klik Deploy site
  8. Tunggu build selesai (~1 minit)
  9. URL akan diberi rawak — ubah nama site:
    Site settings → Site details → Change site name Taip: portfolio-[nama] URL baru: https://portfolio-nama.netlify.app
  10. Klik URL untuk sahkan portfolio sudah live

💡 Tips

Netlify Forms: Cuba tambah borang HTML ke portfolio (<form netlify>). Netlify akan detect dan kendalikan form submission tanpa backend. Ajaib!

⚠️ Perhatian

Build minutes: Netlify free tier ada 300 minit build sebulan. Jangan trigger build berkali-kali untuk perubahan kecil. Kumpul dulu perubahan, baru push sekali. Gunakan [skip ci] dalam commit message untuk elakkan auto-build.

📸 Bukti Screenshot

📸

Screenshot portfolio yang berjaya di-deploy

Ambil screenshot yang menunjukkan URL portfolio-nama.netlify.app di pelayar web dengan halaman portfolio dipaparkan. Juga screenshot dashboard Netlify yang menunjukkan site status "Published".

✅ Checklist

3
Deploy ke GitHub Pages (gh-pages branch) Mudah
⏱ 10-15 minit 🐙 GitHub Pages 📄 Mana-mana HTML
▼

🎯 Objektif

Objektif: Deploy projek HTML ke GitHub Pages menggunakan dua kaedah: (1) dari branch main, (2) guna GitHub Actions dan gh-pages branch. Pelajar akan faham perbezaan antara deploy dari source branch dan deploy melalui CI/CD.

📋 Prasyarat

  • Akaun GitHub dan repository dengan fail HTML
  • Git diinstal di komputer

🔧 Langkah-langkah

Kaedah A: Deploy dari main branch (termudah)

  1. Buka repository GitHub projek awak
  2. Klik tab Settings
  3. Di sidebar kiri, klik Pages
  4. Set Source ke Deploy from a branch
  5. Pilih branch: main, folder: / (root)
  6. Klik Save
  7. Tunggu 1-2 minit untuk deploy pertama

Kaedah B: Deploy guna GitHub Actions (gh-pages branch)

  1. Di repository, pergi ke Settings → Pages
  2. Set Source ke GitHub Actions
  3. Pergi ke Actions tab → New workflow
  4. Cari workflow "Static HTML" atau buat workflow baru:
    name: Deploy to GitHub Pages on: push: branches: ["main"] permissions: contents: read pages: write id-token: write jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/upload-pages-artifact@v3 with: path: '.' - uses: actions/deploy-pages@v4
  5. Commit workflow ke repository
  6. Pergi ke tab Actions untuk lihat workflow running

💡 Tips

gh-pages branch: GitHub Actions akan deploy ke branch gh-pages secara automatik. Branch ini mengandungi fail yang siap untuk di-deploy. Jangan edit branch ini secara manual.

📸 Bukti Screenshot

📸

Screenshot projek yang berjaya di-deploy ke GitHub Pages

Ambil screenshot halaman GitHub Settings → Pages yang menunjukkan URL projek awak (contoh: username.github.io/repo-name/). Juga screenshot projek yang dipaparkan di pelayar web.

✅ Checklist

4
Setup Custom Domain + HTTPS Sederhana
⏱ 20-30 minit ☁️ Cloudflare / Netlify 🌐 Domain + SSL
▼

🎯 Objektif

Objektif: Setup custom domain (domain sendiri) untuk projek yang telah dideploy, dan sahkan HTTPS berfungsi secara automatik. Latihan ini membolehkan pelajar memahami asas DNS, CNAME records, dan SSL/TLS certificates.

Nota: Latihan ini memerlukan domain sendiri. Jika tiada, gunakan domain percuma seperti .freeservers.com atau beli domain murah (.xyz sekitar RM5-10/tahun). Alternatif: gunakan subdomain dari platform deployment.

📋 Prasyarat

  • Projek yang sudah dideploy di Cloudflare Pages atau Netlify (dari Latihan 1 atau 2)
  • Domain sendiri (jika ada) — dibeli dari Namecheap, GoDaddy, atau Cloudflare Registrar
  • Akses ke DNS panel domain awak

🔧 Langkah-langkah

Untuk Cloudflare Pages (dengan domain di Cloudflare):

  1. Pergi ke dashboard Cloudflare
  2. Klik Workers & Pages → pilih projek awak
  3. Klik tab Custom domains
  4. Klik Set up a custom domain
  5. Taip domain awak (contoh: portfolioku.com)
  6. Cloudflare akan auto-configure DNS records
  7. Tunggu DNS propagation (5-15 minit)
  8. Cloudflare akan auto-issue SSL certificate

Untuk Netlify (dengan domain dari registrar lain):

  1. Pergi ke dashboard Netlify → pilih site awak
  2. Klik Domain settings
  3. Klik Add custom domain
  4. Taip domain awak
  5. Netlify akan tunjuk DNS records yang perlu ditambah
  6. Buka panel DNS registrar awak (Namecheap/GoDaddy/dll.)
  7. Tambah CNAME record:
    Type: CNAME Name: @ (atau www) Target: portfolio-nama.netlify.app TTL: 3600 (default)
  8. Pergi balik Netlify, klik Verify DNS configuration
  9. Netlify akan auto-provide SSL certificate (HTTPS)

🔍 Langkah Verifikasi

  1. Buka domain awak di pelayar web — pastikan site muncul
  2. Klik ikon 🔒 di address bar — pastikan "Connection is secure"
  3. Buka https://www.ssllabs.com/ssltest/ dan test domain awak — dapatkan grade A atau A+
  4. Cuba akses http:// (tanpa S) — pastikan auto-redirect ke https://

💡 Tips

DNS Propagation Checker: Guna https://whatsmydns.net untuk semak sama ada DNS records sudah propagate ke seluruh dunia. Masukkan domain awak dan pilih record type (CNAME atau A).

Peringatan: DNS propagation boleh ambil masa 5 minit hingga 48 jam. Jangan panik jika site tak muncul serta-merta. Guna whatsmydns.net untuk semak status propagation. Cuba flush DNS: ipconfig /flushdns (Windows) atau sudo dscacheutil -flushcache (Mac).

📸 Bukti Screenshot

📸

Screenshot domain dengan HTTPS berfungsi

Ambil screenshot yang menunjukkan: (1) domain awak di address bar, (2) ikon 🔒 hijau di sebelah URL, (3) halaman web dipaparkan dengan betul. Screenshot kedua: hasil dari whatsmydns.net yang menunjukkan DNS sudah propagate.

✅ Checklist

🏁 Rumusan Latihan

Tahniah! Selepas menyelesaikan keempat-empat latihan ini, anda akan:

  • Mampu deploy ke 3 platform berbeza (Cloudflare Pages, Netlify, GitHub Pages)
  • Memahami build settings dan output directory
  • Boleh setup custom domain dengan DNS dan SSL
  • Faham konsep Continuous Deployment (auto-deploy dari Git push)
  • Tahu cara debug isu deployment biasa

Langkah seterusnya: Cuba deploy projek full-stack (dengan backend) ke Railway atau Render!