Vercel — deploy qilish, environment, domain sozlash

~20 daq · Next.js · Deployment va DevOps

Muammodan boshlaylik

Next.js ilovasi tayyor. Uni internetga chiqarish uchun: server, Node.js, SSL sertifikat, CDN statik fayllar uchun, rasm optimizatsiyasi, ISR keshi, serverless funksiyalar, har bir Pull Request uchun sinov manzili...

O'z serverda bularning hammasini sozlash — kunlar (68-dars). Vercel — Next.js yaratuvchilarining platformasi: bularning hammasi git push bilan.

Hayotiy o'xshatma

Kitob chop etish. O'zingiz bosmaxona sotib olib, qog'oz, bo'yoq va muqova masalasini hal qilishingiz mumkin. Yoki tayyor nashriyotga qo'lyozmani topshirasiz — ular chop etadi, do'konlarga tarqatadi, qayta nashr qiladi. Nashriyot sizning kitob janringizni eng yaxshi biladi, chunki u shu janrni yaratgan.

Birinchi deploy

  1. Kodni GitHub (yoki GitLab, Bitbucket) ga yuklang
  2. vercel.com — GitHub bilan kiring
  3. Add New → Project → repozitoriyni tanlang (Import)
  4. Vercel Next.js ni avtomatik taniydi — build sozlamalari tayyor
  5. Environment Variables — .env.local dagi o'zgaruvchilarni qo'shing (65-dars)
  6. Deploy

Bir-ikki daqiqada: https://dokon-xyz.vercel.app — HTTPS, CDN, hammasi tayyor.

CLI orqali

npm i -g vercel
vercel          # preview deploy
vercel --prod   # production

Avtomatik deploy

Harakat Natija
main ga push Production yangilanadi
Boshqa branch ga push / Pull Request Preview — alohida manzil: dokon-git-yangi-dizayn-jamoa.vercel.app
Build xatosi Production o'zgarmaydi, eski versiya ishlayveradi

Preview manzillar — jamoa uchun ajoyib: dizayner, menejer yoki mijoz o'zgarishni production dan oldin haqiqiy havolada ko'radi va izoh qoldiradi.

Rollback

Deployments → oldingi muvaffaqiyatli deploy → Promote to Production (yoki Instant Rollback) — bir necha soniyada eski versiyaga qaytish, qayta build siz.

Environment Variables

Project → Settings → Environment Variables

Muhit Qachon ishlatiladi
Production main deploy lari
Preview Pull Request va boshqa branch lar
Development vercel dev va vercel env pull 
vercel env pull .env.local     # lokalga tortib olish
  • Preview uchun test kalitlari (Stripe test, test bazasi) — production ma'lumotlari preview larda buzilmasin
  • Maxfiy o'zgaruvchilarni Sensitive deb belgilash — ular keyin panelda ko'rinmaydi
  • NEXT_PUBLIC_ o'zgaruvchisini o'zgartirgandan keyin — qayta deploy (build da yoziladi)

[!WARNING] Preview deploy lar standart holatda ochiq manzilda — ularga production bazasini ulasangiz, tasodifiy odam (yoki qidiruv boti) preview orqali haqiqiy ma'lumotlarni o'zgartirishi mumkin. Preview uchun alohida baza (Neon branching — 48-dars) va Deployment Protection (parol yoki Vercel login) ni yoqing.

Domain

Project → Settings → Domains → Add → dokon.uz

DNS sozlamalari (domen registratoringizda):

Yozuv Nom Qiymat
A @ Vercel ko'rsatgan IP
CNAME www Vercel ko'rsatgan manzil (masalan, cname.vercel-dns.com)
  • SSL sertifikat — avtomatik
  • www.dokon.uz → dokon.uz yo'naltirishni panelda tanlash mumkin
  • DNS o'zgarishlari tarqalishi — bir necha daqiqadan bir necha soatgacha

Vercel ning Next.js uchun imkoniyatlari

Imkoniyat Nima
CDN Statik sahifalar va fayllar butun dunyo bo'ylab
Serverless / Fluid functions Dinamik sahifalar, Route Handler, Server Action
ISR revalidate va revalidateTag — global kesh bilan (59-dars)
Image Optimization next/image — avtomatik
Analytics, Speed Insights Tashriflar va Core Web Vitals (54-dars)
Cron Jobs vercel.json da jadval bo'yicha Route Handler chaqirish
Storage / Marketplace Neon, Upstash Redis, Blob — bir bosishda

Funksiya regioni

Settings → Functions → Function Region — bazangizga yaqin region (masalan, Frankfurt fra1). Baza Frankfurtda, funksiya AQSh da bo'lsa — har bir so'rov sekin (48-dars).

Cron

// vercel.json
{
  "crons": [{ "path": "/api/cron/eski-savatlar", "schedule": "0 22 * * *" }]
}

// app/api/cron/eski-savatlar/route.ts
export async function GET(request: Request) {
  if (request.headers.get('authorization') !== `Bearer ${process.env.CRON_SECRET}`) {
    return new Response('Ruxsat yo\'q', { status: 401 })
  }
  await prisma.savat.deleteMany({ where: { yangilangan: { lt: new Date(Date.now() - 30 * 864e5) } } })
  return Response.json({ ok: true })
}

Cheklovlar va narx

  • Bepul Hobby tarif — shaxsiy, notijorat loyihalar uchun; tijorat uchun Pro
  • Funksiyalar bajarilish vaqti, so'rovlar, rasm optimizatsiyasi, trafik — limitlar bor
  • Katta trafikda xarajat tez o'sishi mumkin — Spend Management da chegara qo'ying

[!INFO] Tarif shartlari va limitlar vaqti-vaqti bilan o'zgaradi — joriy qiymatlarni vercel.com/pricing dan tekshiring. Muqobillar: Netlify, Cloudflare (OpenNext orqali), Railway, Render yoki o'z serveringiz (67–68-darslar).

Tez-tez uchraydigan xatolar

1. Environment o'zgaruvchilarini qo'shmaslik

Lokal ishlaydi, Vercel da undefined — build yoki runtime xatosi.

2. Build da baza migratsiyasi

prisma migrate deploy ni build ga qo'shsangiz — har bir preview ham production bazasini migratsiya qiladi. Migratsiyani faqat production uchun yoki alohida qadamda (69-dars).

3. Katta fayllarni public/ ga yuklash

Foydalanuvchi yuklagan fayllar — deploy ichida emas, Blob/S3 da. Har deploy da public/ qayta yaratiladi.

Xulosa

GitHub → Vercel → Import → Environment Variables → Deploy
main → Production; branch / PR → Preview manzil; Instant Rollback
Env: Production / Preview / Development; vercel env pull
Preview — test kalitlari, alohida baza, Deployment Protection
Domain: A va CNAME yozuvlari, SSL avtomatik
Funksiya regioni — bazaga yaqin; Cron — vercel.json + CRON_SECRET
Limitlar va narxlarni kuzating

Keyingi dars

67-dars: Docker — Next.js ni containerlashtirish

Next.js ni istalgan serverda bir xil ishlaydigan container ga qadoqlash.