Nuxt ilovasini serverga joylash: SSR rejim, statik generatsiya, PM2 va Nginx

Nuxt Vue asosidagi freymvork bo'lib, u bir xil kod bilan ham server tomonda render qilinadigan dinamik sayt, ham to'liq statik sayt yaratishga imkon beradi. Joylashdan oldin aynan shu tanlovni qilish kerak, chunki undan qaysi turdagi server kerakligi kelib chiqadi. Agar sahifalar har bir so'rovda bazadan yangi ma'lumot olsa, foydalanuvchi tizimga kirsa yoki server API kerak bo'lsa, Node.js ishlaydigan VPS kerak. Agar sayt asosan o'zgarmas sahifalardan iborat bo'lsa, uni statik HTML sifatida generatsiya qilib, oddiy hostingga ham joylash mumkin.

Nuxt build natijasi: .output papkasi

Nuxt 3 va undan keyingi versiyalar Nitro server dvigatelidan foydalanadi. npm run build buyrug'i bajarilgach, loyiha ildizida .output papkasi paydo bo'ladi. Uning ichida server qismi va brauzerga beriladigan fayllar joylashgan public qismi bor. Bu papka o'zi mustaqil: serverda ishlatish uchun loyihaning manba kodi yoki to'liq node_modules kerak emas, chunki Nitro kerakli bog'liqliklarni ichiga yig'ib qo'yadi.

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

Standart holatda server 3000 portda ishga tushadi. Port va manzilni PORT va HOST yoki NITRO_PORT va NITRO_HOST muhit o'zgaruvchilari orqali o'zgartirish mumkin. Nginx orqasida ishlatilganda ilovani faqat 127.0.0.1 manzilida tinglatish xavfsizroq.

VPS'ga SSR sifatida joylash

Serverda Node.js'ning LTS versiyasi o'rnatilgan bo'lishi kerak. Kodni Git orqali olib kelib, build qilamiz. Kichik serverda build xotira yetishmasligidan to'xtab qolishi mumkin, bunday holda swap qo'shing yoki build'ni o'z kompyuteringizda bajarib, faqat .output papkasini serverga yuboring. Ikkinchi usulda build qilingan mashina bilan serverning operatsion tizimi va arxitekturasi bir xil bo'lishi kerak.

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

PM2 bilan doimiy ishlatish

Ilova terminal yopilganda to'xtab qolmasligi va server qayta yuklanganda o'zi yonishi uchun PM2'dan foydalanamiz. Nuxt hujjatlarida ham PM2 uchun ecosystem fayli namunasi berilgan. Quyidagi variantda klaster rejimi yoqilgan, ya'ni PM2 serverdagi yadrolar soniga qarab bir nechta nusxa ochadi.

// 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

Klaster rejimida sessiya va kesh kabi ma'lumotlarni jarayon xotirasida saqlamang, aks holda har bir nusxada ular har xil bo'ladi. Agar ilovangiz bunga tayyor bo'lmasa, instances qiymatini 1 qiling.

Runtime config: build qayta qilmasdan sozlash

Nuxt'da nuxt.config.ts faylidagi runtimeConfig bo'limi muhit o'zgaruvchilari orqali ishlash vaqtida almashtirilishi mumkin. Buning uchun o'zgaruvchi nomi NUXT_ bilan boshlanishi kerak, brauzerga ochiq qiymatlar uchun esa NUXT_PUBLIC_ ishlatiladi. Bu juda qulay: API manzili yoki maxfiy kalit o'zgarganda butun loyihani qayta build qilish shart emas, faqat PM2'ni yangi muhit bilan qayta ishga tushirish kifoya.

// 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

Maxfiy qiymatlarni hech qachon public ichiga qo'ymang, chunki u yerdagi hamma narsa sahifa kodida brauzerga yetib boradi.

Nginx'ni oldiga qo'yish

Ilova ichki portda ishlaydi, tashqi so'rovlarni esa Nginx qabul qiladi. U SSL sertifikatini ulaydi, siqishni yoqadi va so'rovlarni Nuxt'ga uzatadi. Sertifikatni Let's Encrypt orqali Certbot bilan bepul olish mumkin.

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

Statik generatsiya: Node.js'siz hosting

Agar saytingizda har bir so'rovda serverda ishlov berish kerak bo'lmasa, nuxi generate buyrug'i barcha sahifalarni oldindan HTML fayllarga aylantiradi. Natija .output/public papkasiga yoziladi va uni istalgan veb-serverga, jumladan ISPmanager panelli oddiy hostingga fayl sifatida yuklash mumkin. Bunday saytga Node.js jarayoni kerak emas, shuning uchun u kam resurs oladi va juda tez ochiladi.

npx nuxi generate
ls .output/public

Odatda nuxi generate har bir marshrut uchun alohida papka yaratadi va havolalar orqali topilgan sahifalarni o'zi aniqlaydi. Ammo build oldindan bilmaydigan dinamik sahifalar, masalan hech qayerdan havola qilinmagan mahsulot sahifalari, generatsiya qilinmaydi va ularga to'g'ridan-to'g'ri o'tilganda 404 chiqishi mumkin. Bunday sahifalarni nitro.prerender.routes orqali ro'yxatga kiriting.

Amaliy misol: Buxorodagi mehmonxona

Buxorodagi kichik mehmonxona misol.uz saytini Nuxt'da qildirdi. Xonalar tavsifi, galereya va aloqa sahifasi kamdan-kam o'zgaradi, shuning uchun birinchi bosqichda sayt nuxi generate bilan statik qilib oddiy hostingga joylandi. Keyinchalik onlayn bron qilish va xonalar bandligini real vaqtda ko'rsatish kerak bo'lganda loyiha VPS'ga SSR rejimida ko'chirildi, PM2 va Nginx yuqoridagi tartibda sozlandi. Kodning o'zi deyarli o'zgarmadi, faqat build buyrug'i va joylash usuli almashdi.

Qaysi yo'lni tanlashni bilmasangiz, oddiyidan boshlang: statik sayt uchun sayt.uz hostingi yetarli, dinamik funksiyalar paydo bo'lganda esa VPS'ga o'tish mumkin.