VibeKit 101 คู่มือเริ่มใช้งาน VibeKit ด้วยตัวเอง

คู่มือสอนใช้งาน VibeKit ผ่านกระบวนการพัฒนา Application แบบ Full Loop ตั้งแต่การติดตั้งจนถึงการ Deploy ขึ้น Production จริง แนะนำให้ทำตามทุกขั้นตอนให้จบ เพื่อให้เข้าใจภาพรวมและสามารถนำไปประยุกต์ใช้กับ Project ของตัวเองได้

หากทำตามคู่มือนี้จนครบแล้วให้ศึกษาต่อใน Docs เพื่อเลือกทำตามความสนใจต่อได้

สิ่งที่ต้องเตรียม

ก่อนเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้พร้อมแล้ว:

เครื่องมือ	รายละเอียด	แหล่งดาวน์โหลด / สมัครใช้งาน
VibeKit Template	ไฟล์ ZIP ที่ได้รับหลังสั่งซื้อ	ดาวน์โหลดจาก Email ยืนยันการสั่งซื้อ
GitHub Account	บัญชีสำหรับเก็บ Sourcecode	github.com (ฟรี)
GitHub Desktop	โปรแกรมจัดการ Sourcecode บนเครื่อง	https://desktop.github.com/download/

Setup VibeKit Template

สรุปเนื้อหา: ขั้นตอนนี้จะอัปโหลดไฟล์ VibeKit Template ขึ้น GitHub เพื่อให้พร้อมใช้งานเป็น Template สำหรับทุก Project ในอนาคต (ทำครั้งเดียว)

Download VibeKit Template

⚠️ สำคัญ! หากดาวน์โหลดไฟล์ไม่ได้ ให้ติดต่อ contact@datayolk.net ทันที

• เปิด Email ยืนยันการสั่งซื้อของ VibeKit และกดลิงก์ดาวน์โหลด
• เมื่อดาวน์โหลดเสร็จแล้วจะได้ไฟล์ ZIP ชื่อ vibekit_x.x.x.zip ลงในเครื่อง เช่น vibekit_1.0.8.zip
• Extract ไฟล์ ZIP — จะได้ Folder ชื่อ vibe-coding-boilerplate-x.x.x เช่น vibe-coding-boilerplate-1.0.8
  

Upload VibeKit Template ไปยัง GitHub

• เปิดโปรแกรม GitHub Desktop และ Login ด้วยบัญชี GitHub
• ไปที่เมนู File → New Repository
• กรอกข้อมูลใน “Create a New Repository”:
  • Name: ชื่อ Folder ที่ได้จากการแตก ZIP vibe-coding-boilerplate-x.x.x
  • Local Path: เลือก Folder หลัก (Parent Folder) ที่เก็บ Project ไว้ ไม่ใช่ตัว Folder ของ Project เอง
    ตัวอย่าง: หาก Project อยู่ที่ /Download/vibe-coding-boilerplate-x.x.x ให้เลือก Local Path เป็น /Download
• กด Create repository และรอให้ระบบทำงาน

⚠️ จุดสังเกต: ด้านล่างหน้าต่างต้องแสดงข้อความว่า “The repository will be created at /Download/vibe-coding-boilerplate-x.x.x“ หากเห็นชื่อ Folder ซ้ำสองครั้ง เช่น /Download/vibe-coding-boilerplate/vibe-coding-boilerplate แสดงว่าเลือก Local Path ผิด ให้เลือกใหม่

• ถ้าเพิ่ม Project ถูกต้อง เมื่อกดใน Tab History ใน GitHub Desktop — ต้องมีรายการ “initial commit” พร้อมไฟล์หลาย ๆ ไฟล์

Publish Repository ขึ้น GitHub

⚠️ สำคัญมาก! ต้องติ๊ก Keep this code private ทุกครั้ง เพราะหาก Repository เป็น Public ผู้อื่นสามารถเข้าถึง Sourcecode และข้อมูลสำคัญใน Project ของคุณได้

• กดปุ่ม “Publish repository” ที่แถบด้านบน
• ในหน้าต่าง Publish ให้ติ๊กเลือก “Keep this code private” ก่อนกด Publish
• กดปุ่มเพื่อยืนยันการ Publish

VibeKit Template ใน GitHub Repository

