نشر Nuxt على خادم VPS: SSR ومسارات API والتحكم الكامل

لماذا تستضيف Nuxt على VPS؟

SSR أم SSG أم SPA: أي وضع عرض تختار لمشروعك في Nuxt؟

مرّر الجدول أفقيًا

ما يمكنك فعله مع Nuxt على VPS

إمكانيات فعلية على VPS

• خدمة تطبيق Nuxt في وضع SSR لتحسين محركات البحث وتقليل أوقات التحميل — يبقي PM2 عملية Nitro نشطة ويعيد تشغيلها تلقائياً بعد التعطل أو إعادة تشغيل الخادم
• نشر موقع ثابت تم إنشاؤه بـ nuxt generate وتقديمه عبر Nginx دون عملية Node.js دائمة — مثالي للمدونات وصفحات الهبوط
• استضافة مشاريع Nuxt متعددة على نفس الـ VPS باستخدام بروكسي عكسي و Virtual Hosts لـ Nginx — كل تطبيق يعمل على منفذه الداخلي الخاص
• تهيئة متغيرات البيئة الحساسة (مفاتيح API، اتصالات DB) مباشرة على الخادم في /etc/environment أو عبر ملف .env خارج مستودع Git
• تفعيل مسارات API الخاصة بـ Nitro (server/api/) لعرض طبقة backend خفيفة من نفس عملية Node.js، دون خادم Express منفصل
• أتمتة النشر باستخدام ملف ecosystem لـ PM2، أو webhook من GitHub، أو خط CI/CD يصل إلى الـ VPS عبر SSH
• تفعيل HTTPS تلقائياً مع Let's Encrypt عبر Certbot لتأمين المستخدمين دون تكلفة شهادة

تثبيت Nuxt ونشره على VPS من ServOrbit

1. 01

   طلب VPS Cloud من ServOrbit

   توجه إلى صفحة /vps-cloud واختر الخطة المناسبة لمشروعك. لتطبيق Nuxt في وضع SSR، خطط لـ 1 vCPU و1 جيجابايت RAM على الأقل؛ 2 جيجابايت تستوعب بكل راحة عملية Nitro والبروكسي العكسي وطفرات التجميع أثناء النشر. إذا كنت تستضيف تطبيقات Nuxt متعددة، ابدأ بـ 2 vCPU / 4 جيجابايت. أكمل الطلب وادخل إلى بوابة العميل بعد تسليم الـ VPS — عادةً في أقل من دقيقة.

2. 02

   تثبيت Nuxt من Marketplace

   سجّل الدخول إلى بوابة عميل ServOrbit، انتقل إلى قسم Marketplace من لوحة تحكم الـ VPS، ثم ابحث عن Nuxt. انقر على البطاقة وأكد التثبيت. يُهيئ السكريبت تلقائياً Node.js LTS وPM2 كمدير عمليات وNginx كبروكسي عكسي على المنفذ 80 (و443 إذا تم تحديد نطاق). تستغرق العملية أقل من دقيقتين.

3. 03

   نشر تطبيقك وإعداد متغيرات البيئة

   اتصل عبر SSH (ssh root@<IP-الـ VPS>)، ثم استنسخ مستودعك في الدليل المُعدّ:

   git clone https://github.com/your-org/your-app.git /var/www/nuxt-app
   cd /var/www/nuxt-app
   npm install

   أنشئ ملف .env خارج مستودع Git مع متغيرات وقت التشغيل:

   NUXT_PUBLIC_API_BASE=https://api.your-domain.com
   NUXT_SECRET_KEY=your-private-key
   DATABASE_URL=postgres://user:pass@localhost/mydb

   يقرأ Nuxt 3 المتغيرات ذات البادئة NUXT_ عبر useRuntimeConfig() — متغيرات NUXT_PUBLIC_* معروضة من جانب العميل، والأخرى للخادم فقط. لا تلتزم أبداً بملف .env: أضفه إلى .gitignore منذ البداية.

4. 04

   بناء التطبيق وتشغيله مع PM2

   جمّع التطبيق للإنتاج:

   npm run build

   يُنشئ Nuxt 3 مجلد .output/ الذي يحتوي خادم Nitro. شغّله مع PM2 في وضع cluster لاستخدام جميع أنوية CPU:

   pm2 start .output/server/index.mjs -i max --name nuxt-app
   pm2 save
   pm2 startup

   تحقق من الحالة: pm2 status — يجب أن تكون الحالات online. لإعادة التحميل دون توقف أثناء النشر: pm2 reload nuxt-app.

5. 05

   إعداد Nginx كبروكسي عكسي وتوجيه نطاقك

   يثبّت قالب Marketplace Virtual Host جاهزاً في /etc/nginx/sites-available/nuxt-app. عدّله لتحديد اسم نطاقك وتفعيل تخزين الأصول الثابتة مؤقتاً:

   server {
       server_name your-domain.com;
   
       location / {
           proxy_pass http://127.0.0.1:3000;
           proxy_http_version 1.1;
           proxy_set_header Host $host;
           proxy_cache_bypass $http_upgrade;
       }
   
       location /_nuxt/ {
           proxy_pass http://127.0.0.1:3000;
           expires 1y;
           add_header Cache-Control "public, immutable";
       }
   }

   أشر سجل DNS A إلى IP الـ VPS، ثم شغّل Certbot للحصول على شهادة TLS مجانية: certbot --nginx -d your-domain.com. أعد تحميل Nginx: nginx -s reload. تطبيق Nuxt الخاص بك متاح الآن عبر HTTPS.

6. 06

   أتمتة عمليات النشر التالية

   للتحديثات، أنشئ سكريبت نشر في /var/www/nuxt-app/deploy.sh:

   #!/bin/bash
   set -e
   cd /var/www/nuxt-app
   git pull origin main
   npm install --production=false
   npm run build
   pm2 reload nuxt-app
   echo "Deployment complete"

   اجعله قابلاً للتنفيذ (chmod +x deploy.sh) وأطلقه من خط CI/CD عبر SSH: ssh root@<IP> /var/www/nuxt-app/deploy.sh. pm2 reload (وليس restart) يضمن انتقالاً سلساً — ينتظر PM2 حتى تكون كل نسخة جديدة جاهزة قبل قطع النسخة القديمة.

متغيرات البيئة وإعداد وقت تشغيل Nuxt 3

مراقبة السجلات وتشخيص الأخطاء

pm2 logs nuxt-app          # البث المباشر (stdout + stderr)
pm2 logs nuxt-app --lines 100  # آخر 100 سطر
pm2 monit                  # لوحة CPU / الذاكرة في الوقت الفعلي

pm2 install pm2-logrotate
pm2 set pm2-logrotate:max_size 50M
pm2 set pm2-logrotate:retain 7

تشخيص المشكلات الشائعة