Frontend Academy · บทเรียน

การนำไปใช้งานบน Vercel, Netlify และ Cloudflare Pages

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

บทเรียน 2 จาก 416 ขั้นตอน

การนำไปใช้งานบน Vercel, Netlify และ Cloudflare Pages เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

สามแพลตฟอร์มโฮสต์ฟรอนต์เอนด์สมัยใหม่

Vercel, Netlify และ Cloudflare Pages เป็นแพลตฟอร์มชั้นนำสำหรับนำแอปฟรอนต์เอนด์ไปใช้งาน ทุกแพลตฟอร์มมีการนำไปใช้งานผ่าน Git, สาขาสำหรับดูตัวอย่าง, โดเมนแบบกำหนดเอง, CDN ที่เอดจ์ และฟังก์ชันแบบไร้เซิร์ฟเวอร์ เลือกใช้สักหนึ่งแพลตฟอร์มแล้วใช้แพลตฟอร์มนั้นอย่างต่อเนื่อง

Vercel — สร้างมาเพื่อ Next.js

สร้างโดยทีม Next.js พร้อมการผสานรวมกับ Next.js ระดับแนวหน้า ได้แก่ การปรับแต่งรูปภาพแบบไม่ต้องตั้งค่า, ISR, ฟังก์ชันที่เอดจ์ และ Speed Insights นอกจากนี้ยังรองรับ Vite, Nuxt, Astro และเฟรมเวิร์กแบบสแตติกส่วนใหญ่

การนำไปใช้งานบน Vercel

เชื่อมต่อที่เก็บโค้ดบน GitHub/GitLab/Bitbucket Vercel จะตรวจจับเฟรมเวิร์กโดยอัตโนมัติ เรียกใช้ build และนำแอปไปใช้งาน

# Manual deploy (any project):
npm install -g vercel
vercel login
vercel       # preview deploy
vercel --prod  # production deploy

# Or push to main — auto-deploys via Git integration.

การกำหนดค่า vercel.json

เขียนทับค่าเริ่มต้นได้ เช่น คำสั่งสร้าง การเปลี่ยนเส้นทาง ส่วนหัว และการเขียนเส้นทางใหม่

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "headers": [{
    "source": "/(.*)",
    "headers": [{ "key": "X-Frame-Options", "value": "DENY" }]
  }],
  "redirects": [{ "source": "/old", "destination": "/new", "permanent": true }]
}

Netlify — ผู้บุกเบิก

เป็นผู้บุกเบิกการนำเว็บไซต์สแตติกสมัยใหม่ไปใช้งาน โดดเด่นด้านการจัดการแบบฟอร์ม ระบบระบุตัวตน และการวิเคราะห์ข้อมูล มี Netlify Functions และ Edge Functions สำหรับการทำงานแบบไร้เซิร์ฟเวอร์ และรองรับ Vite/Hugo/Eleventy ได้เป็นอย่างดี

การนำไปใช้งานบน Netlify

เชื่อมต่อที่เก็บโค้ด หรือลากแล้ววางโฟลเดอร์ที่สร้างเสร็จแล้ว กำหนดค่าผ่านแดชบอร์ดหรือ netlify.toml

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200   # SPA fallback

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"

Netlify CLI

พัฒนาในเครื่องพร้อมฟังก์ชันแบบไร้เซิร์ฟเวอร์

npm install -g netlify-cli
netlify login
netlify init
netlify dev       # local server with functions
netlify deploy    # preview
netlify deploy --prod

Cloudflare Pages

นำแอปไปใช้งานบนเครือข่ายเอดจ์ทั่วโลกของ Cloudflare โดยใช้ Pages Functions เพื่อทำงานแบบไร้เซิร์ฟเวอร์บนรันไทม์ Workers มีแพ็กเกจฟรีที่ให้ใช้งานมาก และเหมาะอย่างยิ่งกับ Astro, Hono และ Remix

การนำไปใช้งานบน Cloudflare Pages

เชื่อมต่อที่เก็บโค้ดผ่านแดชบอร์ด Cloudflare หรือใช้ wrangler CLI

# Direct upload via wrangler:
npm install -g wrangler
wrangler login
wrangler pages deploy ./dist --project-name=my-site

# Or push to GitHub — auto-deploys.

wrangler.toml สำหรับ Pages

Cloudflare Pages ใช้ wrangler.toml สำหรับการกำหนดค่า Workers/Functions

# wrangler.toml
name = "my-site"
compatibility_date = "2024-01-01"
pages_build_output_dir = "dist"