• เปิดเบราว์เซอร์ไปที่ https://github.com/ และ Login
• กด Menu Profile และเลือก Repositories
• กดเลือก Repository ของตัวเอง “vibe-coding-boilerplate-x.x.x“
• ✅ สิ่งที่ควรเห็น: ชื่อ Project ปรากฏพร้อมสัญลักษณ์ 🔒 Private

💡 Tips (การตั้งค่าเพิ่มเติม): หากต้องการเปลี่ยน visibility หรือลบ Repository ในภายหลัง
ให้ไปที่ Repository นั้น ๆ เลือก Settings → General → Danger Zone ซึ่งมีตัวเลือก
“Change repository visibility” (แก้ให้เป็น Private) และ “Delete this repository”

ทำ VibeKit Template เป็น GitHub Template

ตั้งค่าให้ Repository นี้เป็น Template เพื่อให้สร้าง Project ใหม่ได้โดยไม่ต้องอัปโหลดไฟล์ซ้ำทุกครั้ง

หมายเหตุ: Repository ที่ตั้งเป็น Template ควรเก็บไว้เหมือนเดิม ไม่ควรนำมาพัฒนา Project จริง

• เปิด Repository ของคุณบน GitHub.com
• กดที่แถบเมนู Settings → General
• เลื่อนลงหา Template repository และติ๊กเลือก
• ✅ สิ่งที่ควรเห็น: ปุ่ม “Use this template” ปรากฏขึ้นที่หน้าหลักของ Repository

ดูรายละเอียดฉบับเต็มได้ที่ การดาวน์โหลดและตั้งค่า VibeKit บน GitHub

สร้าง Project ผ่าน GitHub template

สรุปเนื้อหา: สร้าง Repository ใหม่จาก Template สำหรับ Workshop นี้ — นี่คือวิธีที่คุณจะใช้ทุกครั้งที่เริ่ม Project ใหม่

เมื่อตั้งค่า Template เรียบร้อยแล้ว ขั้นตอนนี้จะสร้าง Project ใหม่สำหรับการทดลองใช้งาน VibeKit ตลอด Workshop นี้

• ไปที่ Repository ต้นแบบของคุณบน GitHub.com
• กดปุ่ม “Use this template” → “Create a new repository”
• กรอกข้อมูลในหน้า Create Repository:
  • Owner: เลือกบัญชีของตัวเอง
  • Repository name: vibekit-101
  • Description: learning vibekit
  • Visibility: เลือก Private

⚠️ สำคัญ! ค่าเริ่มต้นของ Repository จะเป็น Public — อย่าลืมเปลี่ยนเป็น Private ก่อนกด Create

• กด “Create repository”
• ✅ สิ่งที่ควรเห็น: Repository ชื่อ vibekit-101 ถูกสร้างขึ้น พร้อม badge Private

Setup GitHub Codespaces

สรุปเนื้อหา: GitHub Codespaces คือ Cloud IDE ที่ให้คุณเขียนโค้ดและรัน Application ได้ผ่านเบราว์เซอร์ โดยไม่ต้องติดตั้งโปรแกรมเพิ่มเติมบนเครื่อง

เปิด GitHub Codespaces

• เปิด Repository vibekit-101 บน GitHub.com
• กดปุ่ม Code (สีเขียว) → เลือกแถบ Codespaces
• กด “Create codespace on main”
• รอให้ระบบโหลดจนเสร็จ (ประมาณ 1–3 นาที ครั้งแรกอาจจะนานหน่อย) จุดสังเกตคือด้านล่างจะเขียนว่า /workspaces/vibekit-101

ตัวอย่างหน้าจอ GitHub Codespaces ซึ่งเป็นพื้นที่ทำงาน

กลับไปดูที่หน้า Repository บน GitHub ตรงเมนู Code -> แถบ Codespaces จะเห็น Codespaces แสดงสถานะ Active อยู่ (ชื่ออาจจะไม่เหมือนกัน)

ทำความรู้จัก GitHub Codespaces Interface

Codespaces มี Tools bar หลายอัน ซึ่งสามารถแบ่งได้เป็นส่วน ๆ ดังนี้ ซึ่งสามารถกดเปิด ปิด ได้ ผ่าน ไอคอนขวาบนสุด

