วิธีสร้างแอป Server‑less ด้วย Next.js API Routes บน Vercel อย่างปลอดภัย

การพัฒนาแอปพลิเคชันแบบ Server‑less ด้วย Next.js API Routes บน Vercel ทำให้เราสามารถโฟกัสที่ฟีเจอร์หลักของผลิตภัณฑ์ได้โดยไม่ต้องจัดการเซิร์ฟเวอร์เอง แต่เพื่อให้ระบบทำงานได้อย่างมั่นคงและปลอดภัย เราต้องใส่ใจในขั้นตอนตั้งแต่การเตรียมสภาพแวดล้อมจนถึงการตรวจสอบหลัง Deploy

ทำความเข้าใจ Server‑less กับ Next.js API Routes — Overview

Server‑less คือแนวคิดที่ให้ผู้พัฒนามอบหมายงานประมวลผลไปยังฟังก์ชันอิสระ ซึ่งจะทำงานตามคำขอและหยุดเมื่อเสร็จ การใช้ API Routes ของ Next.js ทำให้เราสามารถเขียนฟังก์ชันเหล่านี้ในโฟลเดอร์ `pages/api` แล้ว Vercel จะจัดการเป็น Lambda Function ให้โดยอัตโนมัติ

• **ฟังก์ชันสั้น: เหมาะกับงานที่ต้องทำเสร็จเร็ว (≤ 1 วินาที)
• **ไม่มีเซิร์ฟเวอร์คงที่: ลดค่าใช้จ่ายและภาระบำรุงรักษา
• **สเกลอัตโนมัติ: รองรับปริมาณคำขอสูงโดยไม่ต้องตั้งค่าขยายตัวเอง

เตรียมสภาพแวดล้อมการพัฒนา — Setup

ก่อนเริ่มเขียนโค้ด ควรตรวจสอบว่ามีเครื่องมือพื้นฐานครบถ้วนเพื่อหลีกเลี่ยงปัญหาในขั้นตอนต่อไป

• ติดตั้ง Node.js รุ่น ≥ 14 (รองรับ ES Modules)
• มี npm หรือ yarn สำหรับจัดการแพคเกจ
• สมัครบัญชี Vercel และทำการยืนยันอีเมลแล้ว
• ตั้งค่า Git เพื่อให้ Vercel สามารถดึงโค้ดจาก Repository

ควรใช้เครื่องมือเวอร์ชันเดียวกันระหว่างทีมพัฒนาและ CI/CD เพื่อลดความขัดแย้งของ dependency

สร้างโปรเจกต์ Next.js พื้นฐาน — Create Project

การเริ่มต้นด้วยเทมเพลตพื้นฐานช่วยให้เราโฟกัสที่ API ได้เร็วขึ้น

• **สร้างโปรเจกต์: `npx create-next-app my-serverless-app`
• **เข้าไปในโฟลเดอร์: `cd my-serverless-app`
• **ติดตั้ง TypeScript (ถ้าต้องการ): `touch tsconfig.json && npm install --save-dev typescript @types/react @types/node`

จากนั้นรัน `npm run dev` เพื่อยืนยันว่าแอปทำงานบน `http://localhost:3000` ได้โดยไม่มีข้อผิดพลาด

กำหนด API Route ให้ทำงานแบบ Server‑less — API Routes

Next.js จะถือไฟล์ภายใน `pages/api` เป็นฟังก์ชันที่ Vercel แปลงเป็น Lambda

• สร้างไฟล์ใหม่ `pages/api/hello.ts`

```ts import type { NextApiRequest, NextApiResponse } from 'next'

export default function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method !== 'GET') { res.setHeader('Allow', ['GET']) return res.status(405).end(`Method ${req.method} Not Allowed`) } res.status(200).json({ message: 'สวัสดีจาก Server‑less!' }) } ```

• ตรวจสอบการทำงานโดยเรียก `http://localhost:3000/api/hello`