[vars]
API_URL = "https://api.example.com"

[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "..."

การนำไปใช้งานสำหรับดูตัวอย่าง

ทั้งสามแพลตฟอร์มจะสร้าง URL ที่ไม่ซ้ำกันสำหรับทุกสาขาของ PR ผู้ตรวจสอบสามารถใช้ click เพื่อทดสอบการเปลี่ยนแปลงแยกจากส่วนอื่นได้ ปัจจุบันนี่คือเวิร์กโฟลว์มาตรฐานของทีม

ตัวแปรสภาพแวดล้อม

ทั้งสามแพลตฟอร์มมีตัวแปรสำหรับแต่ละสภาพแวดล้อม ได้แก่ production, preview และ development ผ่านแดชบอร์ดหรือ CLI ตัวแปรฟรอนต์เอนด์ต้องมีคำนำหน้า (Vite: VITE_, Next: NEXT_PUBLIC_) จึงจะถูกส่งไปยังเบราว์เซอร์

# Vercel:
vercel env add API_URL production

# Netlify:
netlify env:set API_URL https://api.example.com

# Cloudflare Pages:
wrangler pages secret put API_URL

โดเมนแบบกำหนดเองและ SSL

ทั้งสามแพลตฟอร์มจัดการใบรับรอง SSL โดยอัตโนมัติ (Let's Encrypt) ชี้ระเบียน DNS A/CNAME ของคุณไปยังปลายทางของแพลตฟอร์ม แล้วแพลตฟอร์มจะออกและต่ออายุใบรับรองให้ โดเมนแบบกำหนดเองใช้งานได้ฟรีในทุกแพ็กเกจแบบชำระเงิน

การเลือกจากสามแพลตฟอร์ม

Vercel: เหมาะที่สุดสำหรับ Next.js, DX เรียบร้อยใช้งานง่าย แต่มีราคาแพงกว่าเล็กน้อย Netlify: เหมาะที่สุดสำหรับแบบฟอร์มและระบบระบุตัวตน พร้อมระบบปลั๊กอินที่พัฒนามายาวนาน Cloudflare Pages: ประสิทธิภาพที่เอดจ์ดีที่สุด ต้นทุนต่ำที่สุดเมื่อขยายขนาด และผสานรวมกับ Workers ได้ดี ทั้งสามแพลตฟอร์มยอดเยี่ยม

ตรวจสอบอย่างรวดเร็ว

วิธีมาตรฐานในการสร้าง URL พรีวิวที่พร้อมนำไปใช้งานสำหรับ PR บน Vercel/Netlify/Cloudflare Pages คืออะไร

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป: การโฮสต์ฟรอนต์เอนด์

Vercel: การผสานรวมกับ Next.js ดีที่สุด Netlify: แบบฟอร์ม/ระบบระบุตัวตน/ปลั๊กอิน Cloudflare Pages: ประสิทธิภาพที่เอดจ์และต้นทุนต่ำที่สุด ทั้งสามแพลตฟอร์มมีการนำไปใช้งานอัตโนมัติผ่าน Git, URL พรีวิวสำหรับแต่ละ PR, ตัวแปร env สำหรับแต่ละสภาพแวดล้อม, SSL อัตโนมัติ และโดเมนแบบกำหนดเอง กำหนดค่าผ่านแดชบอร์ดหรือไฟล์กำหนดค่าเฉพาะแพลตฟอร์ม (vercel.json, netlify.toml, wrangler.toml)

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 41
บทเรียน: 163

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “การนำไปใช้งานบน Vercel, Netlify และ Cloudflare Pages” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การนำไปใช้งานบน Vercel, Netlify และ Cloudflare Pages” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การนำไปใช้งานบน Vercel, Netlify และ Cloudflare Pages”

เชื่อมต่อรีโพของคุณกับแต่ละแพลตฟอร์ม ตั้งค่าคำสั่งบิลด์และไดเรกทอรีเอาต์พุต และทำความเข้าใจการนำไปใช้งานตัวอย่างสำหรับแต่ละแบรนช์ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การนำไปใช้งานบน Vercel, Netlify และ Cloudflare Pages” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

GitHub Actions สำหรับฟรอนต์เอนด์: ตรวจรูปแบบ ทดสอบ และบิลด์
การนำไปใช้งานบน Vercel, Netlify และ Cloudflare Pages
ตัวแปรสภาพแวดล้อมใน CI
การตรวจสอบ Lighthouse อัตโนมัติ

← กลับไปที่ Frontend Academy