1. Sidebar ด้านซ้าย เมนูที่สำคัญในระบบ
2. AI Coding Agent ด้านขวาสุด ใช้คุยกับ AI Agent
3. Panel ด้านล่างสุด ไว้ตรวจสอบสถานะของ Project
   • Terminal ไว้รันคำสั่ง ที่ต้องรันด้วยตัวเอง
   • Ports เมื่อรัน Project แล้ว ระบบจะสร้าง URL (ชั่วคราว) ให้เรากดเข้าไปดูได้ผ่าน Browser
   • และอื่น ๆ (Problems, Output, Debug Console)

Sidebar Menu

Codespaces มี Sidebar ด้านซ้ายที่แบ่งเป็นหมวดหลัก สามารถกดเปิดปิดได้

Explorer (ไอคอนรูปกระดาษ)

ใช้ค้นหา, เปิดไฟล์ต่าง ๆ ใน Project และสร้างไฟล์หรือ Folder

• ลองหาไฟล์ชื่อ README.md และดับเบิลคลิกเพื่อเปิด
• ลองหาไฟล์ชื่อ globals.css ที่อยู่ใน Folder src/app

Search (ไอคอนรูปแว่นขยาย)

ใช้ค้นหาข้อความในทุกไฟล์ของ Project

• ลองค้นหาคำว่า vibe-coding-boilerplate เพื่อดูว่ามีคำนี้ในไฟล์ไหนบ้าง และคลิกที่ไฟล์ชื่อ README.md เพื่อกระโดดไปหาคำว่า vibe-coding-boilerplate

Source Control (ไอคอนรูป Branch)

ใช้บันทึกการแก้ไขและ Sync ขึ้น GitHub

การบันทึกการแก้ไข Save draft

• สร้างไฟล์ใหม่ชื่อ hello.txt ใน Project (Root directory) ผ่าน Explorer และพิมพ์ข้อความ hello world
• ไปที่ Source Control — จะเห็น hello.txt อยู่ใน Changes
• กดปุ่ม “+” หน้าไฟล์เพื่อ Stage changes (คล้ายการเลือกสิ่งที่จะ Save draft ไว้ สามารถเลือกได้หลายอัน)
• พิมพ์ Commit message: add hello.txt file
• กด Commit — เหมือนการบันทึก Draft (ข้อมูลยังอยู่ใน Codespaces เท่านั้น ตราบใดที่ไม่ลบ Codespaces การตั้งค่ายังอยู่เหมือนเดิม)
• ระบบจะบันทึกอยู่ใน Graph View ด้านล่าง

การยกเลิกการแก้ไข Discard change

• เพิ่มบรรทัดใหม่ใน hello.txt และพิมพ์ helloVibeKit
• ก่อน Commit ลองคลิกขวาที่ไฟล์ใน Source Control และเลือก “Discard Changes” เพื่อยกเลิกการแก้ไข และ Confirm Discard

การบันทึกการแก้ไขใน GitHub (Sync)

ใช้เมื่อมั่นใจแล้วว่าการแก้ไขนี้ถูกต้อง ไม่เป็นปัญหา เราจะกด Sync Changes เพื่อเอาการเปลี่ยนแปลงทั้งหมดเก็บไว้บน GitHub

เมื่อเข้าไปที่ GitHub Repository จะเห็น Commit Message ของตัวเองขึ้นมาเป็น Timeline (กดตรง Commits)

Sync Changes ใน main เมื่อกดแล้ว ถ้ามีการเชื่อมต่อ Deployment ตัวระบบจะทำการ Deploy WebApp ให้ใหม่ ทำให้ผู้ใช้งานเห็นการเปลี่ยนแปลงทันที

หากไม่ได้ Sync Changes และกด Delete Codespaces ข้อมูลที่ทำงานอยู่จะหายไปหมด

AI Coding Agent

Codespaces มี Sidebar ด้านขวาสำหรับการใช้งาน AI Coding Agent สามารถเปิดปิดได้

• กดปุ่ม “+” หรือพิมพ์ # เพื่ออ้างอิงถึงไฟล์ที่ต้องการให้ AI ทำงาน
• พิมพ์คำสั่งนี้: in file #hello.txt please add content "hello VibeKit"
• กด Enter เพื่อส่งคำสั่ง (กด Control + Enter เพื่อขึ้นบรรทัดใหม่)
• กด “Keep” เพื่อบันทึกการแก้ไขที่ AI ทำ (กด Undo เพื่อไม่เอาการแก้ไขนั้น ๆ)
• พิมพ์ Commit message: update hello.txt และกด Sync Changes

