Auto-deploy ทำงานยังไง (ตัวอย่างจากเว็บนี้)

จาก git push ถึงเว็บอัปเดตในไม่กี่นาที — GitHub Actions, SSH, Reverse Proxy และ HTTPS อัตโนมัติ

สรุปใน 30 วินาที

CI/CD = ให้เครื่องทำงานซ้ำๆ แทนคน: build → ทดสอบ → ส่งขึ้น server ทุกครั้งที่ push
GitHub Actions เป็นคนลงมือ โดยใช้ SSH key เข้า server แทนการพิมพ์รหัสผ่าน
Caddy (reverse proxy) รับทุก request ที่เข้ามา, ส่งต่อไปยังเว็บที่ถูกโดเมน และออก HTTPS ให้เอง

ทำไมต้อง auto-deploy

deploy ด้วยมือคือ build เอง → อัปโหลดไฟล์ → SSH เข้าไป restart ช้าและพลาดง่าย ลืมขั้นเดียวเว็บก็พังได้ auto-deploy ทำให้ทุกครั้ง ทำเหมือนเดิมเป๊ะ และย้อนกลับได้เมื่อมีปัญหา

ภาพรวมทั้งระบบ

เส้นทางของโค้ด

1git pushขึ้น branch main

2GitHub Actionsbuild เว็บ

3SSH / SCPส่งไฟล์ขึ้น VPS

4เปลี่ยนเวอร์ชันไม่มีช่วงเว็บพัง

5Caddyเสิร์ฟ + HTTPS

ทีละขั้น

1
Trigger — workflow ทำงานเมื่อมี push เข้า main หรือกดปุ่ม Run workflow เอง
2
Build — เครื่องของ GitHub ติดตั้ง Node แล้วรัน npm run build แปลงไฟล์ Markdown ทั้งหมดเป็น HTML ใน dist/ ถ้าเนื้อหามีจุดผิด เช่น ไม่มี title ขั้นนี้จะ fail และไม่มีอะไรขึ้นเว็บ
3
ส่งไฟล์ — ใช้ SSH key ที่เก็บใน GitHub Secrets ส่งไฟล์ไปที่ VPS
4
เปลี่ยนเวอร์ชันอย่างปลอดภัย — ไฟล์ CSS/JS มี hash อยู่ในชื่อ เช่น style.3fa9c1.css จึงวางไฟล์ใหม่ไว้ข้างไฟล์เก่าได้ก่อน แล้วค่อยเปลี่ยนหน้า HTML ให้ชี้ไปที่ไฟล์ใหม่ ผู้ใช้จึงไม่เคยเจอหน้าใหม่ที่ CSS ยังเป็นของเก่า และ server เก็บ build ย้อนหลังไว้ 5 ชุดสำหรับ rollback
5
ตรวจสอบ — workflow เรียก https://learn.exztech.com/version.txt ว่าได้เวอร์ชันใหม่จริงไหม

Reverse Proxy คืออะไร

VPS เครื่องเดียวรันหลายเว็บได้ เพราะมี reverse proxy ยืนอยู่หน้าบ้าน ทุก request เข้ามาที่ port 443 ก่อน แล้ว proxy ดูว่าขอโดเมนไหนจึงส่งต่อให้ถูกที่

🗂️ Static site (เว็บนี้)

Caddy เสิร์ฟไฟล์ HTML/CSS/JS จากโฟลเดอร์ตรงๆ
ไม่มี backend จึงเร็วมากและแทบไม่มีอะไรให้พัง
เหมาะกับ: เว็บเนื้อหา, docs, landing page

⚙️ App (มี backend)

Caddy ส่งต่อ request ไปที่ container ของแอป
รองรับ login, ฐานข้อมูล, API
เหมาะกับ: ระบบสมาชิก, หลังบ้าน, ร้านค้า

ทำไมใช้ SSH key ไม่ใช้รหัสผ่าน

🔑 Private key

เก็บไว้ใน GitHub Secrets เท่านั้น ห้าม commit ลง repo

🔓 Public key

วางไว้บน server ใน authorized_keys ให้ server รู้ว่าใครเข้ามาได้

🧩 แยก key ต่อเว็บ

ถ้า key ของเว็บหนึ่งหลุด ลบแค่บรรทัดเดียวบน server โดยไม่กระทบเว็บอื่น

server เก็บ build ล่าสุดไว้ 5 ชุด ถ้าเวอร์ชันใหม่มีปัญหา ไปที่ GitHub → Actions → Deploy → Run workflow → เลือก rollback แล้ว server จะนำ build ก่อนหน้ากลับขึ้นมาภายในไม่กี่วินาที โดยไม่ต้อง build ใหม่

ทบทวน

ทบทวน 1

ทำไมต้องใส่ hash ไว้ในชื่อไฟล์ CSS/JS เช่น style.3fa9c1.css?