Nuxt иловасини серверга жойлаш: SSR режим, статик генерация, PM2 ва Nginx

Nuxt Vue асосидаги фреймворк бўлиб, у бир хил код билан ҳам сервер томонда рендер қилинадиган динамик сайт, ҳам тўлиқ статик сайт яратишга имкон беради. Жойлашдан олдин айнан шу танловни қилиш керак, чунки ундан қайси турдаги сервер кераклиги келиб чиқади. Агар саҳифалар ҳар бир сўровда базадан янги маълумот олса, фойдаланувчи тизимга кирса ёки сервер API керак бўлса, Node.js ишлайдиган VPS керак. Агар сайт асосан ўзгармас саҳифалардан иборат бўлса, уни статик HTML сифатида генерация қилиб, оддий хостингга ҳам жойлаш мумкин.

Nuxt build натижаси: .output папкаси

Nuxt 3 ва ундан кейинги версиялар Nitro сервер двигателидан фойдаланади. npm run build буйруғи бажарилгач, лойиҳа илдизида .output папкаси пайдо бўлади. Унинг ичида server қисми ва браузерга бериладиган файллар жойлашган public қисми бор. Бу папка ўзи мустақил: серверда ишлатиш учун лойиҳанинг манба коди ёки тўлиқ node_modules керак эмас, чунки Nitro керакли боғлиқликларни ичига йиғиб қўяди.

npm ci
npm run build
node .output/server/index.mjs

Стандарт ҳолатда сервер 3000 портда ишга тушади. Порт ва манзилни PORT ва HOST ёки NITRO_PORT ва NITRO_HOST муҳит ўзгарувчилари орқали ўзгартириш мумкин. Nginx орқасида ишлатилганда иловани фақат 127.0.0.1 манзилида тинглатиш хавфсизроқ.

VPS'га SSR сифатида жойлаш

Серверда Node.js'нинг LTS версияси ўрнатилган бўлиши керак. Кодни Git орқали олиб келиб, build қиламиз. Кичик серверда build хотира етишмаслигидан тўхтаб қолиши мумкин, бундай ҳолда swap қўшинг ёки build'ни ўз компьютерингизда бажариб, фақат .output папкасини серверга юборинг. Иккинчи усулда build қилинган машина билан сервернинг операцион тизими ва архитектураси бир хил бўлиши керак.

cd /var/www
git clone https://github.com/misol/misol-nuxt.git
cd misol-nuxt
npm ci
npm run build

PM2 билан доимий ишлатиш

Илова терминал ёпилганда тўхтаб қолмаслиги ва сервер қайта юкланганда ўзи ёниши учун PM2'дан фойдаланамиз. Nuxt ҳужжатларида ҳам PM2 учун ecosystem файли намунаси берилган. Қуйидаги вариантда кластер режими ёқилган, яъни PM2 сервердаги ядролар сонига қараб бир нечта нусха очади.

// ecosystem.config.cjs
module.exports = {
  apps: [{
    name: "misol-nuxt",
    port: "3000",
    exec_mode: "cluster",
    instances: "max",
    script: "./.output/server/index.mjs",
    env: {
      HOST: "127.0.0.1",
      NUXT_PUBLIC_API_BASE: "https://api.example.uz"
    }
  }]
};

npm install -g pm2
pm2 start ecosystem.config.cjs
pm2 save
pm2 startup

Кластер режимида сессия ва кеш каби маълумотларни жараён хотирасида сақламанг, акс ҳолда ҳар бир нусхада улар ҳар хил бўлади. Агар иловангиз бунга тайёр бўлмаса, instances қийматини 1 қилинг.

Runtime config: build қайта қилмасдан созлаш

Nuxt'да nuxt.config.ts файлидаги runtimeConfig бўлими муҳит ўзгарувчилари орқали ишлаш вақтида алмаштирилиши мумкин. Бунинг учун ўзгарувчи номи NUXT_ билан бошланиши керак, браузерга очиқ қийматлар учун эса NUXT_PUBLIC_ ишлатилади. Бу жуда қулай: API манзили ёки махфий калит ўзгарганда бутун лойиҳани қайта build қилиш шарт эмас, фақат PM2'ни янги муҳит билан қайта ишга тушириш кифоя.

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: "",
    public: {
      apiBase: ""
    }
  }
});

NUXT_API_SECRET=... NUXT_PUBLIC_API_BASE=https://api.example.uz node .output/server/index.mjs

Махфий қийматларни ҳеч қачон public ичига қўйманг, чунки у ердаги ҳамма нарса саҳифа кодида браузерга етиб боради.

Nginx'ни олдига қўйиш

Илова ички портда ишлайди, ташқи сўровларни эса Nginx қабул қилади. У SSL сертификатини улайди, сиқишни ёқади ва сўровларни Nuxt'га узатади. Сертификатни Let's Encrypt орқали Certbot билан бепул олиш мумкин.

server {
    listen 80;
    server_name example.uz;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        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 nginx -t && sudo systemctl reload nginx
sudo certbot --nginx -d example.uz

Статик генерация: Node.js'сиз хостинг

Агар сайтингизда ҳар бир сўровда серверда ишлов бериш керак бўлмаса, nuxi generate буйруғи барча саҳифаларни олдиндан HTML файлларга айлантиради. Натижа .output/public папкасига ёзилади ва уни исталган веб-серверга, жумладан ISPmanager панелли оддий хостингга файл сифатида юклаш мумкин. Бундай сайтга Node.js жараёни керак эмас, шунинг учун у кам ресурс олади ва жуда тез очилади.

npx nuxi generate
ls .output/public

Одатда nuxi generate ҳар бир маршрут учун алоҳида папка яратади ва ҳаволалар орқали топилган саҳифаларни ўзи аниқлайди. Аммо build олдиндан билмайдиган динамик саҳифалар, масалан ҳеч қаердан ҳавола қилинмаган маҳсулот саҳифалари, генерация қилинмайди ва уларга тўғридан-тўғри ўтилганда 404 чиқиши мумкин. Бундай саҳифаларни nitro.prerender.routes орқали рўйхатга киритинг.

Амалий мисол: Бухородаги меҳмонхона

Бухородаги кичик меҳмонхона misol.uz сайтини Nuxt'да қилдирди. Хоналар тавсифи, галерея ва алоқа саҳифаси камдан-кам ўзгаради, шунинг учун биринчи босқичда сайт nuxi generate билан статик қилиб оддий хостингга жойланди. Кейинчалик онлайн брон қилиш ва хоналар бандлигини реал вақтда кўрсатиш керак бўлганда лойиҳа VPS'га SSR режимида кўчирилди, PM2 ва Nginx юқоридаги тартибда созланди. Коднинг ўзи деярли ўзгармади, фақат build буйруғи ва жойлаш усули алмашди.

Қайси йўлни танлашни билмасангиз, оддийидан бошланг: статик сайт учун sayt.uz хостинги етарли, динамик функциялар пайдо бўлганда эса VPS'га ўтиш мумкин.