ดูรายละเอียดฉบับเต็มได้ที่ การใช้งาน GitHub Codespaces ฉบับเต็ม

ทำความรู้จัก VibeKit Folder Structure

ใน Explorer ให้ลองดูไฟล์สำคัญเหล่านี้:

ไฟล์	หน้าที่
README.md	คำแนะนำการใช้งานและ Commands ที่จำเป็น
.env	ไฟล์เก็บ Secret และการตั้งค่าระบบ (สร้างโดย Setup Wizard อัตโนมัติ แต่สามารถเพิ่มข้อมูลเองในภายหลังได้) อ่านคำอธิบายเกี่ยวกับ Environment Variable
.env.example	ตัวอย่างการใส่ข้อมูลใน .env
.cursorrules	ไฟล์กำหนด Context ให้ AI Agent เปรียบเหมือนมันสมองของระบบ (เวลาแก้ไข Rule ให้ Agent ให้แก้ไขที่นี่ที่เดียวเพราะจะ Sync ไปกับ File อื่น ๆ เช่น AGENTS.md, CLAUDE.md, GEMINI.md)
addons.md	ไฟล์อธิบายภาพรวมของ Project ใส่ PRD และรายละเอียดโปรเจกต์ที่นี่
package.json	ไฟล์ข้อมูลภาพรวมของ Project และ Version

หมายเหตุ: ไฟล์ .env จะไม่ถูกบันทึกขึ้น GitHub และจะถูกลบเมื่อ Delete Codespaces ต้องรัน Setup Wizard ใหม่ทุกครั้งที่สร้าง Codespaces ใหม่ จึงแนะนำให้บันทึกการตั้งค่าแยกเอาไว้

Setup Project

สรุปเนื้อหา: ขั้นตอนนี้จะตั้งค่าระบบ Login with Google ผ่านการรัน Setup Wizard ซึ่งจะช่วยกำหนดค่าต่าง ๆ ให้โดยอัตโนมัติ

เปิด Terminal และรัน Setup Wizard

การใช้งาน Terminal หาก Project ไม่สามารถรันได้ หรือเวลาแก้ไขแล้ว ผลลัพธ์ไม่เปลี่ยน ให้ Cancel คำสั่ง ด้วยการกด Control + C และรันคำสั่งใหม่

• ใน Codespaces เปิด Terminal ที่ Panel ด้านล่าง (กดไอคอน Terminal)
• พิมพ์คำสั่ง: npm run setup เพื่อรัน Setup Wizard
• พิมพ์ Y แล้วกด Enter
• แล้วกรอกข้อมูลตามรายละเอียดในขั้นตอนถัดไป

ตั้งค่า Google Cloud Project สำหรับ Login ด้วย Google Account

ตั้งค่า Google OAuth สำหรับระบบ Login ด้วย Google Account

สร้าง Google Cloud Project

• เข้าไปที่ Google Cloud Console
• คลิกที่ Select a project (1) แล้วคลิก New project (2)
• กรอกชื่อ Project (vibekit-101) แล้วคลิก Create

ตั้งค่า OAuth Consent Screen

• คลิกเมนู ☰ ด้านซ้าย
• ไปที่ APIs & Services (1) > OAuth consent screen (2)
• หน้าจอจะแสดง OAuth Overview ให้คลิก Get started (กรณีที่เคยสร้างมาแล้วให้เข้าไปที่ เมนูย่อยที่ชื่อ Clients แทนและคลิก Create client)

ตั้งค่า Project Configuration

• กรอกข้อมูลแอปพลิเคชัน:
  • App name — ชื่อที่จะแสดงตอน login (vibekit-101)
  • User support email — เลือก email ของคุณ
• เลือก External เพื่อให้ทุกคนที่มี Google Account สามารถ login ได้
• กรอก email ที่ Google จะใช้แจ้งเตือนเกี่ยวกับ project
• ติ๊กยอมรับ Google API Services: User Data Policy แล้วคลิก Continue > Create

Publish to Production ⚠️ สำคัญ!

