การใช้งาน GitHub Codespaces

GitHub Codespaces เป็นวิธีที่ง่ายที่สุดในการเริ่มต้นใช้งาน Vibe Coding Boilerplate ไม่ต้องติดตั้งอะไรบนเครื่องของคุณเลย ทุกอย่างทำงานบน cloud ผ่าน browser

Codespaces คืออะไร?

GitHub Codespaces คือ development environment บน cloud ที่ GitHub จัดเตรียมไว้ให้ คุณสามารถเขียนโค้ด, รันคำสั่ง, และทดสอบแอปพลิเคชันได้ทั้งหมดผ่าน browser โดยไม่ต้องติดตั้ง Node.js, Git หรือเครื่องมืออื่นๆ บนเครื่องของคุณ

ข้อดีของ Codespaces:

• ✅ ไม่ต้องติดตั้งอะไรบนเครื่อง
• ✅ environment เหมือนกันทุกครั้ง ไม่มีปัญหา “works on my machine”
• ✅ มี free tier สำหรับใช้งาน (ประมาณ​60 ชั่วโมง/เดือน สำหรับ free account)

ขั้นตอนการเปิด Codespaces

ขั้นตอนที่ 1: เข้าสู่หน้า Repository

เปิด repository ของ Vibe Coding Boilerplate บน GitHub ของตัวเอง แล้วมองหาปุ่ม “Code” สีเขียวที่มุมขวาบน

ขั้นตอนที่ 2: เลือก Codespaces Tab

คลิกที่ปุ่ม “Code” จะมี dropdown ปรากฏขึ้น ให้เลือก tab “Codespaces” (หมายเลข 1) แล้วคลิกปุ่ม “Create codespace on main” (หมายเลข 2)

ขั้นตอนที่ 3: รอ Container Build

หลังจากคลิก Create codespace ระบบจะเริ่มสร้าง development environment ให้คุณ ขั้นตอนนี้ใช้เวลาประมาณ 1-2 นาที คุณจะเห็นข้อความ “Setting up remote connection: Starting codespace…” ที่ด้านล่าง

ขั้นตอนที่ 4: รู้จัก Interface ของ Codespaces

เมื่อ Codespaces พร้อมใช้งาน คุณจะเห็น:

• Menu ทางซ้าย — เมนูหลักในโปรเจค
• Terminal ด้านล่าง — สำหรับสั่งรัน Project และรันคำสั่ง
• Editor ตรงกลาง — สำหรับแก้ไขโค้ด
• Chat with Agent ทางขวา — สำหรับสั่งงาน AI ผ่าน Chat

Run Setup Wizard

เมื่อ Terminal พร้อมแล้ว ให้รันคำสั่ง:

npm run setup

Setup Wizard จะถามข้อมูลที่จำเป็นสำหรับการตั้งค่า environment เช่น Google OAuth credentials, Database URL เป็นต้น (หลังจาก Setup แล้วการตั้งค่าเหล่านี้จะบันทึกอยู่ใน .env)

💡 สำหรับ Codespaces: Database (PostgreSQL) ถูกสร้างให้อัตโนมัติแล้วผ่าน Docker container คุณ ไม่ต้อง ตั้งค่า Supabase

สิ่งที่ต้องเตรียมก่อนรัน setup:

• การตรวจสอบ Port และ URL ที่กำลังใช้งาน
• Google OAuth credentials (ทำระบบ Authentication) — ดูวิธีตั้งค่าที่ Google Cloud OAuth
• ตั้งค่า NEXTAUTH_SECRET ด้วยตัวเอง เป็นรหัสจากการสุ่ม (HEX 32) (ไม่จำเป็น)
• Google Cloud Storage (ถ้าต้องการใช้ระบบอัพโหลดไฟล์) — ดูวิธีตั้งค่าที่ Google Cloud Storage
• ตรวจสอบ Databaseในระบบ การเปิด Database เพื่อดูข้อมูลในระบบ

💡 ไม่แน่ใจว่าแต่ละค่าคืออะไร? ดู Appendix A: คำอธิบาย Environment Variables

Run Application

หลังจากรัน npm run setup สำเร็จแล้ว ให้รัน:

npx prisma migrate dev && npx prisma db seed

npm run dev 

จากนั้น Codespaces จะแสดง popup ให้คุณเปิด browser preview เพื่อดู application ที่ทำงานอยู่ หรือดูจาก Port ที่กำลังทำงานได้เลย และ ดู Database เพื่อดูข้อมูลในระบบ

แนะนำให้หลังจาก setup ให้ลองรัน Project เพื่อ Login ทันที เพราะ User ที่ Login คนแรกในตอนเริ่มต้นจะได้สิทธิเป็น Admin

หากต้องการ Stop Project (กรณีมี Error แปลก ให้กด Command + C หรือ Control + C เพื่อ Stop Project และรันคำสั่งนี้ใหม่)

การจัดการ Codespaces

การปิด Codespaces (⚠️ สำคัญ!)

เมื่อเลิกใช้งาน ควรปิด Codespaces เสมอ เพื่อประหยัด Core hours (Quota ฟรีมีจำกัด) แม้ว่า GitHub จะมี Auto-suspend (default 30 นาที) แต่การปิดเองก็ทำให้ประหยัด

เมื่อปิดแล้ว เปิดใหม่ คุณต้อง Run Application ใหม่ โดยไม่ต้อง Setup Wizard

วิธีปิด:

1. ไปที่หน้าหลักของ Repository
2. คลิกปุ่ม Code สีเขียว
3. เลือกแท็บ Codespaces
4. คลิกปุ่ม … หลังชื่อ Codespace ของคุณ
5. เลือก Stop codespace

ตั้งค่า Idle Timeout

คุณสามารถตั้งค่าให้ Codespace ปิดตัวเองเร็วขึ้น (เช่น 5-10 นาที) เพื่อประหยัดเวลา:

👉 วิธีตั้งค่า Timeout Period for GitHub Codespaces

สรุป