Vercel Deployment

Vercel เป็นแพลตฟอร์มสำหรับ Frontend Deployment ที่มาพร้อมกับฟีเจอร์ที่ช่วยให้การ deploy เว็บไซต์เป็นเรื่องง่าย

การเริ่มต้นใช้งาน

1. สมัครและตั้งค่า Vercel

1. ไปที่ Vercel Dashboard
2. สมัครสมาชิกด้วย GitHub account
3. เชื่อมต่อกับ GitHub repository

2. Deploy Project

มีสองวิธีในการ Deploy:

วิธีที่ 1: Deploy ผ่าน Dashboard

1. คลิก "Import Project"
2. เลือก Git Repository
3. กำหนดค่าต่างๆ:
   • Project name
   • Framework preset
   • Build settings
4. คลิก "Deploy"

วิธีที่ 2: Deploy ด้วย CLI

1. ติดตั้ง Vercel CLI:

npm

npm i -g vercel

pnpm

pnpm add -g vercel

yarn

yarn global add vercel

2. Login และ Deploy:

vercel login
vercel

การตั้งค่าที่สำคัญ

Environment Variables

1. ไปที่ Project Settings > Environment Variables
2. เพิ่ม variables ที่ต้องการ:
   • Development
   • Preview
   • Production

Custom Domains

1. ไปที่ Project Settings > Domains
2. เพิ่ม domain ของคุณ
3. ตั้งค่า DNS records ตามที่ Vercel แนะนำ

Build & Development Settings

{
  "builds": [
	{
	  "src": "package.json",
	  "use": "@vercel/static-build"
	}
  ]
}

การใช้งานขั้นสูง

Serverless Functions

// api/hello.ts
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Vercel!' })
}

Edge Functions

export default function middleware(req) {
  return new Response('Hello from the edge!')
}

Automatic HTTPS

Vercel จัดการ SSL/TLS certificates ให้อัตโนมัติ:

• Auto-renewal
• Let's Encrypt integration
• Custom certificates support

การ Monitor และ Analytics

1. Real-time Metrics

• Response times
• Error rates
• Deployment status

2. Logs

• Build logs
• Function logs
• Edge logs

Best Practices

1. Performance Optimization

   • ใช้ Image Optimization
   • เปิดใช้งาน Edge Caching
   • ตั้งค่า Cache-Control headers

2. Security

   • ตั้งค่า Environment Variables อย่างเหมาะสม
   • ใช้ Security Headers
   • เปิดใช้งาน 2FA

3. Deployment

   • ใช้ Preview Deployments
   • ตั้งค่า Git Integration
   • ทำ Automated testing

Troubleshooting

ปัญหาที่พบบ่อย

1. Build Failures

   • ตรวจสอบ build logs
   • ตรวจสอบ dependencies
   • ตรวจสอบ build command

2. Performance Issues

   • ใช้ Vercel Analytics
   • ตรวจสอบ Edge Network
   • ตั้งค่า caching

3. Domain Configuration

   • ตรวจสอบ DNS records
   • รอ DNS propagation
   • ตรวจสอบ SSL certificates

Resources

• Vercel Documentation
• Deployment Guide
• CLI Documentation