• ไปที่เมนู Audience (1) คุณจะเห็น Publishing status เป็น “Testing”
• คลิก “Publish app” (2) เพื่อเปลี่ยนเป็น Production
  

สร้าง OAuth Client ID

• ไปที่เมนู Clients (1) แล้วคลิก Create client (2)
• เลือก Application type เป็น Web application
• ตั้งชื่อ (vibekit-101)
• ตั้งค่า Authorized Redirect URIs
  • ก็อปปี้ URL ที่เป็น Port 3000 ใน Codespaces แล้วใส่ข้อความต่อท้ายในรูปแบบ URL/api/auth/callback/google
  • เพิ่ม URL ในส่วน Authorized redirect URIs กดเพิ่ม URI
• กด Create และ Copy ข้อมูล Google Client ID, Google Client Secret เอาไว้ใช้ในขั้นตอนถัดไป
  

การดู Port 3000 และ URL ที่กำลังใช้งาน

ใส่ข้อมูลลงใน Setup Wizard

ถ้ากรอกข้อมูลเสร็จแล้วกด Enter ต่อได้เลย

• Google Client ID, Google Client Secret:คัดลอก Client ID และ Client Secret มาใส่ใน Setup Wizard
• Your app URL: คัดลอก URL จาก Port 3000 มาใส่ใน Setup Wizard
• Session secret (auto-generated): กด Enter เพื่อให้ระบบสร้างให้อัติโนมัติได้เลย

ตรวจสอบผลลัพธ์ในไฟล์ .env

ตรวจสอบการเพิ่มข้อมูลในไฟล์ .env (โดย Setup Wizard เป็นเครื่องมือที่อำนวยความสะดวกในการเพิ่มข้อมูล)

อ่านรายละเอียดฉบับเต็มเรื่อง ตั้งค่า Google Cloud Project สำหรับ Login ด้วย Google Account

Setup Database (เฉพาะครั้งแรก)

รันคำสั่งนี้ใน Terminal เพื่อ Setup Database

npx prisma migrate dev && npx prisma db seed

Run Project

ก่อนที่จะรันคำสั่งนี้ ให้ตรวจสอบว่าทำสิ่งนี้แล้ว

• npm run setup เรียบร้อย มีข้อมูลอยู่ในไฟล์ .env แล้ว
• Setup Database (เฉพาะครั้งแรก) เรียบร้อยแล้ว

รันคำสั่งนี้ใน Terminal เพื่อเปิดใช้งาน Project

npm run dev

เข้าไปที่ Panel -> Ports และ คลิก URL ที่เป็น Port 3000

หาก Project ไม่สามารถรันได้ หรือเวลาแก้ไขแล้ว ผลลัพธ์ไม่เปลี่ยน ให้ Cancel คำสั่ง npm run dev ด้วยการกด Control + C และรันคำสั่งใหม่

Login ด้วย Google Account

สรุปเนื้อหา: ทดสอบระบบ Login ที่ตั้งค่าไว้ เพื่อยืนยันว่าระบบทำงานได้ถูกต้องก่อนไปขั้นตอนถัดไป

• เปิด URL ของ Application ที่ Codespaces แสดงในส่วน Panel -> Ports (3000)
• กดปุ่ม Login -> “Login with Google”
• ✅ สิ่งที่ควรเห็น: เข้าสู่หน้า Dashboard ได้สำเร็จ

💡 Tips: ผู้ใช้แรกที่ Login เข้าระบบจะได้สิทธิ์เป็น Admin โดยอัตโนมัติ ผู้ใช้คนอื่นที่ Login ทีหลังจะได้สิทธิ์เป็น Unverified และต้องรอ Admin อนุมัติก่อนเข้าใช้งาน

หากเกิดปัญหาไม่สามารถ Login ได้ Error 403: redirect_uri_mismatch ดูวิธีแก้ปัญหาแบบละเอียดได้ที่ แก้ปัญหา Error 403: redirect_uri_mismatch

ใช้งาน Database Viewer

Database Viewer (Prisma Studio) ตัวนี้ใช้สำหรับดูตัวอย่างข้อมูลที่ถูกบันทึกในระบบ หรือ จัดการข้อมูลอย่างรวดเร็วโดยไม่ต้องสร้างหน้า UI ขึ้นมาเอง เราสามารถดูข้อมูลใน Database ระหว่างการพัฒนาได้ผ่านการเปิด Port 51212 (พิมคำสั่ง npm run dev หลังจาก Stop Project ไปแล้ว)

