Vercel дээр deploy хийх

Vercel бол Next.js-г хөгжүүлсэн компани тул хоёрын хоорондын нийцтэй байдал хамгийн өндөр байдаг. Localhost дээр ажиллаж байгаа аппаа дэлхийн хэрэглэгчид хүртээмжтэй болгоход хэдхэн минут болдог. Код push хийхэд Vercel автоматаар build хийж, deploy хийж, HTTPS болон CDN тохируулдаг — та бүгдийг гараар хийх шаардлагагүй.

GitHub repository бэлтгэх

Vercel GitHub-тай шууд холбогддог тул эхлээд кодоо GitHub-д байршуулна:

# Git repo эхлүүлэх
git init
git add .
git commit -m "feat: initial Next.js setup"

# GitHub дээр шинэ repo үүсгэж, remote нэмнэ
git remote add origin https://github.com/tanii-username/ulaanbaatar-app.git
git branch -M main
git push -u origin main

.gitignore файлд нууц мэдээлэл болон хэрэггүй файлыг оруулахгүй байхыг шалгана:

# .gitignore
.env.local
.env*.local
.next/
node_modules/
.DS_Store
*.log

.env.local файл хэзээ ч Git-д орох ёсгүй — энэ файлд Supabase key байдаг тул алдаа гарах юм бол нууц мэдээлэл задарна.

Vercel дээр project холбох

1. vercel.com хаягаар ороод GitHub account-аар бүртгүүлнэ
2. Add New Project товч дарна
3. GitHub repository-аа сонгоно — ulaanbaatar-app
4. Framework Preset автоматаар Next.js гэж таних болно
5. Environment Variables хэсэгт .env.local-н утгуудаа оруулна:

# Vercel dashboard → Settings → Environment Variables
NEXT_PUBLIC_SUPABASE_URL        = https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY   = eyJ...
SUPABASE_SERVICE_ROLE_KEY       = eyJ...

6. Deploy товч дарна — анхны deploy эхэлнэ

Build log хэсэгт next build ажиллаж байгааг бодит цагаар харж болно. Алдаа гарвал яг тэнд харагдана.

Vercel project тохиргоо

vercel.json файл үүсгэж project-н тохиргоог тогтмол болгоно:

{
  "buildCommand": "next build",
  "outputDirectory": ".next",
  "framework": "nextjs",
  "regions": ["sin1"]
}

sin1 бол Singapore region — Монголоос хамгийн ойр Vercel datacenter. Хэрэглэгчид хуудас хурдан ачаалагдана.

Automatic deployment

GitHub-д push хийх бүрт Vercel автоматаар deploy хийдэг:

# Feature branch-д ажиллаж байгаа үед
git checkout -b feat/lesson-sidebar
# ... код бичнэ ...
git add .
git commit -m "feat: add lesson sidebar navigation"
git push origin feat/lesson-sidebar

main биш branch push хийхэд Vercel Preview deployment үүсгэнэ — өөр URL-тэй тест орчин. main-д merge хийхэд Production deployment автоматаар ажиллана.

| Deploy төрөл | Тохиолдол | URL | | ------------ | -------------------- | ------------------------------- | | Production | main branch-д push | ulaanbaatar.app | | Preview | Бусад branch-д push | project-git-branch.vercel.app |

Deploy алдааг засах

Хамгийн түгээмэл алдаанууд:

# Build алдаа: TypeScript error
Type 'string | undefined' is not assignable to type 'string'
# Засал: тодорхой type шалгалт нэмнэ

# Build алдаа: module олдсонгүй
Cannot find module '@/components/Button'
# Засал: import замыг шалгана

# Runtime алдаа: environment variable undefined
Error: NEXT_PUBLIC_SUPABASE_URL is not defined
# Засал: Vercel dashboard-д env variable нэмэх

Vercel dashboard → Deployments → тухайн deploy → Build Logs дарахад алдааны дэлгэрэнгүй харагдана. Ихэнх алдаа localhost-д ажиллахад илэрдэг тул npm run build командыг deploy хийхийн өмнө ажиллуулах нь зүйтэй.

Дараагийн хичээлд:

Vercel дээр custom domain холбох, environment-н тохиргоо, redirect болон redirect rule бичих аргуудыг сурна.