Deploy App AI Len Vercel: Tu Zero Den Production

Ban da xay dung xong mot ung dung AI chay tot tren may local. Bay gio den buoc ma nhieu developer gap kho khan: dua app len production voi hieu nang on dinh, quan ly environment dung cach va kha nang scale hieu qua ve chi phi.

Bai huong dan nay se dua ban qua tung buoc deploy ung dung AI len Vercel, tu thiet lap ban dau den cau hinh san sang cho production. Du ban dang lam viec voi OpenAI, Anthropic hay bat ky LLM provider nao khac, cac pattern deploy o day deu ap dung duoc.

Yeu cau truoc khi bat dau

Truoc khi bat dau, ban can chuan bi:

• Mot ung dung AI dang hoat dong (khuyen dung Next.js, nhung bat ky framework nao Vercel ho tro deu duoc)
• Tai khoan Vercel (free tier la du de bat dau)
• Node.js 18+ da cai dat tren may
• API keys cua LLM provider da san sang

Buoc 1: Cai dat Vercel CLI

Vercel CLI cho ban quyen kiem soat truc tiep viec deployment tu terminal.

npm install -g vercel
vercel login

Sau khi dang nhap, kiem tra ket noi:

vercel whoami

Buoc 2: Chuan bi cau truc du an

Mot AI app tieu bieu deploy len Vercel co cau truc nhu sau:

my-ai-app/
├── app/
│   ├── api/
│   │   └── chat/
│   │       └── route.ts    # AI endpoint
│   ├── layout.tsx
│   └── page.tsx
├── .env.local              # Secrets local (khong bao gio commit)
├── .gitignore
├── next.config.js
└── package.json

Dam bao .gitignore cua ban bao gom .env.local va bat ky file nao chua API keys.

Buoc 3: Cau hinh AI API Route

Day la mot streaming AI endpoint chuan hoat dong tot tren Vercel:

// app/api/chat/route.ts
import { StreamingTextResponse } from 'ai';
 
export const runtime = 'edge'; // Dung edge de giam latency
 
export async function POST(req: Request) {
  const { messages } = await req.json();
 
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
    },
    body: JSON.stringify({
      model: 'gpt-4o',
      messages,
      stream: true,
    }),
  });
 
  return new StreamingTextResponse(response.body);
}

Directive runtime = 'edge' rat quan trong. Edge functions khoi dong nhanh hon va co latency thap hon cho streaming responses so voi serverless functions.

Buoc 4: Thiet lap Environment Variables

Khong bao gio hardcode API keys. Su dung he thong environment variable cua Vercel:

# Them API key vao Vercel
vercel env add OPENAI_API_KEY
 
# Ban se duoc hoi gia tri va environments nao ap dung
# Chon: Production, Preview, va Development

Voi nhieu keys, lap lai qua trinh:

vercel env add ANTHROPIC_API_KEY
vercel env add DATABASE_URL

Ban cung co the quan ly environment variables trong Vercel dashboard tai Project Settings > Environment Variables.

Buoc 5: Cau hinh vercel.json

Tao file vercel.json tai root cua du an de tinh chinh deployment:

{
  "framework": "nextjs",
  "regions": ["iad1"],
  "functions": {
    "app/api/chat/route.ts": {
      "maxDuration": 60
    }
  }
}

Giai thich cac thiet lap quan trong:

• regions: Deploy gan nguoi dung hoac LLM provider cua ban. iad1 (US East) phu hop voi OpenAI va Anthropic APIs.
• maxDuration: AI responses co the mat thoi gian. Timeout mac dinh 10 giay thuong qua ngan. Tang len 60 giay cho cac prompt phuc tap. Plan Pro cho phep toi da 300 giay.

Buoc 6: Deploy len Production

Chay deployment dau tien:

# Preview deployment (tao URL duy nhat)
vercel
 
# Production deployment
vercel --prod

CLI se tu dong nhan dien framework va ap dung build settings phu hop. Deployment dau tien mat khoang mot den hai phut trong khi Vercel cache dependencies.

Buoc 7: Cau hinh Custom Domain (Tuy chon)

vercel domains add yourdomain.com

Lam theo huong dan DNS ma Vercel cung cap. Viec propagation thuong mat vai phut voi hau het cac registrar.

Buoc 8: Thiet lap Monitoring va Logs

Sau khi deploy, theo doi cac AI endpoints:

# Stream logs real-time
vercel logs --follow
 
# Kiem tra cac deployments gan day
vercel ls

Trong Vercel dashboard, su dung tab Functions de theo doi:

• So luong invocation va duration
• Ty le loi
• Tan suat cold start

Meo thuc te cho AI Apps tren Vercel

Xu ly Timeouts dung cach

Cac cuoc goi LLM co the cham. Implement xu ly timeout phia client:

const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 55000);
 
try {
  const response = await fetch('/api/chat', {
    method: 'POST',
    body: JSON.stringify({ messages }),
    signal: controller.signal,
  });
  // xu ly response
} finally {
  clearTimeout(timeout);
}

Su dung Streaming de cai thien UX

Streaming responses cam giac nhanh hon voi nguoi dung du tong thoi gian generate la nhu nhau. Vercel AI SDK lam viec nay don gian:

npm install ai

Quan ly chi phi bang Rate Limiting

Bao ve API keys khoi bi lam dung. Them rate limiting co ban su dung Vercel KV:

import { kv } from '@vercel/kv';
 
export async function POST(req: Request) {
  const ip = req.headers.get('x-forwarded-for') ?? 'unknown';
  const requests = await kv.incr(`rate:${ip}`);
 
  if (requests === 1) {
    await kv.expire(`rate:${ip}`, 60); // Cua so 60 giay
  }
 
  if (requests > 10) {
    return new Response('Rate limited', { status: 429 });
  }
 
  // Tiep tuc logic AI...
}

Cache cac truy van lap lai

Neu app cua ban xu ly cac truy van tuong tu thuong xuyen, cache responses de giam chi phi API:

export const revalidate = 3600; // Cache 1 gio
 
// Hoac dung Vercel KV de kiem soat tot hon
const cached = await kv.get(`cache:${queryHash}`);
if (cached) return new Response(cached);

Dat gioi han chi tieu

Trong Vercel dashboard, vao Settings > Billing > Spend Management de dat gioi han cung. Dieu nay ngan chan hoa don bat ngo neu AI endpoint nhan luong traffic bat thuong.

Cac van de deploy thuong gap

Van de: Loi function timeout Giai phap: Tang maxDuration trong vercel.json va dam bao plan cua ban ho tro duration can thiet.

Van de: Environment variables khong hoat dong Giai phap: Redeploy sau khi them variables. Preview deployments can variable duoc gan cho environment "Preview".

Van de: Loi CORS tu frontend Giai phap: Them headers phu hop vao API route:

export async function OPTIONS() {
  return new Response(null, {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'POST',
      'Access-Control-Allow-Headers': 'Content-Type',
    },
  });
}

Buoc tiep theo

Sau khi AI app da live tren Vercel, ban nen can nhac:

• Them analytics de theo doi patterns su dung
• Implement A/B testing cho cac cau hinh model khac nhau
• Thiet lap preview deployments cho pull requests
• Tich hop voi database de luu lich su hoi thoai