Modul Pelajar โ€” Fasa 8

Production & Deployment

Tahniah! Anda telah sampai ke fasa terakhir!

Fasa ini adalah kemuncak segalanya. Projek anda akan dideploy secara LIVE ke internet โ€” boleh diakses oleh sesiapa sahaja di seluruh dunia. Selamat datang ke hari graduasi anda!

๐ŸŽฏ

Apa Itu Deployment?

Dari komputer anda ke internet sebenar

Selama 7 fasa lepas, anda telah membina projek di komputer sendiri. Sekarang tiba masanya untuk deployment โ€” proses memindahkan projek anda ke pelayan awan supaya ia boleh diakses oleh sesiapa sahaja di internet.

Bayangkan deployment seperti:

  • Kod anda selama ini adalah "pelan rumah" โ€” deployment adalah bina rumah itu di tanah sebenar
  • Localhost adalah pentas latihan โ€” deployment adalah persembahan sebenar
  • Sesiapa dengan URL boleh akses projek anda โ€” bukan hanya anda
Ingat: URL yang akan anda dapat hari ini adalah alamat digital pertama anda. Kongsikan dengan bangga!
๐Ÿ“‹

Pilihan Deployment

Dua cara untuk deploy projek anda

โ˜๏ธ

Cloudflare Pages

Hosting static site percuma, pantas, dan mudah. Website dan app frontend. Dengan CI/CD auto dari GitHub.

Sesuai untuk: Static sites, SPAs, Landing pages
๐Ÿ“ฆ

Codex (Claude Code)

Deploy terus dari Claude Code menggunakan AI. Codex boleh bantu deploy dengan arahan ringkas.

Sesuai untuk: Deploy pantas, prototaip, demo

Kenapa Cloudflare Pages?

  • Percuma โ€” hosting percuma untuk laman statik
  • Pantas โ€” rangkaian CDN global, loading sepantas kilat
  • HTTPS auto โ€” SSL/TLS percuma, selamat
  • CI/CD โ€” auto-deploy setiap kali push ke GitHub
  • Mudah โ€” deploy guna Wrangler CLI dalam 1 command
โ˜๏ธ

Deploy dengan Cloudflare Pages

Langkah demi langkah

1

Install Wrangler CLI

Wrangler adalah alat CLI rasmi Cloudflare untuk deploy dan urus aplikasi.

npm install -g wrangler

Selepas install, sahkan:

wrangler --version
Tip: Jika ada error izin di Mac/Linux, guna sudo npm install -g wrangler
2

Login ke Cloudflare

Anda perlu akaun Cloudflare percuma. Daftar di cloudflare.com jika belum ada.

wrangler login

Ini akan buka browser untuk log masuk. Selepas berjaya, token akan disimpan secara lokal.

3

Build Projek Anda

Jika projek anda guna build tool (Vite, Webpack, dll.), build dulu:

npm run build

Untuk projek HTML biasa tanpa build tool, folder projek anda sudah sedia untuk deploy.

4

Deploy ke Cloudflare Pages

Sekarang, deploy projek anda:

# Untuk static site biasa npx wrangler pages deploy . --project-name=projek-pertama-saya # Jika ada build output folder (contoh: dist/) npx wrangler pages deploy dist/ --project-name=projek-pertama-saya

Tunggu beberapa saat โ€” anda akan dapat URL seperti:

https://projek-pertama-saya.pages.dev
Tip: Simpan URL ini! Kongsikan dengan keluarga dan rakan.
5

Update & Re-deploy

Bila anda buat perubahan pada projek, deploy semula:

# Build semula npm run build # Deploy semula npx wrangler pages deploy dist/ --project-name=projek-pertama-saya

Atau, sambungkan repository GitHub anda โ€” setiap push akan auto-deploy!

๐Ÿ“ฆ

Deploy dengan Codex (Claude Code)

Guna AI untuk deploy dengan pantas

๐Ÿค– Deploy Guna Claude Code

Jika anda guna Claude Code, anda boleh deploy dengan hanya bertanya:

"Deploy projek saya ke Cloudflare Pages"

Claude Code akan:

  1. Semak struktur projek anda
  2. Install Wrangler jika diperlukan
  3. Bantu login ke Cloudflare (jika belum)
  4. Jalankan command deploy yang sesuai
  5. Berikan URL live projek anda
