Next.js иловасини ўз серверга жойлаш: build, PM2, Nginx ва SSL

Next.js иловасини жойлаш ҳақида гап кетганда кўпчилик биринчи навбатда булут платформаларини эслайди. Улар қулай, лекин лойиҳа ўсган сари нарх, маълумотлар қаерда сақланиши ва сервер устидан назорат масаласи муҳим бўлиб қолади. Ўзбекистондаги фойдаланувчиларга мўлжалланган сайт учун маҳаллий VPS'да ишлаш саҳифаларнинг тезроқ очилишига ҳам ёрдам бериши мумкин. Next.js ўз серверида next start орқали оддий Node.js илова сифатида ишлайди, шунинг учун уни исталган Linux серверга жойлаш мумкин.

Серверни тайёрлаш

Ишни янги Ubuntu ёки Debian сервердан бошлаймиз. Аввал тизимни янгилаб, илова учун алоҳида фойдаланувчи яратамиз, чунки иловани root номидан ишлатиш хавфсиз эмас. Кейин Node.js'нинг LTS версиясини ўрнатамиз. Next.js'нинг ҳар бир версияси минимал Node.js версиясини талаб қилади, буни лойиҳангиздаги Next.js версиясининг ҳужжатларидан текширинг.

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'ни nvm орқали ўрнатиш бир серверда бир нечта версия билан ишлаш имконини беради. Агар серверда фақат битта лойиҳа бўлса, тизим пакет менежери орқали ўрнатиш ҳам мумкин, муҳими версия талабларга мос келсин.

Лойиҳани юклаш ва build қилиш

Кодни серверга олиб келишнинг энг қулай йўли Git. Лойиҳа омбордан клонланади, боғлиқликлар ўрнатилади ва production build тайёрланади. Build жараёни сервер ресурсларини анча талаб қилади: кичик VPS'да хотира етмай қолса, жараён "JavaScript heap out of memory" хатоси билан тўхтайди. Бундай ҳолда swap қўшиш ёки build'ни бошқа машинада бажариш керак.

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 буйруғи package-lock.json файлидаги аниқ версияларни ўрнатади, шунинг учун сервердаги илова сизнинг компьютерингиздаги билан бир хил бўлади. Муҳит ўзгарувчиларида бир нуқтани унутманг: NEXT_PUBLIC_ билан бошланадиган қийматлар build вақтида кодга ёзиб қўйилади, уларни ўзгартирсангиз, қайта build қилиш шарт.

PM2 билан ишга тушириш

Build тайёр бўлгач, иловани терминалга боғлиқ бўлмаган ҳолда ишлатиш керак. PM2 жараён менежери иловани фонда ушлайди, йиқилса қайта кўтаради ва сервер юкланганда автоматик ёқади. Next.js стандарт ҳолатда 3000 портда ишлайди, уни фақат ички тармоқда очиқ қолдириб, ташқарига Nginx орқали чиқарамиз.

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 параметри иловани фақат сервернинг ўзидан кириш мумкин бўлган манзилда тинглашга мажбур қилади. Шунда кимдир 3000 портга тўғридан-тўғри уланиб, Nginx'ни четлаб ўта олмайди. pm2 startup чиқарган sudo буйруғини нусхалаб бажаришни унутманг.

Nginx'ни reverse proxy сифатида созлаш

Nginx ташқи сўровларни қабул қилади, статик файлларни кешлайди ва SSL'ни бошқаради. Next.js эса фақат динамик қисмга жавоб беради. Қуйидаги конфигурация example.uz домени учун ёзилган.

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/ ичидаги файллар номида хеш бўлади ва ҳар build'да ўзгаради, шунинг учун уларни узоқ муддат кешлаш хавфсиз. nginx -t буйруғи конфигурацияда хато бўлса, қайта юклашдан олдин огоҳлантиради.

Домен ва бепул SSL

Домен серверга йўналтирилиши учун DNS'да A ёзуви VPS'нинг IP манзилига қаратилиши керак. Буни sayt.uz кабинетидаги доменнинг DNS бўлимида қилиш мумкин. Ёзув тарқалгач, Let's Encrypt сертификатини Certbot орқали оламиз. Certbot Nginx конфигурациясини ўзи янгилайди ва сертификатни автоматик узайтирадиган таймерни ўрнатади.

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

Янги версияни жойлаш

Код ўзгарганда ҳар сафар бир хил қадамлар такрорланади, шунинг учун уларни кичик скриптга йиғиш қулай. Build муваффақиятсиз тугаса, скрипт тўхтайди ва эски версия ишлашда давом этади.

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

Шуни ёдда тутинг: next build мавжуд .next папкасини қайта ёзади, шунинг учун build давомида ишлаб турган илова хато бериши мумкин. Катта лойиҳаларда build'ни алоҳида папкада ёки CI серверида бажариб, тайёр натижани кўчириш ишончлироқ.

Амалий мисол: Тошкентдаги стоматология клиникаси

Тошкентдаги стоматология клиникаси example.uz сайтини Next.js'да қилдирди: хизматлар саҳифалари статик, онлайн ёзилиш формаси эса API route орқали ишлайди. Сайт 2 GB хотирали VPS'га юқоридаги тартибда жойланди, build вақтида хотира етишмаслиги учун 2 GB swap қўшилди. Натижада саҳифалар Nginx кеши ҳисобига тез очилади, ёзилиш сўровлари клиниканинг ўз серверидаги базада қолади, администратор эса янги хизмат қўшилганда фақат деплой скриптини ишга туширади.

Агар лойиҳангизни шунга ўхшаш тарзда ишлатмоқчи бўлсангиз, аввал build жараёни қанча хотира олишини ўз компьютерингизда текширинг ва VPS тарифини шунга қараб танланг.