Deployment — Vercel, Netlify ga deploy qilish

~15 daq · React · Ekotizim va Amaliyot

Muammodan boshlaylik

Ilovangiz tayyor. localhost:5173 da ajoyib ishlaydi. Endi uni do'stlaringizga, mijozga yoki ish beruvchiga ko'rsatish kerak — ular sizning kompyuteringizga kira olmaydi.

Ilovani internetda doimiy manzilga chiqarish — deployment (deploy qilish). Bir necha yil oldin bu server sotib olish, Linux sozlash, nginx, SSL sertifikat va qo'lda fayl yuklashni talab qilardi. Bugun React SPA uchun bu — bir necha daqiqalik ish va ko'pincha bepul.

Build — production versiya

npm run build

dist/
├── index.html
├── assets/
│   ├── index-8f3a2c.js       // barcha JS — minify qilingan, hash bilan
│   ├── index-b4d1e9.css
│   └── logo-a1b2c3.svg
└── favicon.svg

Vite dist/ papkasida statik fayllar yaratadi: HTML, CSS, JS, rasmlar. React SPA uchun server kerak emas — istalgan statik hosting bu fayllarni berishi kifoya.

Deploy qilishdan oldin lokal tekshirish:

npm run preview          # dist/ ni localhost:4173 da ochadi

