Skip to content

Commit 5dddd15

Browse files
bejranondaclaude
andcommitted
docs: Add Thai quick start guide for Cloudflare Pages
- 5-step quick start guide in Thai language - Step-by-step instructions with examples - Firebase credentials mapping guide - Troubleshooting tips - Links to detailed documentation - Easy to follow for Thai developers Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
1 parent 72bf66b commit 5dddd15

1 file changed

Lines changed: 116 additions & 0 deletions

File tree

CLOUDFLARE_QUICK_START.md

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
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

Comments
 (0)