C
ClaudeDuc · คู่มือ Claude ภาษาไทย
TOOL GUIDE · VERCEL
Vercel
เอาเว็บที่สร้างเสร็จ ขึ้นออนไลน์จริง
แพลตฟอร์ม deploy เว็บที่คู่กับ Next.js โดยตรง — push โค้ดขึ้น GitHub แล้วได้เว็บ live พร้อม preview link ให้ลูกค้าดูก่อน merge
ภาพรวม
ในเด็คนี้มีอะไรบ้าง
- Vercel คืออะไร — ทำไมคู่กับ Next.js
- แผนราคา — Hobby/Free เทียบ Pro ชัด ๆ
- เริ่มใช้งาน — ทีละขั้นจาก GitHub repo สู่เว็บ live
- ฟีเจอร์เด่น — preview deployment, edge network, serverless functions
- ต่อโดเมนตัวเอง — เชื่อมกับ registrar/Cloudflare
- Use case จริง — งานแบบไหนควรใช้ Vercel
- เทียบคู่แข่ง — Vercel vs Netlify vs Render
- ข้อควรระวัง
01
บทที่ 1
Vercel คืออะไร (What is Vercel)
แพลตฟอร์ม hosting ฝั่ง frontend ที่สร้างโดยทีมเดียวกับ Next.js
แนวคิดหลัก
Vercel = "Frontend Cloud"
- Vercel คือ cloud platform สำหรับ deploy เว็บที่เน้นฝั่ง frontend — สร้างโดยทีมผู้สร้าง Next.js เอง จึงรองรับทุกฟีเจอร์ของ Next.js (Server Components, ISR, Middleware, Image Optimization) แบบ native
- นอกจาก Next.js ยังรองรับหลายเฟรมเวิร์ก เช่น React, Vue, Svelte, Astro และไฟล์ static ทั่วไป
- เชื่อมกับ Git (GitHub, GitLab, Bitbucket) — push โค้ดแล้ว build/deploy ให้อัตโนมัติ ไม่ต้องตั้ง server เอง
- ทุก deploy วิ่งผ่าน global edge network เพื่อความเร็วที่ใกล้ผู้ใช้ทั่วโลก
02
บทที่ 2
แผนราคา (Hobby vs Pro)
แยกให้ชัดว่าฟรีใช้ได้แค่ไหน และเมื่อไหร่ต้องจ่าย
แผนราคา · อ้างอิง vercel.com/pricing
Hobby (Free) vs Pro ($20/user/เดือน)
| Hobby (ฟรี) | Pro |
|---|
| ราคา | ฟรี ตลอดไป | $20/ผู้ใช้/เดือน + usage credit $20/เดือน |
| การใช้เชิงพาณิชย์ | ❌ ห้าม (ใช้ส่วนตัว/ไม่แสวงกำไรเท่านั้น) | ✅ อนุญาต |
| Fast Data Transfer | 100 GB/เดือน | 1 TB/เดือน รวม |
| Edge Requests | สูงสุด 1,000,000/เดือน | 10,000,000/เดือน รวม |
| Function Invocations | 1,000,000 ครั้งแรก | รวมในเครดิต ใช้เกินคิดตามจริง |
| Active CPU | 4 ชม./เดือน | รวมในเครดิต ใช้เกินคิดตามจริง |
| Projects | 200 | ไม่จำกัด |
| Deployments/วัน | 100 | 6,000 |
| ทีม/Seats | 1 คน | 1 seat จ่ายในราคา + เพิ่ม $20/คน · Viewer ฟรีไม่จำกัด |
| Support | ชุมชน/เอกสาร | Email support |
อีกหนึ่งระดับ
Enterprise — สำหรับองค์กรใหญ่
- Enterprise — ราคาแบบ custom (ติดต่อฝ่ายขาย) เหมาะกับองค์กรที่ต้องการ SLA 99.99%, SAML SSO, audit logs, custom environments และ infrastructure ที่ปรับแต่งได้มากขึ้น
- Add-on แยกจ่ายที่พบบ่อยบน Pro: SAML SSO $300/เดือน, HIPAA BAA $350/เดือน, Advanced Deployment Protection $150/เดือน
- ใช้เกิน Fast Data Transfer 1TB บน Pro คิดเพิ่มประมาณ $0.15/GB (ถัดจาก included allowance)
- ราคาที่แน่นอนเปลี่ยนได้ตลอด — เช็กแผนล่าสุดที่ vercel.com/pricing ก่อนตัดสินใจจริงเสมอ
03
บทที่ 3
เริ่มใช้งานทีละขั้น (Getting Started)
จาก GitHub repo ไปเป็นเว็บ live ใช้เวลาไม่กี่นาที
ลงมือทำ
Deploy ครั้งแรก
เชื่อมบัญชี GitHub (หรือ GitLab/Bitbucket) เข้ากับ Vercelสมัคร/ล็อกอินที่ vercel.com แล้วกด Connect Git Provider
Import projectเลือก repo ที่ต้องการ Vercel จะตรวจจับเฟรมเวิร์ก (เช่น Next.js) ให้อัตโนมัติ
ตั้งค่า Environment Variables (ถ้ามี)เช่น API key, database URL ใส่ใน Settings ก่อนกด Deploy
กด DeployVercel build แล้วให้ URL แบบ *.vercel.app ทันที
ทุก push ครั้งถัดไปจะ deploy ซ้ำอัตโนมัติpush เข้า main → production · push เข้า branch อื่น → preview deployment
04
บทที่ 4
ฟีเจอร์เด่น (Key Features)
สิ่งที่ทำให้ Vercel ต่างจาก hosting ทั่วไป
ฟีเจอร์หลัก
สิ่งที่ได้ตั้งแต่วันแรก
🔀 Preview Deployment ต่อ PR
ทุก pull request ได้ URL preview ของตัวเอง ให้ทีม/ลูกค้ากดดูก่อน merge จริง ไม่ต้องรอขึ้น production
🌍 Edge Network
เนื้อหาถูกกระจายผ่าน edge network ทั่วโลก ทำให้ผู้ใช้ในแต่ละภูมิภาคโหลดเว็บได้เร็ว โดยไม่ต้องตั้ง CDN เอง
⚡ Serverless / Edge Functions
รัน backend logic (เช่น Node.js, Python, Go, Ruby) แบบ serverless ใกล้ผู้ใช้ โดยไม่ต้องดูแล server เอง
🔑 Environment Variables + Custom Domain
จัดการ secret/config แยกตาม environment (dev/preview/production) และผูกโดเมนของตัวเองเข้ากับ project ได้ในไม่กี่คลิก
ต่อโดเมนของตัวเอง
เชื่อมโดเมนเข้ากับเว็บที่สร้างเอง
- ไปที่ project → Settings → Domains แล้วเพิ่มโดเมนของคุณ Vercel จะบอก DNS record (A record หรือ CNAME) ที่ต้องตั้งค่า
- ถ้าโดเมนซื้อจาก registrar อื่นแล้วใช้ Cloudflare จัดการ DNS ต้องตั้งค่า record ตามที่ Vercel แจ้ง และปิด Cloudflare Proxy (สีส้ม) ให้เป็น DNS only เพื่อให้ Vercel verify โดเมนและออก SSL ได้ถูกต้อง
- เมื่อ DNS verify สำเร็จ Vercel จะออก SSL certificate ให้อัตโนมัติ ไม่ต้องตั้งค่าเพิ่ม
- Hobby รองรับได้ 50 โดเมนต่อ project ส่วน Pro ไม่จำกัด
05
บทที่ 5
ใช้ Vercel ทำอะไรได้บ้าง (Use Cases)
งานจริงที่ Vercel เหมาะที่สุด
Use Case · 1-2
จากเว็บที่สร้างเอง สู่เว็บที่คนอื่นเข้าได้จริง
1. Deploy เว็บที่สร้างด้วย AI tool
งานนี้คืออะไร: สร้างเว็บด้วย Claude Code / Cursor / Lovable แล้วอยากให้คนอื่นเปิดดูได้จริงผ่านลิงก์ ไม่ใช่แค่รันบนเครื่องตัวเอง
ทำไม Vercel เหมาะ: เชื่อม GitHub repo แล้ว deploy ได้ในไม่กี่นาที ไม่ต้องตั้ง server/DevOps เอง
2. ทำ Preview ให้ลูกค้าดูก่อน merge
งานนี้คืออะไร: ทำฟีเจอร์ใหม่เสร็จ อยากให้ลูกค้า/ทีมรีวิวก่อนขึ้น production จริง
ทำไม Vercel เหมาะ: ทุก PR ได้ preview URL อัตโนมัติ ลูกค้ากดดู comment ได้ทันทีโดยไม่กระทบเว็บจริง
Use Case · 3-4
ต่อโดเมนธุรกิจ และรองรับทราฟฟิกสูง
3. ต่อโดเมนของธุรกิจเข้ากับเว็บที่สร้างเอง
งานนี้คืออะไร: มีโดเมนธุรกิจอยู่แล้ว (ซื้อจาก registrar หรือจัดการผ่าน Cloudflare) อยากให้ชี้ไปที่เว็บใหม่ที่ deploy บน Vercel
ทำไม Vercel เหมาะ: ตั้งค่า DNS record ไม่กี่บรรทัด ออก SSL ให้อัตโนมัติ ใช้งานได้ทันทีที่ propagate เสร็จ
4. สเกลเว็บทราฟฟิกสูงโดยไม่ต้องจัดการ server
งานนี้คืออะไร: เว็บได้รับความนิยมขึ้นมากอย่างรวดเร็ว (เช่น ไวรัลบนโซเชียล) ต้องรองรับผู้เข้าชมพุ่งพรวดโดยไม่ล่ม
ทำไม Vercel เหมาะ: edge network + serverless functions สเกลอัตโนมัติตามโหลด ไม่ต้องเผื่อ server ล่วงหน้าเอง
เทียบคู่แข่ง
Vercel vs Netlify vs Render
| Vercel | Netlify | Render |
|---|
| โฟกัสหลัก | Frontend + Next.js โดยตรง | Static site / JAMstack | Full-stack / backend-friendly |
| Free tier เชิงพาณิชย์ | ❌ ห้าม (ต้องใช้ Pro) | ✅ อนุญาต | ✅ อนุญาต |
| รูปแบบราคา | Usage-based ($20/seat + usage) | Flat-rate ต่อทีม | Flat-rate แบบคาดเดาง่าย |
| เหมาะกับ | ทีม Next.js/React ที่เน้นความเร็ว | เว็บ static เช่น Astro/Hugo | งานที่มี backend/DB ยาวนาน |
สรุปสั้น: ใช้ Next.js เลือก Vercel แทบจะทันที ส่วนงานที่เน้น static site ล้วนหรือมี backend หนัก ๆ ให้พิจารณา Netlify/Render ประกอบ
ข้อควรระวัง
ก่อนใช้จริง ต้องรู้อะไรบ้าง
- ค่าใช้จ่ายเมื่อทราฟฟิกสูง — โมเดล usage-based เกินโควตาแล้วคิดเงินเพิ่มต่อ GB/ต่อ request อาจบานปลายถ้าไม่ตั้ง spend management
- Hobby ห้ามใช้เชิงพาณิชย์ — เว็บที่หารายได้/มีโฆษณา/ใช้ทำธุรกิจ ต้องอัปเป็น Pro ตาม fair use policy
- Vendor lock-in ระดับหนึ่ง — ฟีเจอร์บางอย่าง (เช่น ISR, Edge Middleware ของ Next.js) ทำงานลื่นที่สุดบน Vercel โดยเฉพาะ ย้ายไป host อื่นอาจต้องปรับโค้ด
- ราคา/โควตาเปลี่ยนได้ตลอดเวลา — เช็กแผนล่าสุดที่ vercel.com/pricing ก่อนตัดสินใจอัปเกรดหรือประเมินงบ
"Push โค้ดขึ้น GitHub แล้วเว็บ live ทันที — ไม่ต้องจัดการ server เอง"— สรุปหัวใจของ Vercel
อยากไปต่อให้เร็วขึ้น?
เรียนสดกับโค้ช BooAI BootCamp
🏔 Vibe Code Sprint + BootCamp Chiang Mai
เวิร์กช็อปสด 1 วัน (10:00–16:00) ลงมือสร้าง AI Agent + Workflow ใช้งานจริง กลับไปใช้ได้ทันที ไม่ต้องมีพื้นฐานโค้ด
รอบเชียงใหม่ 17–18 และ 24–25 ก.ค. 2026 · Early Bird เริ่ม 7,599 บาท · รอบกรุงเทพฯ ส.ค. 2026
💻 คอร์สออนไลน์ BooAI BootCamp
เรียนได้ทุกที่ทุกเวลา — Vibe Code (Basic → Builder → Advanced), Prompt Mastery, OpenClaw DIY และ n8n Zero To Hero