إنشاء وتشغيل مشروع Nuxt.js باستخدام ServBay

ما هو Nuxt.js؟

Nuxt.js هو إطار عمل مفتوح المصدر مبني على إطار Vue.js الشهير، موجّه خصيصًا لبناء تطبيقات ويب حديثة وعالية الأداء. يبسّط Nuxt.js الكثير من الإعدادات المعقدة، ما يسمح للمطورين بالتركيز على منطق الأعمال بشكل أكبر. يُعد Nuxt.js ممتازًا لإنشاء تطبيقات ذات عرض جانبي الخادم (SSR)، لكنه أيضًا يوفر إمكانيات قوية لإنشاء مواقع ثابتة (SSG)، لذا فهو خيار مثالي لبناء مواقع وتطبيقات غنية بالمحتوى وصديقة لمحركات البحث.

أبرز مزايا وفوائد Nuxt.js

• العرض الجانبي للخادم (SSR): يقوم برندر صفحات Vue مسبقًا على الخادم، ما يزيد من سرعة تحميل الصفحة الأولى، ويحسّن تجربة المستخدم، ويعزّز فهرسة محركات البحث للمحتوى، مما يدعم الـ SEO.
• توليد المواقع الثابتة (SSG): يُنتج ملفات HTML ثابتة بالكامل أثناء البناء. هذا الخيار يوفّر أداءً عاليًا ونشرًا بسيطًا دون الحاجة إلى خادم في وقت التشغيل، ما يجعله مثاليًا للمواقع التي لا تتغير محتواها بكثرة مثل المدونات والمستندات.
• تقسيم الكود التلقائي: Nuxt.js يقسم ملفات JavaScript تلقائيًا حسب المسارات، بحيث يتم تحميل الكود الضروري فقط عند تصفح كل صفحة، مما يحسن أداء التطبيق بشكل ملحوظ.
• توجيه مبني على نظام الملفات: بمجرد إنشاء ملفات .vue بمجلد pages، ينشئ Nuxt.js الإعدادات الخاصة بتوجيه الصفحات تلقائيًا، ما يسهّل إدارة التوجيهات بشكل كبير.
• نظام وحدات قوي (Modular): يتوفر نظام بيئي ضخم من الوحدات التي تتيح دمج خصائص وخدمات خارجية بسهولة (مثل Axios، ودعم PWA، ونظم إدارة المحتوى).
• الاعتماد على الاتفاقيات بدلًا من الإعدادات الصارمة: عبر اعتماد هيكلية محددة للمجلدات والتسمية، تقل الحاجة للتكوينات المعقدة.
• تجربة تطوير سلسة: من خلال دعم إعادة تحميل الوحدات الساخن (HMR) وتقديم تقارير عن الأخطاء، تصبح عملية التطوير أسرع وأكثر إنتاجية.

بفضل هذه الميزات، يجعل Nuxt.js تطوير تطبيقات ويب معقدة وعالية الأداء وصديقة لمحركات البحث عملية أسهل وأكثر كفاءة.

تهيئة وتشغيل مشروع Nuxt.js على ServBay

هذا الدليل يستعرض كيفية الاستفادة من بيئة ServBay للتطوير المحلي القوية، وخاصة حزمتها المتكاملة Node.js وإدارة المواقع، لإنشاء وتهيئة وتشغيل مشروع Nuxt.js. سنقوم بشرح إعدادات وضع التطوير (مع البروكسي العكسي) ووضع الإنتاج (باستخدام خدمة الملفات الثابتة) عبر ServBay.

المتطلبات الأساسية

قبل البدء، تأكد من الآتي:

1. تم تثبيت تطبيق ServBay بنجاح.
2. تم تثبيت وتفعيل حزمة Node.js في ServBay — يمكن تفقد ذلك من خلال تبويب "الحزم" داخل لوحة تحكم ServBay.
3. لديك معرفة أساسية بـ Node.js و npm (أو Yarn/pnpm) وبعض أوامر الطرفية (Terminal).
4. (مستحسن) استخدام محرر كود مثل VS Code.

إنشاء مشروع Nuxt.js

سنستخدم أداة create-nuxt-app لتهيئة مشروع Nuxt.js بسرعة.

