Next.js ilovasini o'z serverga joylash: build, PM2, Nginx va SSL

Next.js ilovasini joylash haqida gap ketganda ko'pchilik birinchi navbatda bulut platformalarini eslaydi. Ular qulay, lekin loyiha o'sgan sari narx, ma'lumotlar qayerda saqlanishi va server ustidan nazorat masalasi muhim bo'lib qoladi. O'zbekistondagi foydalanuvchilarga mo'ljallangan sayt uchun mahalliy VPS'da ishlash sahifalarning tezroq ochilishiga ham yordam berishi mumkin. Next.js o'z serverida next start orqali oddiy Node.js ilova sifatida ishlaydi, shuning uchun uni istalgan Linux serverga joylash mumkin.

Serverni tayyorlash

Ishni yangi Ubuntu yoki Debian serverdan boshlaymiz. Avval tizimni yangilab, ilova uchun alohida foydalanuvchi yaratamiz, chunki ilovani root nomidan ishlatish xavfsiz emas. Keyin Node.js'ning LTS versiyasini o'rnatamiz. Next.js'ning har bir versiyasi minimal Node.js versiyasini talab qiladi, buni loyihangizdagi Next.js versiyasining hujjatlaridan tekshiring.

sudo apt update && sudo apt upgrade -y
sudo adduser deploy
sudo usermod -aG sudo deploy
su - deploy
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
source ~/.bashrc
nvm install --lts
node -v

Node.js'ni nvm orqali o'rnatish bir serverda bir nechta versiya bilan ishlash imkonini beradi. Agar serverda faqat bitta loyiha bo'lsa, tizim paket menejeri orqali o'rnatish ham mumkin, muhimi versiya talablarga mos kelsin.

Loyihani yuklash va build qilish

Kodni serverga olib kelishning eng qulay yo'li Git. Loyiha ombordan klonlanadi, bog'liqliklar o'rnatiladi va production build tayyorlanadi. Build jarayoni server resurslarini ancha talab qiladi: kichik VPS'da xotira yetmay qolsa, jarayon "JavaScript heap out of memory" xatosi bilan to'xtaydi. Bunday holda swap qo'shish yoki build'ni boshqa mashinada bajarish kerak.

cd /var/www
sudo mkdir misol-next && sudo chown deploy:deploy misol-next
git clone https://github.com/misol/misol-next.git misol-next
cd misol-next
npm ci
cp .env.example .env.production
nano .env.production
npm run build

npm ci buyrug'i package-lock.json faylidagi aniq versiyalarni o'rnatadi, shuning uchun serverdagi ilova sizning kompyuteringizdagi bilan bir xil bo'ladi. Muhit o'zgaruvchilarida bir nuqtani unutmang: NEXT_PUBLIC_ bilan boshlanadigan qiymatlar build vaqtida kodga yozib qo'yiladi, ularni o'zgartirsangiz, qayta build qilish shart.

PM2 bilan ishga tushirish

Build tayyor bo'lgach, ilovani terminalga bog'liq bo'lmagan holda ishlatish kerak. PM2 jarayon menejeri ilovani fonda ushlaydi, yiqilsa qayta ko'taradi va server yuklanganda avtomatik yoqadi. Next.js standart holatda 3000 portda ishlaydi, uni faqat ichki tarmoqda ochiq qoldirib, tashqariga Nginx orqali chiqaramiz.

npm install -g pm2
pm2 start npm --name misol-next -- start -- -p 3000 -H 127.0.0.1
pm2 save
pm2 startup

-H 127.0.0.1 parametri ilovani faqat serverning o'zidan kirish mumkin bo'lgan manzilda tinglashga majbur qiladi. Shunda kimdir 3000 portga to'g'ridan-to'g'ri ulanib, Nginx'ni chetlab o'ta olmaydi. pm2 startup chiqargan sudo buyrug'ini nusxalab bajarishni unutmang.

Nginx'ni reverse proxy sifatida sozlash

Nginx tashqi so'rovlarni qabul qiladi, statik fayllarni keshlaydi va SSL'ni boshqaradi. Next.js esa faqat dinamik qismga javob beradi. Quyidagi konfiguratsiya example.uz domeni uchun yozilgan.

sudo apt install nginx -y
sudo nano /etc/nginx/sites-available/misol-next

server {
    listen 80;
    server_name example.uz www.example.uz;

    location /_next/static/ {
        proxy_pass http://127.0.0.1:3000;
        expires 365d;
        add_header Cache-Control "public, immutable";
    }

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

sudo ln -s /etc/nginx/sites-available/misol-next /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

/_next/static/ ichidagi fayllar nomida xesh bo'ladi va har build'da o'zgaradi, shuning uchun ularni uzoq muddat keshlash xavfsiz. nginx -t buyrug'i konfiguratsiyada xato bo'lsa, qayta yuklashdan oldin ogohlantiradi.

Domen va bepul SSL

Domen serverga yo'naltirilishi uchun DNS'da A yozuvi VPS'ning IP manziliga qaratilishi kerak. Buni sayt.uz kabinetidagi domenning DNS bo'limida qilish mumkin. Yozuv tarqalgach, Let's Encrypt sertifikatini Certbot orqali olamiz. Certbot Nginx konfiguratsiyasini o'zi yangilaydi va sertifikatni avtomatik uzaytiradigan taymerni o'rnatadi.

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d example.uz -d www.example.uz
sudo certbot renew --dry-run

Yangi versiyani joylash

Kod o'zgarganda har safar bir xil qadamlar takrorlanadi, shuning uchun ularni kichik skriptga yig'ish qulay. Build muvaffaqiyatsiz tugasa, skript to'xtaydi va eski versiya ishlashda davom etadi.

#!/bin/bash
set -e
cd /var/www/misol-next
git pull
npm ci
npm run build
pm2 reload misol-next

Shuni yodda tuting: next build mavjud .next papkasini qayta yozadi, shuning uchun build davomida ishlab turgan ilova xato berishi mumkin. Katta loyihalarda build'ni alohida papkada yoki CI serverida bajarib, tayyor natijani ko'chirish ishonchliroq.

Amaliy misol: Toshkentdagi stomatologiya klinikasi

Toshkentdagi stomatologiya klinikasi example.uz saytini Next.js'da qildirdi: xizmatlar sahifalari statik, onlayn yozilish formasi esa API route orqali ishlaydi. Sayt 2 GB xotirali VPS'ga yuqoridagi tartibda joylandi, build vaqtida xotira yetishmasligi uchun 2 GB swap qo'shildi. Natijada sahifalar Nginx keshi hisobiga tez ochiladi, yozilish so'rovlari klinikaning o'z serveridagi bazada qoladi, administrator esa yangi xizmat qo'shilganda faqat deploy skriptini ishga tushiradi.

Agar loyihangizni shunga o'xshash tarzda ishlatmoqchi bo'lsangiz, avval build jarayoni qancha xotira olishini o'z kompyuteringizda tekshiring va VPS tarifini shunga qarab tanlang.