เมื่อเปิดใช้งาน Database Viewer จะมีเมนูหลัก ๆ 2 อย่างคือ

1. Visualizer เครื่องมือขั้นสูงในการจำลองโครงสร้าง Database ทั้งหมด
2. Tables ตารางข้อมูลที่ใช้ในระบบ

Table ที่สำคัญ ๆ

• User: เก็บข้อมูลผู้ใช้งาน
  • ทดลองเปลี่ยน Username ผู้ใช้งานที่นี่
• UserRole: เก็บข้อมูล Role ของผู้ใช้งานแต่ละคน (1 User มีได้หลาย Role)
  • ทดลองเปลี่ยน Role ผู้ใช้งานที่นี้
• Role: เก็บข้อมูล Role ทั้งหมดในระบบ
• RolePermission: เก็บข้อมูล Permission ของแต่ละ Roleในระบบ (1 Role มีได้หลาย Permission)
• Permission: เก็บข้อมูล Permission ทั้งหมดในระบบ

⚠️ ข้อควรระวัง: Database Viewer เป็นเครื่องมือสำหรับช่วงพัฒนาเท่านั้น ไม่ควรใช้แก้ไขข้อมูลใน Production โดยตรง

อ่านรายละเอียดฉบับเต็มเกี่ยวกับ Database Viewer ที่

การเปลี่ยน Role ให้ User แต่ละคน

ในระบบของ VibeKit ได้มีการสร้างระบบ Authentication ให้แล้ว และหากเรามีสิทธิเป็น Admin ก็สามารถเปลี่ยน Role ให้คนอื่นได้ แต่กรณีที่ต้องการความรวดเร็วเราสามารถเปลี่ยน Role ให้ User ได้ผ่าน Database Viewer

• เข้าไปที่ Table roles
  • เวลาจะเปลี่ยน Role ให้ใครให้ก็อปปี้ roles id ที่ต้องการไปใส่
• เข้าไปที่ Table users
  • เวลาจะเปลี่ยน Role ให้ใครให้หา users id ที่ต้องการเพื่อแก้ไข roles
• เข้าไปที่ Table user_roles
  • มองหา user_id ที่ตรงกับที่เราต้องการ
  • แก้ไข role_id แล้วกดบันทึกให้เรียบร้อย

Deploy ขึ้น Railway

สรุปเนื้อหา: Railway คือ Hosting Platform ที่ช่วยให้ Application ของคุณทำงานบน Cloud ตลอดเวลา ทำให้ทีมหรือผู้ใช้คนอื่นเข้าถึงได้โดยไม่ต้องเปิด Codespaces ทิ้งไว้

ก่อนเริ่มขั้นตอนนี้ ให้แน่ใจว่า Commit และ Sync Changes ขึ้น GitHub ครบทุกไฟล์แล้ว

สร้าง Project ใหม่บน Railway จาก Railway Template

1. เข้า railway.com และ login
2. กดติดตั้ง VibeKit Railway Deployment Template เพื่อติดตั้งโดยไม่ต้องตั้งค่า Database เอง
3. กด Deploy ได้เลย
4. หลังจากที่ database ขึ้น Online เรียบร้อยแล้ว คลิกที่ service Postgres แล้วไปที่เมนู Settings เพื่อปรับ Region ของ database ให้อยู่ใน Southeast Asia (Singapore)

ติดตั้ง VibeKit Project จาก GitHub (vibekit-101)

1. กด Add เลือก GitHub Repository
2. ค้นหาและเลือก repository vibekit-101 (ในการใช้งานครั้งแรก อาจจะต้องมีการเชื่อมต่อ GitHub กับ Railway ก่อน)
3. กด Deploy เพื่อให้ Railway build โปรเจค
4. ไปที่เมนู Settings เพื่อปรับ Region ของ vibekit-101 ให้อยู่ใน Southeast Asia (Singapore)
   

VibeKit Build Failed (ปกติ!)

 ไม่ต้องตกใจ! Build จะ fail เพราะยังไม่มี environment variables

ขั้นตอนถัดไปคือการตั้งค่า environment variables

กด Generate Domain ฟรีจาก Railway.com

