หลังจากมีโค้ดอยู่บน GitHub แล้ว คำถามถัดไปคือทำยังไงให้คนอื่นเปิดเว็บเราได้ นั่นคือหน้าที่ของ Vercel
จุดเด่นคือกดครั้งเดียวได้ลิงก์เว็บจริง และทุกครั้งที่เราส่งโค้ดใหม่ขึ้นไป เว็บอัปเดตให้เองโดยไม่ต้องทำอะไรเพิ่ม
สไลด์ 1 — สามคำที่ต้องแยกให้ออกก่อน
- Website หน้าตาและเนื้อหาของเว็บ สิ่งที่ลูกค้ามองเห็น
- Hosting ที่เก็บไฟล์และระบบของเว็บ ทำให้เว็บเปิดใช้งานได้ตลอด
- Domain ชื่อเว็บที่คนพิมพ์เข้ามา เช่น ชื่อร้านเราจุดคอม
เทียบกับร้านจริงคือ Domain เหมือนที่อยู่ร้าน · Hosting เหมือนตัวอาคาร · Website เหมือนหน้าร้านที่ลูกค้าเห็น
สไลด์ 2 — Deploy คืออะไร
Deploy คือการเอาเว็บจากเครื่องเราไปวางบนอินเทอร์เน็ต
ก่อน Deploy เปิดได้ในเครื่องเราคนเดียว คนอื่นยังเข้าไม่ได้
หลัง Deploy มีลิงก์เว็บออนไลน์ ส่งให้ใครก็เปิดได้
นี่คือเส้นแบ่งระหว่าง "ทำเล่นในเครื่อง" กับ "ของจริงที่ลูกค้าใช้"
สไลด์ 3 — Vercel ช่วย Deploy ยังไง
- สร้างเว็บในเครื่องด้วย VS Code กับ Claude Code
- ส่งขึ้น GitHub
- Vercel ดึงโปรเจคเข้ามา
- Build แล้วเปิดระบบให้
- ได้เว็บออนไลน์พร้อมลิงก์
หลังจากเชื่อมครั้งแรกแล้ว รอบต่อไปแค่ส่งโค้ดขึ้น GitHub เว็บจะอัปเดตเองอัตโนมัติ ไม่ต้องกดอะไรอีก
ลองทำเลย
เอาเว็บจาก บทที่ 11 เว็บแรก ขึ้น Vercel แล้วลองแก้ข้อความสักบรรทัด ส่งขึ้นใหม่ แล้วรอสักครู่ เปิดลิงก์เดิมดูว่าเปลี่ยนตามไหม จะเห็นวงจรทั้งหมดด้วยตาตัวเอง
สไลด์ 4 — Domain เชื่อมกับ Hosting ยังไง
เวลาลูกค้าพิมพ์ชื่อเว็บ เกิดสามขั้นนี้
- ลูกค้าพิมพ์ชื่อเว็บ
- ชื่อนั้นชี้ไปที่ Hosting ผ่านระบบที่เรียกว่า DNS
- Hosting ส่งหน้าเว็บกลับมาให้ลูกค้าเห็น
เพราะฉะนั้นเวลาซื้อโดเมนมาแล้วเว็บยังไม่ขึ้น มักไม่ใช่เว็บพัง แต่คือยังไม่ได้ตั้งค่าให้ชื่อชี้มาที่ที่ฝากเว็บ
สไลด์ 5 — ลำดับการทำงานจริงสำหรับมือใหม่
- สร้างเว็บในเครื่อง
- ส่งขึ้น GitHub
- Deploy บน Vercel
- ทดสอบลิงก์ที่ได้มา
- เชื่อม Domain จริงทีหลัง
สิ่งที่ควรเช็กก่อนบอกว่าเสร็จ คือ Build ผ่าน ใส่ค่าตั้งค่าที่จำเป็นครบ และเปิดเว็บจริงดูแล้ว
โดเมนของตัวเองซื้อทีหลังได้เสมอ อย่ารอให้มีชื่อสวยก่อนแล้วค่อยปล่อย ปล่อยด้วยลิงก์ที่ได้มาฟรีก่อนเลย
เช็คลิสต์ก่อนไปบทถัดไป
- แยกออกว่า Website Hosting Domain คนละอย่างกัน
- มีเว็บที่ Deploy แล้วและเปิดจากมือถือได้
- เข้าใจว่าทำไมส่งโค้ดขึ้น GitHub แล้วเว็บอัปเดตเอง
- รู้ว่าถ้าโดเมนไม่ขึ้น ให้ไปดูการตั้งค่าชี้ปลายทางก่อน