لماذا تستضيف Nuxt ذاتيًا على VPS؟
بفضل Nitro، يُنشئ Nuxt 3 بناءً قابلاً للنقل (preset: node-server) يبدأ كخادم Node بسيط يستمع على منفذ. وهذه القابلية للنقل مثالية لـVPS: تستفيد من التصيير من جهة الخادم ومن مسارات server/api ومن التخزين المؤقت للمسارات دون الاعتماد على بيئة تشغيل edge احتكارية. وتُلغي الاستضافة الذاتية حصص الدوال وتتيح لك ضبط التخزين المؤقت والضغط وعدد نسخ Node. ولتطبيق Vue 3 في الإنتاج مع مصادقة واستدعاءات API من الخادم وتحسين SEO متقَن، يوفّر VPS ثبات خادم دائم وتكلفة ثابتة، دون مفاجآت فوترة حسب الاستدعاء.
فوائد ملموسة لاستضافة Nuxt ذاتيًا
- مسارات خادم
server/apiغير محدودة، دون فوترة لكل استدعاء. - SSR وعملية hydration الخاصة بـVue 3 تُقدَّمان من خادم Node دائم ومستقر.
- بناء Nitro قابل للنقل (
node-server) سهل التعبئة في حاوية وإعادة الإنتاج. - تخزين مؤقت للمسارات وقواعد
routeRules(SSR وSSG وISR) مُتحكَّم فيها من جهة الخادم. - توحيد عدة تطبيقات Nuxt على VPS واحد خلف Nginx.
- متغيرات بيئة وقت التشغيل (
runtimeConfig) تُدار مباشرة على خادمك الخاص.
المتطلبات المسبقة للعتاد والبرمجيات
كما هو الحال مع أي إطار عمل حديث، يستهلك بناء Nuxt ذاكرة: استهدف 2 غيغابايت من ذاكرة RAM كحد أدنى (يمكن تنفيذ البناء في CI إذا كان VPS لديك أصغر). وعند وقت التشغيل، يكفي 1 vCPU و1 غيغابايت لخادم Nitro. ثبّت Node.js 20 LTS عبر nvm أو صورة node:20-alpine، إضافةً إلى PM2 للإشراف أو Docker للعزل. اضبط nitro: { preset: 'node-server' } في nuxt.config.ts. يلزم نطاق مُوجَّه نحو VPS للحصول على شهادة TLS. ويبقى Ubuntu 22.04/24.04 LTS الأساس المُوصى به.
نشر Nuxt خطوة بخطوة
إعداد المشروع لـNode
حدّد إعداد Nitro المسبق node-server في nuxt.config.ts وعرّف أسرارك في runtimeConfig. ومن جهة VPS، ثبّت Node.js 20 LTS وPM2، ثم استنسخ المستودع وأنشئ ملف .env.
بناء التطبيق
نفّذ npm ci ثم npm run build. ينتج Nitro مجلدًا مستقلًا .output يحتوي على server/index.mjs. وهذا المجلد هو كل ما يحتاجه VPS لتقديم التطبيق في الإنتاج.
تشغيل خادم Nitro
ابدأ باستخدام pm2 start .output/server/index.mjs --name nuxt، مع ضبط PORT=3000 وNITRO_HOST=0.0.0.0 في البيئة. نفّذ pm2 save وpm2 startup لإعادة تشغيل الخدمة بعد إعادة إقلاع VPS.
وضع Nginx كبروكسي عكسي
اضبط كتلة خادم بـproxy_pass http://localhost:3000، ومرّر Host وX-Forwarded-Proto، وقدّم /_nuxt/ (الأصول المُجزّأة hashed) مباشرة من .output/public مع تخزين مؤقت طويل. فعّل gzip أو brotli.
تفعيل HTTPS
أنشئ شهادة Let's Encrypt باستخدام Certbot لـyourdomain.com، وافرض إعادة التوجيه من HTTP إلى HTTPS، وجدْوِل التجديد التلقائي. وتحقّق من أن SSR يكتشف البروتوكول الآمن بشكل صحيح عبر الترويسات المُمرَّرة.
أتمتة التحديثات
أنشئ سكربت git pull && npm ci && npm run build && pm2 reload nuxt أو خط CI يدفع مجلد .output. ويضمن أمر reload في PM2 نشرًا دون انقطاع الخدمة.
استثمر routeRules في Nuxt لمزج استراتيجيات التصيير صفحةً صفحة: prerender: true للصفحات الثابتة (المدونة، الإشعارات القانونية)، وswr أو isr للصفحات شبه الديناميكية مع تخزين مؤقت، وSSR كامل للصفحات المخصّصة. بذلك تقلّل الحِمل على Node وتحسّن زمن الاستجابة دون تغيير البنية التحتية.