[!WARNING] npm run dev da ishlagan narsa production da ishlamasligi mumkin: katta-kichik harflar (Windows da Button.jsx va button.jsx bir xil, Linux serverda — yo'q), environment o'zgaruvchilar, nisbiy yo'llar. Deploy dan oldin har doim build + preview bilan tekshiring.

Environment o'zgaruvchilar

API manzili development va production da har xil:

# .env.development
VITE_API_URL=http://localhost:3000/api

# .env.production
VITE_API_URL=https://api.dokon.uz/v1

const api = axios.create({ baseURL: import.meta.env.VITE_API_URL });
  • Vite faqat VITE_ bilan boshlanadigan o'zgaruvchilarni client kodiga beradi
  • Ular build paytida JavaScript ga yozib qo'yiladi — o'zgartirsangiz, qayta build kerak
  • .env.local — shaxsiy sozlamalar, .gitignore da bo'lsin

[!WARNING] VITE_ o'zgaruvchilar — ochiq: ular brauzerga yuboriladigan JavaScript ichida, har kim DevTools da ko'ra oladi. Maxfiy kalitlar (to'lov tizimi maxfiy kaliti, ma'lumotlar bazasi paroli, OpenAI kaliti) hech qachon VITE_ o'zgaruvchiga qo'yilmasin. Ular faqat serverda (backend, serverless funksiya) bo'lishi kerak. Frontend da faqat ochiq qiymatlar: API manzili, ochiq kalitlar (publishable key), analitika ID.

SPA routing muammosi

Deploy qildingiz. Bosh sahifa ishlaydi, havolalar bosilsa ham ishlaydi. Lekin /katalog/kitoblar sahifasida F5 bosing — 404 Not Found.

Sabab: server dist/katalog/kitoblar/index.html faylini qidiradi — u yo'q. Faqat bitta index.html bor, routing esa brauzerda React Router orqali ishlaydi (39-dars).

Yechim — serverga aytish: "topilmagan har qanday manzil uchun index.html ni ber" (SPA fallback / rewrite). Har bir hosting da bu boshqacha sozlanadi — pastda.

Vercel

Eng oson yo'l — GitHub orqali:

  1. Kodni GitHub ga yuklang
  2. vercel.com da GitHub bilan kiring
  3. Add New → Project → repozitoriyni tanlang
  4. Vercel Vite ni avtomatik taniydi:
    • Build Command: npm run build
    • Output Directory: dist
  5. Environment Variables — VITE_API_URL va boshqalarni qo'shing
  6. Deploy

Bir daqiqadan keyin: https://dokon.vercel.app — HTTPS bilan, butun dunyo bo'ylab CDN orqali.

SPA rewrite

// vercel.json — loyiha ildizida
{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Mavjud fayllar (JS, CSS, rasmlar) odatdagidek beriladi; qolgan barcha manzillar — index.html.

Netlify

Xuddi shunday oson:

  1. netlify.com → Add new site → Import an existing project → GitHub
  2. Build command: npm run build, Publish directory: dist
  3. Environment variables → Deploy

SPA rewrite

# public/_redirects
/*    /index.html   200

Yoki netlify.toml da:

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

200 — bu yo'naltirish (redirect) emas, qayta yozish (rewrite): manzil o'zgarmaydi, lekin index.html beriladi.

[!INFO] _redirects faylini public/ ga qo'ying — Vite uni build paytida dist/ ga avtomatik nusxalaydi. Loyiha ildiziga qo'ysangiz, u dist/ ga tushmaydi va ishlamaydi.

Avtomatik deploy (CI/CD)

GitHub ga ulangandan keyin:

Harakat Natija
main branch ga push Production avtomatik yangilanadi
Pull Request ochildi Alohida preview manzil: dokon-git-yangi-dizayn.vercel.app
Build xato bilan tugadi Production o'zgarmaydi — eski versiya ishlayveradi

Preview deploy lar — jamoada juda foydali: dizayner yoki menejer o'zgarishni production ga chiqmasdan oldin haqiqiy havola orqali ko'radi. Xato bo'lsa — bitta tugma bilan oldingi versiyaga qaytarish (rollback).

Testlarni deploy dan oldin

// package.json
{
  "scripts": {
    "build": "vite build",
    "ci": "npm run lint && vitest run && npm run build"
  }
}

Build Command ni npm run ci ga o'zgartirsangiz — testlar o'tmasa, deploy ham bo'lmaydi (73–78-darslar).

Boshqa variantlar

Platforma Xususiyati
Vercel Next.js yaratuvchilari; Next.js va serverless funksiyalar uchun eng yaxshi
Netlify Formalar, serverless funksiyalar, qulay sozlamalar
Cloudflare Pages Juda tez global tarmoq, saxiy bepul limit
GitHub Pages Oddiy statik saytlar; SPA routing uchun qo'shimcha hiyla kerak
O'z serveringiz (VPS) To'liq nazorat: nginx + dist/; SSL, kesh, SPA fallback — o'zingiz

O'z serveringizda nginx uchun SPA fallback:

location / {
  root /var/www/dokon/dist;
  try_files $uri $uri/ /index.html;
}

location /assets/ {
  root /var/www/dokon/dist;
  add_header Cache-Control "public, max-age=31536000, immutable";
}

Deploy dan keyin — tekshiruv ro'yxati

  • Har bir sahifada F5 — 404 yo'q (SPA rewrite)
  • API so'rovlari production manziliga ketadi (Network tab)
  • CORS — backend yangi domenga ruxsat berganmi
  • HTTPS ishlaydi; aralash kontent (http rasmlar) yo'q
  • Konsolda xatolar yo'q
  • Telefonda ochib ko'ring
  • Lighthouse — performance, accessibility, SEO
  • Meta teglar, favicon, OG rasm (HTML kursi, 11-dars)
  • Xatolar monitoringi ulangan (79-dars)
  • O'z domeningiz bo'lsa — DNS sozlamalari va SSL

Nima uchun shunday?

Nima uchun React SPA ni deploy qilish shunchalik oson — va nima uchun bu kursning oxirgi darsi?

Chunki build natijasi — oddiy statik fayllar: ularni ishlatish uchun server tomonida hech qanday kod bajarilmaydi. Bunday fayllarni butun dunyo bo'ylab joylashgan CDN serverlariga nusxalash va foydalanuvchiga eng yaqin joydan berish mumkin — arzon, tez va ishonchli. Vercel va Netlify kabi platformalar bu jarayonni to'liq avtomatlashtirgan: siz faqat kod yozasiz va git push qilasiz. Bu darsning oxirgi bo'lishi ham tasodif emas: siz o'rgangan hamma narsa — komponentlar, hook lar, routing, ma'lumot olish, state, formalar, performance, testlar, arxitektura — faqat foydalanuvchilar uni ishlata olganda ma'noga ega. Deploy — g'oyadan haqiqiy mahsulotgacha bo'lgan yo'lning oxirgi qadami.

Xulosa

Eslab qoling:

  • npm run build → dist/ — statik fayllar; npm run preview bilan tekshiring
  • Environment: VITE_ o'zgaruvchilar — build paytida yoziladi va ochiq; maxfiy kalitlar — faqat serverda
  • SPA routing — har qanday manzil uchun index.html (rewrite); aks holda F5 da 404
  • Vercel: GitHub → Import → Deploy; vercel.json da rewrite
  • Netlify: public/_redirects → /* /index.html 200 yoki netlify.toml
  • main ga push — production; Pull Request — preview manzil; rollback — bitta tugma
  • Deploy dan keyin: F5, API manzil, CORS, HTTPS, telefon, Lighthouse, monitoring

Kurs yakunlandi

Tabriklaymiz — React kursini tugatdingiz! Siz JSX va komponentlardan boshlab hook lar, routing, server bilan ishlash, state boshqarish, formalar, performance, testlash, ilg'or mavzular va real loyiha arxitekturasigacha bo'lgan yo'lni bosib o'tdingiz.

Keyingi qadamlar:

  • O'z loyihangizni yarating va deploy qiling — bilimni mustahkamlashning eng yaxshi usuli
  • TypeScript kursi — katta React loyihalarining standarti
  • Next.js kursi — Server Components, SSR va full-stack React