**เคล็ดลับ: ใส่การตรวจสอบ HTTP method ตั้งแต่ต้น จะช่วยลดโอกาสรับคำขอที่ไม่ต้องการและลดภาระการประมวลผล

ปรับปรุงความปลอดภัยของ API — Security

แม้ Server‑less จะมีพื้นฐานที่ปลอดภัยแล้ว เราก็ยังต้องเสริมมาตรการเพิ่มเติมเพื่อป้องกันการโจมตีทั่วไป

• **ใช้ CORS อย่างระมัดระวัง: จำกัดแหล่งที่มาที่อนุญาต

```ts import Cors from 'cors' const cors = Cors({ methods: ['GET', 'POST'], origin: 'https://mydomain.com' }) ```

• **ทำการตรวจสอบ Token: แนะนำให้ใช้ JWT หรือ OAuth 2.0
• **ป้องกัน Rate‑limiting: ปิดกั้น IP ที่ส่งคำขอเกินกำหนด
• **หลีกเลี่ยงข้อมูลลับในโค้ด: ใช้ Environment Variables ของ Vercel

อย่าลืมตั้งค่า `VERCEL_ENV` ให้เป็น `production` ก่อน Deploy เพื่อให้ตัวแปรสภาพแวดล้อมทำงานตามที่คาดหวัง

ตั้งค่า Vercel สำหรับการ Deploy — Deploy on Vercel

Vercel มีระบบ CI/CD อัตโนมัติที่เชื่อมต่อกับ Git ทำให้ขั้นตอน Deploy ง่ายมาก

• เชื่อมต่อ Repository ของโปรเจกต์กับ Vercel ผ่านหน้า Dashboard
• ตั้งค่า Environment Variables เช่น `NEXT_PUBLIC_API_URL` หรือ `JWT_SECRET` ในเมนู Settings Environment Variables
• กำหนด Build Command: `npm run build` และ Output Directory: `.next` (ค่าเริ่มต้น)

หลังจากการ Push ไปยังสาขา `main` Vercel จะทำการ Build, Deploy แล้วให้ URL ที่เป็น Production พร้อม SSL โดยอัตโนมัติ

ตรวจสอบและมอนิเตอร์หลัง Deploy — Monitoring

แม้ระบบจะทำงานบน Lambda แต่เรายังต้องตรวจสอบประสิทธิภาพและความปลอดภัยอย่างต่อเนื่อง

• ใช้ Vercel Analytics เพื่อติดตาม Latency, Error Rate และ Request Count
• เปิด Logs ใน Dashboard เพื่อดูรายละเอียดข้อผิดพลาดของแต่ละฟังก์ชัน
• ตั้งค่า Alert บน Vercel หรือผ่านบริการเช่น Sentry เมื่อพบ Exception ที่ไม่คาดคิด

ควรทำการทดสอบ Load Testing อย่างน้อยเดือนละครั้งเพื่อประเมินขีดจำกัดของ Function Timeout (ปกติ 10 วินาที) และปรับเพิ่ม `maxDuration` หากจำเป็น

สรุป — Summary

การสร้างแอป Server‑less ด้วย Next.js API Routes บน Vercel ไม่ได้ซับซ้อน หากเราปฏิบัติตามขั้นตอนพื้นฐานและเสริมความปลอดภัยอย่างเหมาะสม

• เตรียมเครื่องมือ: Node, Git, Vercel Account
• สร้างโปรเจกต์ Next.js แล้วเพิ่ม API Route ใน `pages/api`
• ปรับ CORS, ตรวจสอบ Token, ใช้ Rate‑limiting และ Environment Variables เพื่อความปลอดภัย
• Deploy ผ่าน Vercel โดยตั้งค่า Environment Variables ให้ครบถ้วน
• มอนิเตอร์ด้วย Vercel Analytics / Logs และตั้ง Alert เพื่อตอบสนองเร็ว

ทำตามแนวทางเหล่านี้ แอปของคุณจะพร้อมรับการสเกลแบบอัตโนมัติ พร้อมความปลอดภัยระดับ Production บนคลาวด์ของ Vercel.