บทที่ 1 — ภาพรวม: เรากำลังจะเข้าใจอะไร

คู่มือนี้พาไล่ตามรอย โปรเจกต์จริง หนึ่งตัว คือ ApexHuas — เว็บขายอะไหล่รถยนต์และเครื่องจักร — ตั้งแต่ตอนที่ยังเป็นโฟลเดอร์ว่างเปล่า จนถึงตอนที่เว็บออนไลน์อยู่บนอินเทอร์เน็ตจริงที่ https://apexhuas.choiceflowhub.com และอัปเดตตัวเองอัตโนมัติทุกครั้งที่มีการ merge โค้ด

ไม่ใช่ตัวอย่างสมมติ ทุกอย่างในคู่มือนี้เกิดขึ้นจริงใน repo ที่คุณกำลังจะเข้ามาทำ และคุณเปิดดูของจริงประกอบได้ทุกบท

คู่มือนี้เขียนให้ใคร

เขียนให้คนที่ พอเขียนโค้ดได้บ้าง (อ่าน JavaScript/TypeScript รู้เรื่อง เคยทำเว็บเล็ก ๆ) แต่ยังไม่เคยเจอของพวกนี้จริงจัง:

ทำงานร่วมกับคนอื่นบน Git โดยไม่ทับงานกัน
ระบบตรวจงานอัตโนมัติ (CI) ที่กันโค้ดพังไม่ให้หลุดเข้าโปรเจกต์
Docker และการเอาเว็บขึ้น server จริง
ท่อ deploy อัตโนมัติ (CI/CD)

ถ้ายังไม่เคยใช้ Git เลยก็ไม่เป็นไร บทที่ 2 มีปูพื้นให้ตั้งแต่ศูนย์

เป้าหมายเมื่ออ่านจบ

คุณจะทำสิ่งเหล่านี้ได้ด้วยตัวเอง โดยไม่ต้องถามใคร:

clone repo ลงเครื่อง แล้วรันเว็บขึ้นมาดูได้
แตก branch ทำงานของตัวเอง แล้วเปิด pull request ให้ทีมรีวิว
อ่านผล CI เป็น รู้ว่าที่มันแดงเพราะอะไรและต้องแก้ตรงไหน
เข้าใจว่าโค้ดที่ merge แล้วเดินทางไปโผล่บนเว็บจริงได้ยังไง
เข้าไปดู server จริงได้ว่าตอนนี้กำลังรันอะไรอยู่

ระบบทั้งหมดต่อกันแบบนี้

เครื่องคุณ                    GitHub                        Server (cloud)
─────────                    ──────                        ──────────────
เขียนโค้ด
   │
   │ git push
   ▼
branch feat/xxx ──── PR ───▶ develop
                              │   (CI ตรวจ: typecheck / lint / build / docker)
                              │
                              │ PR promote
                              ▼
                             uat ──── build image ────▶ GHCR (คลังเก็บ image)
                                                          │
                                                          │ deploy อัตโนมัติ
                                                          ▼
                                                    VM รัน Docker
                                                          │
                                                          ▼
                                          https://apexhuas.choiceflowhub.com

อ่านไม่เข้าใจตอนนี้ไม่เป็นไร — แต่ละกล่องจะถูกอธิบายทีละบท พออ่านจบแล้วกลับมาดูรูปนี้อีกครั้งจะเห็นภาพครบ

ศัพท์ 8 คำที่จะเจอบ่อยสุด

ยังไม่ต้องจำ แค่ให้คุ้นตาไว้ก่อน

คำ	แปลสั้น ๆ
repo (repository)	ที่เก็บโค้ดทั้งโปรเจกต์ พร้อมประวัติการแก้ทุกครั้ง
commit	การบันทึกงาน 1 ครั้ง เหมือนเซฟเกม พร้อมข้อความบอกว่าแก้อะไร
branch	เส้นทางงานที่แยกออกมา ทำอะไรพังก็ไม่กระทบเส้นหลัก
pull request (PR)	คำขอรวมงานจาก branch ตัวเองเข้าเส้นหลัก เป็นจุดที่ทีมรีวิวและ CI ตรวจ
CI	ระบบตรวจโค้ดอัตโนมัติทุกครั้งที่เปิด PR
Docker image	โค้ด + ทุกอย่างที่ต้องใช้รัน ห่อรวมเป็นก้อนเดียว ยกไปรันที่ไหนก็เหมือนกัน
deploy	เอาโค้ดขึ้นไปรันบน server จริงให้คนอื่นเข้าใช้ได้
VM	คอมพิวเตอร์เครื่องหนึ่งที่เช่าอยู่บน cloud เปิด-ปิดผ่านเว็บได้

เตรียมเครื่องก่อนเริ่ม

ติดตั้ง 3 อย่างนี้ (ข้ามได้ถ้ามีแล้ว):

เครื่องมือ	ใช้ทำอะไร	เช็คว่ามีหรือยัง
Git	จัดการเวอร์ชันโค้ด	`git --version`
Node.js 20.9 ขึ้นไป	รันเว็บ (โปรเจกต์นี้ใช้ 24 — ดูไฟล์ `.nvmrc`)	`node --version`
บัญชี GitHub	เก็บโค้ดและรัน CI	เปิดที่ github.com

Docker จะได้ใช้ในบทหลัง ๆ ยังไม่ต้องติดตั้งตอนนี้

ลองทำเอง: เปิด terminal แล้วพิมพ์ git --version กับ node --version ถ้าได้เลขเวอร์ชันออกมาทั้งคู่ = พร้อมไปบทถัดไป ถ้าไม่ขึ้นแปลว่ายังไม่ได้ติดตั้ง ให้ไปโหลดที่ git-scm.com และ nodejs.org

โปรเจกต์นี้ใช้เทคโนโลยีอะไรบ้าง

รู้ไว้พอเป็นพื้นหลัง ไม่ต้องเข้าใจลึกตอนนี้:

Next.js + React + TypeScript — ตัวเว็บ (หน้าบ้านและหลังบ้านอยู่ในโปรเจกต์เดียวกัน)
Tailwind CSS — จัดการสไตล์
PostgreSQL — ฐานข้อมูล (ยังไม่ได้ต่อ ตอนนี้ใช้ข้อมูลจำลองอยู่)
Docker — ห่อเว็บให้ยกไปรันบน server ได้
GitHub Actions — ระบบ CI/CD
Caddy — ตัวรับ request จากอินเทอร์เน็ตแล้วส่งต่อให้เว็บ พร้อมทำ HTTPS ให้อัตโนมัติ

พร้อมแล้วไปบทที่ 2 กันเลย — เริ่มจากสิ่งที่ใช้ทุกวันที่สุด คือ Git