Vercel กับ Serverless API: งานเล็กๆ แต่ปังได้แบบไม่ปวดหัว

เอาจริงนะ เวลานึกอยากทำ API เล็กๆ หรือเว็บที่ต้องมี backend คุยกับ database นิดหน่อยนี่ โคตรขี้เกียจ config server เลยอะ จะไปเช่า VPS มานั่งลง Ubuntu, Nginx, Node.js อะไรอีกก็ดูจะเป็นเรื่องใหญ่ไปหมดสำหรับโปรเจกต์จิ๋วๆ ที่แค่อยากได้ endpoint ง่ายๆ สักตัวสองตัว.

จนมาเจอ Vercel นี่แหละ คือมันไม่ได้ใหม่ขนาดนั้นหรอก แต่ถ้าใครยังไม่เคยลองใช้ Serverless Function ของมันนะ คือมันเวิร์คมากอะ.

คอนเซปต์ง่ายๆ คือเราเขียนโค้ดที่เป็นฟังก์ชัน (จะ Node.js, Python, Go ก็ได้) แล้วโยนขึ้นไป Vercel มันก็จะรันให้เราเป็น API endpoint เลย ไม่ต้องไปสนว่าข้างล่างมันใช้ Docker อะไรยังไง มี Lambda Function หรือเปล่า. เราแค่เขียนโค้ด จบ.

ตัวอย่างโค้ด: Next.js API Route ง่ายๆ (โคตรฮิต!)

ถ้าใครใช้ Next.js อยู่แล้วนะ การทำ API route นี่ง่ายจนน่าตกใจเลย.

สร้างไฟล์ pages/api/hello.js แบบนี้:

// pages/api/hello.js

export default function handler(req, res) {
  // บางทีเราก็อยากเช็ค method นะว่าเรียกมาแบบ GET หรือ POST
  if (req.method === 'POST') {
    // ทำอะไรบางอย่างกับ req.body ถ้าเป็น POST
    console.log('Received POST request with body:', req.body);
    return res.status(200).json({ message: 'Got your POST!', data: req.body });
  }

  // Default เป็น GET
  res.status(200).json({
    name: 'สวัสดียามบ่ายครับ จาก Vercel API',
    timestamp: new Date().toISOString()
  });
}

แค่นี้เอง! ถ้าโปรเจกต์ Next.js ของคุณเชื่อมกับ GitHub แล้ว deploy บน Vercel อยู่แล้วนะ พอ git push ไปเท่านั้นแหละ API endpoint your-domain.com/api/hello ก็พร้อมใช้เลย โคตรสะดวก.

ข้อควรระวัง/สิ่งที่ผมเคยเจอ:

1. Environment Variables: อันนี้เจอประจำเลย ตอนพัฒนา local ก็ใช้ .env.local ได้สบายๆ แต่พอ deploy ขึ้น Vercel ปุ๊บ มันไม่รู้จักเว้ย! ต้องเข้าไปตั้งค่าใน Dashboard ของ Vercel เอง หรือไม่ก็ใช้ vercel env add <KEY> <VALUE> ผ่าน CLI. อันนี้งงอยู่พักนึงว่าทำไมมันไม่อ่านให้.

CORS (Cross-Origin Resource Sharing): ถ้าคุณเรียก API จาก frontend ที่อยู่คนละโดเมน (เช่น Frontend อยู่ react-app.com แต่ API อยู่ api.vercel.app) คุณจะเจอ error CORS ทันที. ต้องไปตั้ง Access-Control-Allow-Origin ใน header ของ response ให้ถูกต้อง. สมัยก่อนผมลืมประจำ แบบว่าโคตรหัวร้อนเลย โค้ดดีแล้วแต่เรียกไม่ได้เนี่ยนะ.แก้แบบบ้านๆ ก็ประมาณนี้ในไฟล์ API ของคุณ:

// pages/api/hello.js (แก้ไขส่วนหัว)

export default function handler(req, res) {
  res.setHeader('Access-Control-Allow-Origin', '*'); // หรือเปลี่ยนเป็นโดเมน frontend ของคุณ
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  // สำหรับ preflight request ของ CORS
  if (req.method === 'OPTIONS') {
    return res.status(200).end();
  }

  // ... โค้ด API เดิมของคุณ ...

  if (req.method === 'POST') {
    console.log('Received POST request with body:', req.body);
    return res.status(200).json({ message: 'Got your POST!', data: req.body });
  }

  res.status(200).json({
    name: 'สวัสดียามบ่ายครับ จาก Vercel API',
    timestamp: new Date().toISOString()
  });
}

คือถ้าจะให้ดีจริงๆ ก็ควรจะระบุโดเมนที่อนุญาตให้ชัดเจนนะ ไม่ใช่ใส่ * ไปเลย อันนี้แค่ตัวอย่างให้เห็นภาพเฉยๆ.

สรุปส่วนตัว:

สำหรับงานเล็กๆ หรืองานที่ต้องการ prototype เร็วๆ Vercel นี่คือตัวเลือกแรกๆ เลยสำหรับผมนะ เพราะมันเร็ว โคตรง่าย ไม่ต้องมานั่งบริหารจัดการอะไรเลย แค่เขียนโค้ดแล้ว push ขึ้น Git มันก็ทำงานให้เราละ. คือถ้าคุณไม่ใช่สาย Ops จ๋าๆ ที่ชอบเซ็ตเซิร์ฟเวอร์เองนะ ลอง Vercel ดูเหอะ ชีวิตจะดีขึ้นเยอะ.