|
| 1 | +# Cloudflare Pages - Quick Start Guide |
| 2 | + |
| 3 | +ยังไม่เจออะไรที่ยุ่งซับซ้อนเหลือ - ขั้นตอนง่ายๆ เพียง 5 ขั้น! |
| 4 | + |
| 5 | +## ✅ สิ่งที่คุณต้องเตรียม |
| 6 | + |
| 7 | +1. **GitHub Account** - มีการ push code เรียบร้อย |
| 8 | +2. **Cloudflare Account** - ฟรีก็ได้ |
| 9 | +3. **Firebase Credentials** - จาก Firebase Console |
| 10 | + |
| 11 | +## 🚀 ขั้นตอน 5 ขั้น (ง่ายๆ) |
| 12 | + |
| 13 | +### ขั้นที่ 1: ไปที่ Cloudflare Pages |
| 14 | +``` |
| 15 | +https://pages.cloudflare.com |
| 16 | +``` |
| 17 | + |
| 18 | +### ขั้นที่ 2: สร้างโปรเจกต์ใหม่ |
| 19 | +- คลิก **"Create a project"** |
| 20 | +- เลือก **"Connect to Git"** |
| 21 | +- ตรวจสอบ Cloudflare เข้าถึง GitHub ได้ |
| 22 | +- เลือก repository **ThaiSim2026** |
| 23 | + |
| 24 | +### ขั้นที่ 3: ตั้งค่า Build |
| 25 | +``` |
| 26 | +Build command: npm run build |
| 27 | +Build output directory: dist |
| 28 | +Branch: master |
| 29 | +``` |
| 30 | +ตั้งค่าเสร็จ → คลิก **"Save and Deploy"** |
| 31 | + |
| 32 | +### ขั้นที่ 4: ตั้งค่า Environment Variables ⭐ สำคัญมาก! |
| 33 | +1. ไปที่ **Settings** → **Environment variables** |
| 34 | +2. คลิก **"Add variable"** และเพิ่ม 7 ตัวนี้: |
| 35 | + |
| 36 | +``` |
| 37 | +VITE_FIREBASE_API_KEY = [ค่าจาก Firebase] |
| 38 | +VITE_FIREBASE_AUTH_DOMAIN = [ค่าจาก Firebase] |
| 39 | +VITE_FIREBASE_PROJECT_ID = [ค่าจาก Firebase] |
| 40 | +VITE_FIREBASE_STORAGE_BUCKET = [ค่าจาก Firebase] |
| 41 | +VITE_FIREBASE_MESSAGING_SENDER_ID = [ค่าจาก Firebase] |
| 42 | +VITE_FIREBASE_APP_ID = [ค่าจาก Firebase] |
| 43 | +VITE_FIREBASE_MEASUREMENT_ID = [ค่าจาก Firebase] |
| 44 | +``` |
| 45 | + |
| 46 | +3. Set for: **Production** (และ Staging ถ้าอยากได้) |
| 47 | +4. คลิก **"Save"** และรอให้ redeploy อัตโนมัติ |
| 48 | + |
| 49 | +### ขั้นที่ 5: เสร็จ! |
| 50 | +รอสักครู่ แล้วคุณจะได้ URL: |
| 51 | +``` |
| 52 | +https://thaisim2569.pages.dev |
| 53 | +``` |
| 54 | +(หรือชื่อโปรเจกต์ของคุณแทน thaisim2569) |
| 55 | + |
| 56 | +## 🔑 จะเอา Firebase Credentials มาจากไหน? |
| 57 | + |
| 58 | +1. ไป Firebase Console |
| 59 | +2. เลือก Project ของคุณ |
| 60 | +3. คลิกไปที่ **⚙️ Project Settings** |
| 61 | +4. ด้านล่าง **"Your apps"** → เลือก Web app |
| 62 | +5. คุณจะเห็น object ที่เหมือนนี้: |
| 63 | + |
| 64 | +```javascript |
| 65 | +const firebaseConfig = { |
| 66 | + apiKey: "AIzaSy...", |
| 67 | + authDomain: "yourproject.firebaseapp.com", |
| 68 | + projectId: "yourproject", |
| 69 | + storageBucket: "yourproject.firebasestorage.app", |
| 70 | + messagingSenderId: "123456789", |
| 71 | + appId: "1:123456789:web:abc123...", |
| 72 | + measurementId: "G-ABC123..." |
| 73 | +}; |
| 74 | +``` |
| 75 | + |
| 76 | +**ทำการ Map** ดังนี้: |
| 77 | +- `apiKey` → `VITE_FIREBASE_API_KEY` |
| 78 | +- `authDomain` → `VITE_FIREBASE_AUTH_DOMAIN` |
| 79 | +- `projectId` → `VITE_FIREBASE_PROJECT_ID` |
| 80 | +- `storageBucket` → `VITE_FIREBASE_STORAGE_BUCKET` |
| 81 | +- `messagingSenderId` → `VITE_FIREBASE_MESSAGING_SENDER_ID` |
| 82 | +- `appId` → `VITE_FIREBASE_APP_ID` |
| 83 | +- `measurementId` → `VITE_FIREBASE_MEASUREMENT_ID` |
| 84 | + |
| 85 | +## 🎯 หลังจากตั้งค่าเสร็จ |
| 86 | + |
| 87 | +✅ ทุกครั้งที่ push code ไป `master` branch บน GitHub |
| 88 | +✅ Cloudflare จะ build และ deploy อัตโนมัติ |
| 89 | +✅ ดูเวอร์ชันล่าสุดได้ที่ Deployments tab |
| 90 | + |
| 91 | +## ❓ ปัญหาเบื้องต้น |
| 92 | + |
| 93 | +### "Build Failed" |
| 94 | +- ✅ ตรวจสอบให้แน่ใจว่า env variables ตั้งค่าถูก |
| 95 | +- ✅ รอ 1-2 นาที แล้ว Retry deployment |
| 96 | + |
| 97 | +### "Firebase Not Working" |
| 98 | +- ✅ ตรวจสอบ env variables ตั้งค่าถูก (case-sensitive!) |
| 99 | +- ✅ ไปที่ browser DevTools (F12) → Console เพื่อดู error |
| 100 | +- ✅ ตรวจสอบ Firebase Security Rules อนุญาต reads/writes |
| 101 | + |
| 102 | +### "SPA Routes ไม่เวิร์ก" |
| 103 | +- ✅ ไฟล์ `_redirects` ต้องอยู่ใน folder `dist/` |
| 104 | +- ✅ เช็คว่า build ไปเสร็จแล้ว |
| 105 | + |
| 106 | +## 📚 ข้อมูลเพิ่มเติม |
| 107 | + |
| 108 | +- 📖 [CLOUDFLARE_DEPLOYMENT.md](./CLOUDFLARE_DEPLOYMENT.md) - คู่มายละเอียด |
| 109 | +- 🔗 [Cloudflare Pages Docs](https://developers.cloudflare.com/pages/) |
| 110 | +- 🔥 [Firebase Setup](https://firebase.google.com/docs/web/setup) |
| 111 | + |
| 112 | +--- |
| 113 | + |
| 114 | +**ติดปัญหา?** ดูคู่มือเต็มใน [CLOUDFLARE_DEPLOYMENT.md](./CLOUDFLARE_DEPLOYMENT.md) |
| 115 | + |
| 116 | +**มีข้อสงสัย?** เปิด issue ใน GitHub repo 🎉 |
0 commit comments