1. فتح الطرفية والانتقال لمجلد المواقع الرئيسي الخاص بـ ServBay

   الموقع الافتراضي لجذر المواقع على ServBay هو /Applications/ServBay/www، والمستحسن حفظ مشاريع التطوير المحلي داخله. افتح تطبيق الطرفية ونفذ الأمر التالي:

   cd /Applications/ServBay/www

2. تهيئة مشروع Nuxt.js جديد

   استخدم الأمر التالي لإنشاء مشروع جديد باسم servbay-nuxt-app باستخدام أداة npx create-nuxt-app (حيث npx متوفرة بشكل افتراضي مع npm الإصدار 5.2 أو أحدث):

   npx create-nuxt-app servbay-nuxt-app

   بعد تنفيذ الأمر، سيظهر لك معالج أسئلة تفاعلي. اختر الخيارات المناسبة حسب احتياجك. مثال توضيحي:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # اختر مدير الحزم المناسب، يُوصى بـ Npm أو Yarn
   ? UI framework: None          # اختر إطار الواجهة إذا أردت
   ? Nuxt.js modules: Axios      # اختر وحدات Nuxt.js المطلوبة
   ? Linting tools: ESLint       # اختر أداة التدقيق البرمجي إذا أردت
   ? Testing framework: None     # اختر إطار الاختبار حسب الحاجة
   ? Rendering mode: Universal (SSR / SSG) # اختر وضع الريندر؛ Universal يدعم SSR/SSG
   ? Deployment target: Server (Node.js hosting) # الهدف من النشر، Server مناسب للتطوير المحلي
   ? Development tools: jsconfig.json (Recommended for VS Code) # اختر أدوات التطوير حسب الحاجة

3. تثبيت اعتمادات المشروع

   انتقل لمجلد المشروع الجديد وثبت الاعتمادات المطلوبة باستخدام مدير الحزم الذي اخترته:

   cd servbay-nuxt-app
   npm install
   # أو باستخدام Yarn: yarn install
   # أو باستخدام pnpm: pnpm install

   انتظر حتى تكتمل عملية التثبيت.

تعديل مخرجات المشروع

لتسهيل التأكد من نجاح الإعدادات، سنعدل الصفحة الرئيسية على أن تعرض رسالة نصية بسيطة.

1. فتح ملف pages/index.vue

   افتح الملف المذكور داخل مجلد المشروع باستخدام محرر الأكواد.

2. تعديل محتوى الملف

   عدل محتوى الملف ليصبح كما يلي بحيث يظهر النص "Hello ServBay!":

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style scoped>
   div {
     text-align: center;
     margin-top: 50px;
     font-family: sans-serif;
   }
   h1 {
     color: #333;
   }
   </style>

   تمت إضافة خاصية scoped للوسم style لحصر الأنماط داخل هذا المكوّن فقط وتحسين المظهر قليلاً.

تشغيل وضع التطوير عبر ServBay

عادةً ما يعمل خادم تطوير Nuxt.js على منفذ محلي محدد، ولاستخدام اسم نطاق مخصص وشهادة SSL ومنفذي 80/443 عبر ServBay، سنعد موقعًا بنوع بروكسي عكسي.

1. تشغيل خادم تطوير Nuxt.js

   من جذر مشروعك، شغّل خادم التطوير وحدد المنفذ 8585 (يمكنك اختيار منفذ آخر غير مستخدم):

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run dev -- --port 8585
   # أو بواسطة Yarn: yarn dev --port 8585
   # أو بواسطة pnpm: pnpm run dev --port 8585

   بعد التشغيل، يمكنك الوصول للخادم على http://localhost:8585. احرص على إبقاء الطرفية مفتوحة ليظل الخادم عاملًا.

2. إعداد موقع عبر ServBay (بروكسي عكسي)

   افتح لوحة تحكم ServBay وانتقل إلى تبويب "المواقع". اضغط على الزر + لإضافة موقع جديد:

   • الاسم: أدخل اسمًا تمييزيًا مثل Nuxt.js Dev Site (Proxy).
   • النطاق: أدخل اسم النطاق الذي ستزوره في متصفحك، مثل nuxt-dev.servbay.demo (استخدام نهاية .servbay.demo يعتبر ممارسة جيدة).
   • نوع الموقع: اختر بروكسي عكسي (Reverse Proxy).
   • عنوان IP: أدخل 127.0.0.1 (عنوان loopback المحلي).
   • المنفذ: أدخل المنفذ الذي فعّلت عليه Nuxt.js، مثل 8585.

   بعد الإعداد، اضغط "إضافة" أو "حفظ" ليتم تفعيل الإعدادات فورًا.

   للمزيد حول إعداد مواقع تطوير Node.js (عادة عبر البروكسي العكسي) في ServBay راجع إضافة موقع تطوير Node.js.

