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

ما هو Nuxt.js؟

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

الميزات الرئيسية ومزايا Nuxt.js

• المخطط من جانب الخادم (SSR): يوفر عرضًا مسبقًا لصفحات Vue على الخادم، مما يحسن سرعة تحميل الصفحة الأولى، ويرتقي بتجربة المستخدم، ويعزز قدرة محركات البحث على فهرسة المحتوى، مما يخدم أهداف الـ SEO.
• توليد المواقع الثابتة (SSG): ينشئ ملفات HTML ثابتة كليًا أثناء البناء. يضمن هذا الأداء العالي وسهولة النشر دون الحاجة إلى خادم في وقت التشغيل، مما يعد مثاليًا للمواقع التي لا يتغيّر محتواها باستمرار، مثل المدونات أو مواقع التوثيق.
• تجزئة الكود بشكل تلقائي: Nuxt.js يقسم كود جافا سكريبت تلقائيًا حسب المسارات، بحيث يتم تحميل ما يلزم فقط حين زيارة المستخدم للصفحة، مما يزيد سرعة الأداء.
• نظام التوجيه القائم على الملفات: يُنشئ التوجيه تلقائيًا عبر ملفات .vue داخل مجلد pages، مما يبسط إدارة المسارات.
• بيئة نمطية: يدعم نظام الوحدات في Nuxt.js التكامل السهل مع مزايا وخدمات خارجية متنوعة مثل 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) وبعض أوامر الطرفية الأساسية.
4. (مستحسن) تثبيت محرر أكواد مثل VS Code.

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

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

1. افتح الطرفية وانتقل إلى مجلد مواقع ServBay

   مجلد المواقع الافتراضي في ServBay مصمم لتخزين مشاريع التطوير المحلية. افتح تطبيق الطرفية لديك ونفذ الأمر التالي للانتقال إليه:

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

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

   استخدم الأمر npx create-nuxt-app لإنشاء مشروع باسم servbay-nuxt-app. حيث يقوم npx بتشغيل الحزمة دون الحاجة لتثبيتها عالميًا.

   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 مناسب للتطوير المحلي وإستضافة Node.js
   ? 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 في الوسم الخاص بالأنماط لجعلها تقتصر على مكون الصفحة فقط، مع بعض التحسينات الجمالية البسيطة.

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

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

1. بدء خادم تطوير Nuxt.js

   ضمن مجلد المشروع، شغّل الخادم على منفذ مثل 8585 (يمكنك اختيار أي منفذ غير مستخدم):

   macOS:

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

   Windows:

   cd C:\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، تبويب "المواقع"، واضغط زر + لإضافة إعداد جديد:

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

   بعد إدخال الإعدادات، اضغط "إضافة" أو "حفظ". سيقوم ServBay بتحديث الإعدادات تلقائيًا.

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

3. زيارة موقع التطوير

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

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

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

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

1. بناء وتصدير المشروع

   في المجلد الرئيسي للمشروع، نفذ الأوامر التالية. يقوم npm run build ببناء المشروع، ويقوم npm run export بتوليد ملفات HTML ثابتة داخل مجلد dist:

   macOS:

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

   Windows:

   cd C:\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، تبويب "المواقع"، اضغط زر + لإضافة إعداد جديد:

   • الاسم (Name): مثل Nuxt.js Prod Site (Static)
   • النطاق (Domain): مثل nuxt-prod.servbay.demo
   • نوع الموقع (Website Type): حدد ثابت (Static)
   • جذر الموقع (Website Root): مسار مجلد الملفات الناتجة:
     • macOS: /Applications/ServBay/www/servbay-nuxt-app/dist
     • Windows: C:\ServBay\www\servbay-nuxt-app\dist

   أكمل الإعدادات بالضغط على "إضافة" أو "حفظ". ServBay سيطبّق الإعدادات الجديدة فورًا.

3. زيارة موقع الإنتاج

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

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

الخلاصة

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