Inilah kuasa AI! Daripada 4-5 langkah manual, AI boleh buat semuanya dengan satu arahan. Tapi penting untuk faham proses manual dulu โ€” supaya anda tahu apa yang AI buat.

๐ŸŽฎ Cara Invoke Cloudflare Skill

Dalam Claude Code, invoke skill Cloudflare:

Invoke Skill 'cloudflare:cloudflare' # Kemudian tanya: "Bantu saya deploy projek HTML ini ke Cloudflare Pages"

Ikut arahan yang diberikan โ€” Claude akan pandu anda langkah demi langkah.

๐ŸŒ

Custom Domain (Pilihan)

Guna domain sendiri untuk projek anda

Daripada URL projek-anda.pages.dev, anda boleh guna domain sendiri seperti projek-anda.com.

Langkah:

  1. Beli domain โ€” Cloudflare Registrar, Namecheap, GoDaddy (~RM20-50/tahun)
  2. Point ke Cloudflare โ€” tukar nameservers domain ke Cloudflare
  3. Setup Pages domain โ€” dalam dashboard Cloudflare Pages > Custom domains
  4. HTTPS auto โ€” Cloudflare akan provide SSL/TLS percuma
  5. Selesai! โ€” Domain anda akanๆŒ‡ๅ‘ projek dalam 5-30 minit
Kenapa guna custom domain? Nampak lebih professional, mudah diingat, dan bagus untuk portfolio dan resume.
๐Ÿ”

Environment Variables & Secrets

Jangan leak API keys!

Peraturan Paling Penting dalam Deployment

JANGAN PERNAH hardcode API keys, database credentials, atau secrets dalam kod anda! Jika anda push kod dengan API key ke GitHub, orang lain boleh gunakan key tersebut.

Cara yang Betul: Environment Variables

Guna environment variables untuk menyimpan maklumat sensitif:

// SALAH โ€” Jangan buat ini! const supabaseUrl = "https://abc123.supabase.co"; const supabaseKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."; // BETUL โ€” Guna environment variables const supabaseUrl = import.meta.env.VITE_SUPABASE_URL; const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

Langkah:

  1. Buat fail .env di root projek (TAPI jangan commit!)}
  2. Tambah .env ke .gitignore
  3. Guna import.meta.env (Vite) atau process.env (Node)
  4. Set environment variables di dashboard Cloudflare Pages

Set Environment Variables di Cloudflare

# Command line npx wrangler pages secret put VITE_SUPABASE_URL npx wrangler pages secret put VITE_SUPABASE_ANON_KEY # Atau melalui dashboard: # 1. Buka Cloudflare Dashboard # 2. Pages > projek-anda > Settings > Environment variables # 3. Tambah key-value pairs
Ingat: Environment variables hanya boleh dibaca oleh backend/API, bukan oleh kod frontend yang visible. Untuk frontend, guna key yang bersifat public (seperti anon key Supabase) dan hadkan permission RLS.
๐Ÿ“Š

Basic Monitoring

Semak logs dan fix issues

Selepas deploy, penting untuk tahu cara monitor aplikasi anda:

  • Cloudflare Dashboard โ€” lihat analytics, traffic, errors
  • Pages Logs โ€” semak build logs untuk debug
  • Browser Console โ€” buka projek dan semak console (F12)
  • Network Tab โ€” lihat request yang gagal
  • Supabase Logs โ€” jika guna Supabase, semak logs di dashboard
Tip Debug: Jika projek tak jalan selepas deploy, langkah pertama: buka browser Console (F12) dan lihat apa error-nya. 90% masalah boleh dikesan dari sini.
๐Ÿ†

Apa Yang Anda Capai?

Renungkan perjalanan anda

๐ŸŽ‰

Anda Bukan Lagi Orang Biasa โ€” Anda Seorang Developer!

Hari ini, anda telah:

  • Membina projek web dari mula hingga siap
  • Mempelajariๅฆ‚ไฝ•ไฝฟ็”จ AI tools (Claude Code)
  • Menguasai asas deployment dan hosting
  • Mendeploy projek ke internet โ€” LIVE!
  • Mendapat URL pertama anda di internet
Ini baru permulaan. Dunia pembangunan web terbuka luas untuk anda. Teruskan belajar, teruskan membina!