3. الوصول لموقع وضع التطوير

   افتح متصفحك، وانتقل إلى اسم النطاق الذي ضبطته، مثال: https://nuxt-dev.servbay.demo.

   بفضل البروكسي العكسي من ServBay، ستتمكن من تصفح خادم تطوير Nuxt.js عبر اسم نطاق مدار من ServBay ومنفذ HTTPS، وسيتم توليد وضبط شهادة SSL تلقائيًا عبر "User CA" الخاص بـ ServBay (تأكد أن جهازك يثق بهذه الشهادة). يمكنك بذلك اختبار ميزات تتطلب اتصالاً آمنًا بسهولة أثناء التطوير، بما في ذلك Service Workers والمزايا المحجوزة للسياقات الآمنة.

بناء وتشغيل نسخة الإنتاج

عند اكتمال تطوير مشروع Nuxt.js وترغب في نشره (أو معاينة بيئة الإنتاج محليًا)، يمكنك بناء نسخة الإنتاج. في المشاريع باستخدام الوضع "Universal" والراغبين في توليد مواقع ثابتة، عادة ما يتم تشغيل الأمر nuxt generate (أو بواسطة السكريبت npm run export).

1. بناء نسخة الإنتاج وتوليد الملفات الثابتة

   من مجلد مشروعك، نفّذ الأوامر التالية. سيقوم npm run build بترجمة الكود، بينما npm run export يولد ملفات HTML ثابتة داخل مجلد الإخراج (عادةً dist):

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run build
   npm run export
   # أو باستخدام Yarn: yarn build && yarn export
   # أو باستخدام pnpm: pnpm build && pnpm run export

   بعد الاكتمال ستجد مجلدًا باسم dist يحوي كل ملفات الموقع الثابت.

2. إعداد موقع ServBay (خدمة ملفات ثابتة)

   من لوحة تحكم ServBay، افتح تبويب "المواقع" واضغط على الزر + لإضافة موقع جديد:

   • الاسم: أدخل اسمًا واضحًا مثل Nuxt.js Prod Site (Static).
   • النطاق: عرّف اسم النطاق للإنتاج، مثل nuxt-prod.servbay.demo.
   • نوع الموقع: اختر ثابت (Static).
   • جذر الموقع: أدخل مسار مجلد الملفات الثابتة، وهو /Applications/ServBay/www/servbay-nuxt-app/dist.

   بعد الانتهاء، اضغط "إضافة" أو "حفظ" لتفعيل الموقع فورًا.

3. الوصول لموقع الإنتاج

   افتح المتصفح وادخل إلى اسم النطاق الخاص بنسخة الإنتاج، مثال: https://nuxt-prod.servbay.demo.

   سيقوم خادم الويب فائق الأداء الخاص بـ ServBay (Caddy أو Nginx حسب الإعداد) بتقديم ملفات مجلد dist مباشرة، مما يضمن سرعة تحميل مثالية. ستحصل أيضًا على شهادة SSL تلقائية ودعم النطاقات المخصصة.

الخلاصة

مع ServBay يمكنك إدارة بيئة تطوير ومعاينة محلية لمشاريع Nuxt.js بسهولة. استخدم حزمة Node.js لتشغيل الخادم، وأضف موقعًا ببروكسي عكسي لتطوير وتجربة المشروع ضمن اسم نطاق مخصص وبيئة HTTPS. وعند إكمال التطوير، ابنِ الملفات الثابتة وقدّمها بكفاءة عبر نمط الموقع الثابت في ServBay. توفّر هذه العملية أفضل استثمار لإمكانيات ServBay، وتسهّل تطوير واختبار مشاريع الواجهة الأمامية محليًا. نأمل أن يكون هذا الدليل قد ساعدك على تحسين تجربتك مع تطوير Nuxt.js عبر ServBay!