1. เลือก vibekit-101 repository
2. ไปที่ Settings > Networking
3. คลิก Generate Domain
4. ใส่ port 8080
5. คลิก Generate Domain
6. ระบบจะสร้าง URL ให้ส่วนใหญ่จะชื่อว่า vibekit-101-production-xxxx.up.railway.app

ตั้งค่า Environment Variables

1. คลิกที่ service ของคุณ (vibekit-101)
2. ไปที่ tab Variables
3. ใส่ Variable เหมือนตอน setup ที่ GitHub Codespaces

ค่าที่ต้องตั้งในส่วน Variable

Variable	Value
DATABASE_URL	${{Postgres.DATABASE_URL}}
DIRECT_URL	${{Postgres.DATABASE_URL}}
NEXTAUTH_URL	ต้องกด Generate Domain ก่อนในหน้า Settings https://${{RAILWAY_PUBLIC_DOMAIN}}
NEXTAUTH_SECRET	(กด generate จากที่นี่)
GOOGLE_CLIENT_ID	(ค่าจาก Google Cloud ดูจากที่นี่ หรือใช้ค่าจากใน Codespaces)
GOOGLE_CLIENT_SECRET	(ค่าจาก Google Cloud ดูจากที่นี่ หรือใช้ค่าจากใน Codespaces)

💡 Tip: ${{Postgres.DATABASE_URL}} คือ Railway variable reference ที่จะถูกแทนที่ด้วย connection string จริงอัตโนมัติ

ตั้งค่า Config-as-Code (railway.json)

โปรเจคนี้มี railway.json พร้อมใช้งาน ซึ่ง Railway จะอ่านค่าจากไฟล์นี้แล้ว config settings อื่น ๆ ให้อัตโนมัติ ถ้าหากช่องดังกล่าวนี้ยังว่างอยู่ ให้เลือกไฟล์ railway.json จากใน project

1. คลิกที่ service ของคุณ (vibekit-101)
2. ไปที่ tab Settings
3. ส่วน Config-as-code ให้เลือกใส่ /railway.json

Deploy! และตรวจสอบการ Deploy

หลังตั้งค่าครบแล้ว Railway จะ re-deploy อัตโนมัติ หรือคลิก Deploy ด้วยตัวเอง เมื่อ Deploy สำเร็จทุกอย่างจะเป็นสีเขียว ให้คลิกที่ URL เพื่อเปิดดู app ที่ deploy แล้ว

• เปิด URL ที่ Railway สร้างให้
• หลัง deploy สำเร็จ ให้กลับไปเพิ่ม Authorized Redirect URI ใน Google Cloud Console:
  https://your-app.up.railway.app/api/auth/callback/google
• ทดลอง Login เพื่อยืนยันว่าระบบทำงานได้จริง

Auto Deploy เมื่อแก้ไข Code

ทุกครั้งที่ Sync Changes ขึ้น GitHub, Railway จะ Redeploy ให้อัตโนมัติ ทดลองด้วยขั้นตอนนี้:

1. กลับไปที่ Codespaces และหาคำว่า Vibe Coding Boilerplate ในหน้า Index Page (page.tsx)
2. แก้ไขข้อความจาก Vibe Coding Boilerplate เป็น VibeKit
3. พิมพ์ Commit message: change index page text
4. กด Sync Changes
5. กลับไปดูที่ Railway — ระบบจะ Redeploy อัตโนมัติ
6. ✅ สิ่งที่ควรเห็น: Deployment ใหม่เริ่มทำงาน และข้อความบนหน้าเว็บเปลี่ยนตามหลัง Deploy เสร็จ

Revert การเปลี่ยนแปลงใน Railway

หากการแก้ไขครั้งล่าสุดมีปัญหา สามารถย้อนกลับไปเวอร์ชันก่อนหน้าได้:

1. ใน Railway ที่ vibekit-101 ไปที่ Deployments
2. หา Deployment เวอร์ชันก่อนหน้าที่ต้องการ
3. กด “Redeploy” เพื่อกลับไปใช้งาน Version นั้น

หรือเวลาระบบมีปัญหาสามารถกด Restart เพื่อ Reset ระบบได้

ดูรายละเอียดฉบับเต็มได้ที่ การ Deploy Project ด้วย Railway

FAQ: คำถามที่พบบ่อย