إنشاء وتشغيل مشروع Angular في ServBay

نظرة عامة

يهدف هذا الدليل لتوضيح كيفية إنشاء وضبط وتشغيل مشروع Angular ضمن بيئة تطوير الويب المحلية ServBay. سنستفيد من بيئة Node.js القوية التي يقدمها ServBay بالإضافة إلى أدوات إدارة المواقع (كانت تُسمّى "المضيف") لضبط بيئة التطوير والإنتاج بسهولة، وضمان الوصول الآمن عبر نطاقات مخصصة وشهادات SSL. ServBay يأتي مدمجا بباقة واسعة من الحزم البرمجية المطلوبة للتطوير (كانت تُسمّى "الخدمات") مثل Node.js، PHP، Python، Go، Java وقواعد البيانات، مما يجعله خيارا مثاليا للتطوير المحلي الكامل.

ما هو Angular؟

Angular هو إطار عمل مفتوح المصدر للواجهة الأمامية من تطوير Google، يُستخدم لبناء تطبيقات صفحة واحدة (SPA) عالية الأداء وديناميكية. يعتمد على TypeScript ويوفر مجموعة أدوات متكاملة وهيكلية تطوير منظمة، ما يجعله مناسبا لبناء تطبيقات المؤسسات المعقدة والكبيرة.

الميزات الأساسية والفوائد في Angular

• بنية قائمة على المكونات: بناء واجهات المستخدم بالاعتماد على مكونات قابلة لإعادة الاستخدام، مما يزيد من قابلية صيانة وتوسعة الكود.
• دعم TypeScript: يوفر تحقق أنواعي ثابت وميزات برمجة كائنية قوية ترفع جودة الكود وكفاءة التطوير.
• حقن الاعتمادية: يجعل اختبار وإدارة اعتمادية المكونات أسهل.
• واجهة أوامر قوية (CLI): يسهّل إنشاء المشاريع وتوليد الكومبوننتات والخدمات والوحدات، بالإضافة للبناء والاختبار.
• حلول مدمجة: يحتوي على وحدات جاهزة لمعالجة التوجيه، النماذج، وعميل HTTP والمزيد من المتطلبات الشائعة.
• تحسين الأداء: يدعم تقنيات مثل الـ AOT (التحويل المسبق)، وعملية إزالة الكود غير المستخدم (tree-shaking) لتحسين أداء التطبيق.

بدمج Angular مع البيئة المستقرة التي يوفرها ServBay، يمكن للمطورين التركيز بشكل أكبر على كتابة منطق الأعمال وتطويره.

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

قبل البدء، تأكد من تجهيز ما يلي:

1. تثبيت ServBay: تثبيت وتشغيل ServBay بنجاح (يدعم macOS وWindows).
2. تفعيل حزمة Node.js: من لوحة تحكم ServBay، تأكد من تثبيت وتفعيل إصدار Node.js المطلوب. يسمح ServBay بتثبيت عدة إصدارات من Node.js والتنقل بينها بسهولة.

إعداد وتشغيل مشروع Angular باستخدام ServBay

سنستخدم بيئة Node.js التي يوفرها ServBay لإنشاء وتشغيل مشروع Angular. في وضع التطوير، سنستخدم إمكانيات ServBay لإعداد وكيل عكسي يشير إلى خادم تطوير Angular؛ أما في وضع الإنتاج فسنقوم ببناء المشروع ثم ضبط خدمة الملفات الثابتة في ServBay.

1. إنشاء مشروع Angular جديد

نحتاج أولاً إلى استخدام أداة Angular CLI لإنشاء المشروع.

1. تثبيت Angular CLI: افتح الطرفية (Terminal) وقم بتثبيت Angular CLI بشكل عالمي باستعمال بيئة Node.js الخاصة بـ ServBay. إذا لم تتم إضافة بيئة ServBay Node.js تلقائياً إلى متغير PATH في نظامك، قد تحتاج أولًا لتبديل البيئة من خلال ServBay. غالباً ServBay يقوم بذلك تلقائياً.

   npm install -g @angular/cli

   بهذا سيتم تثبيت الأمر ng عالمياً لتتمكن من استخدام Angular CLI من أي مكان.

2. إنشاء مشروع Angular جديد: توجه إلى مجلد الجذر المقترح للموقع الذي يوفره ServBay، ثم استخدم الأمر ng new لإنشاء مشروع جديد. يُنصح باستخدام اسم يعكس العلامة التجارية لـ ServBay مثل servbay-angular-app.

   macOS:

   cd /Applications/ServBay/www
   ng new servbay-angular-app

   Windows:

   cd C:\ServBay\www
   ng new servbay-angular-app

   أثناء التنفيذ سيطرح Angular CLI بعض الأسئلة حول إعدادات المشروع، يمكنك الإجابة عليها حسب رغبتك:

   ? Would you like to add Angular routing? Yes  # لإضافة خاصية التوجيه، يُنصح باختيار Yes
   ? Which stylesheet format would you like to use? CSS # لاختيار نوع ملفات الأنماط، مثال CSS

   انتظر حتى الانتهاء، حيث سينشئ Angular CLI مجلدًا باسم servbay-angular-app ضمن مجلد الجذر للموقع ويحتوي على هيكل المشروع الأساسي:

   • macOS: /Applications/ServBay/www/servbay-angular-app
   • Windows: C:\ServBay\www\servbay-angular-app

3. تثبيت اعتمادات المشروع: ادخل إلى مجلد المشروع الجديد وثبّت الاعتمادات المحلية المطلوبة.

   cd servbay-angular-app
   npm install

   يقوم الأمر npm install بقراءة قائمة الاعتمادات في ملف package.json وتثبيتها في مجلد node_modules.

2. تعديل محتوى الصفحة الرئيسية في Angular (اختياري)

للتحقق من نجاح تشغيل المشروع، يمكنك تعديل محتوى الصفحة الرئيسية ببساطة.

1. تعديل ملف src/app/app.component.html: استخدم محرر الكود المفضل لديك وافتح الملف servbay-angular-app/src/app/app.component.html. أزل محتواه أو عدله ليظهر عبارة ترحيبية بسيطة مثل "Hello ServBay!".

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
     <p>This is your Angular app running via ServBay!</p>
   </div>

3. تشغيل المشروع في وضع التطوير

في أثناء التطوير عادةً ما تستخدم خادم Angular CLI (ng serve) الذي يدعم التحديث الفوري والميزات المفيدة. بعدها، سنضبط في ServBay وكيلًا عكسيًا ليستقبل الطلبات عبر نطاق محلي ويوجهها لخادم التطوير.

1. تشغيل خادم تطوير Angular: من دليل المشروع الجذر، شغّل الخادم على منفذ مثل 8585 لتتجنب تضارب المنافذ مع خادم الويب الافتراضي الخاص بـ ServBay.

   macOS:

   cd /Applications/ServBay/www/servbay-angular-app
   ng serve --port 8585

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng serve --port 8585

   سيقوم هذا الأمر ببناء مشروعك وتشغيل خادم ويب على http://localhost:8585/. أبق نافذة الطرفية مفتوحة خلال العمل.

2. ضبط موقع ServBay (وكيل عكسي): من لوحة تحكم ServBay، ادخل إلى إعدادات "المواقع" (كانت تُسمى "المضيف"). أضف موقعًا جديدًا وقم بتعيين وكيل عكسي يصل نطاقًا محليًا إلى خادم التطوير الذي شغّلته.

   • الاسم (Name): مثال My Angular Dev Site (اسم للإشارة فقط داخل ServBay)
   • النطاق (Domain): يُنصح بنطاق اختباري خاص بـ ServBay مثل servbay-angular-dev.servbay.demo. يقوم ServBay تلقائياً بتحويل نطاقات .servbay.demo إلى 127.0.0.1.
   • نوع الموقع (Website Type): اختر وكيل عكسي (Reverse Proxy).
   • عنوان الوكيل (Proxy Address): ضع 127.0.0.1.
   • منفذ الوكيل (Proxy Port): أدخل المنفذ الذي استخدمته في الأمر ng serve مثل 8585.

   بعد الانتهاء، احفظ وفعّل الإعدادات الجديدة.

3. زيارة موقعك بنمط التطوير: افتح المتصفح وادخل النطاق الذي ضبطته https://servbay-angular-dev.servbay.demo.

   بما أنك دخلت عبر ServBay، والذي يوفر تلقائياً شهادات SSL للمواقع المحلية (عبر ServBay User CA أو ServBay Public CA)، ستتمكن من الوصول للموقع بصورة آمنة عبر HTTPS، مما يحاكي وضع الإنتاج ويساعد على اكتشاف مشاكل الأمان مبكرًا.

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

عند إكمال تطوير مشروع Angular وتريد نشره، عليك إنشاء نسخة إنتاجية محسنة. سيُنتج ذلك ملفات ثابتة يمكن استضافتها بأي خادم ملفات ثابتة. سنستخدم خدمة المواقع الثابتة في ServBay لهذا الغرض.

1. بناء نسخة الإنتاج: من دليل المشروع الجذر، شغّل الأمر التالي لبناء نسخة الإنتاج:

   macOS:

   cd /Applications/ServBay/www/servbay-angular-app
   ng build --prod
   # أو في إصدارات Angular CLI الحديثة:
   # ng build

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng build --prod
   # أو في إصدارات Angular CLI الحديثة:
   # ng build

   الخيار --prod (وأصبح افتراضيًا في بعض الإصدارات) يُفعّل تحسينات الإنتاج مثل التحويل المسبق، وضغط الكود، وإزالة الكود غير المستخدم. ستجد الملفات الناتجة في المجلد dist/servbay-angular-app (اسم المجلد يعتمد على إعدادات المشروع في العادة).

2. ضبط موقع ServBay (خدمة ملفات ثابتة): من لوحة تحكم ServBay، ادخل لإعدادات "المواقع" وأضف موقعًا جديدًا للنطاق المحلي الذي سيخدم ملفات الإنتاج الثابتة.

   • الاسم (Name): مثال My Angular Production Site

   • النطاق (Domain): استخدم نطاق اختبار آخر مثل servbay-angular-prod.servbay.demo.

   • نوع الموقع (Website Type): اختر ثابت (Static).

   • دليل الجذر للموقع (Website Root Directory): وجهه مباشرة إلى مجلد البناء النهائي، والذي غالبا ما سيكون:

     • macOS: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
     • Windows: C:\ServBay\www\servbay-angular-app\dist\servbay-angular-app

     تأكد من أنه الدليل الذي يحتوي على ملف index.html.

   بعد انتهاء الإعدادات، احفظ وفعّل التغييرات.

3. زيارة موقع نسخة الإنتاج: افتح المتصفح وادخل النطاق المضبوط https://servbay-angular-prod.servbay.demo.

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

مزايا ServBay في تطوير Angular

• بيئة متكاملة: إدارة وإعداد إصدارات Node.js بسهولة تامة دون متاعب ضبط المتغيرات البيئية.
• إدارة مواقع مرنة: ضبط الوكيل العكسي وخدمة المواقع الثابتة عبر واجهة سهلة توفر التحويل السريع بين بيئة التطوير والإنتاج.
• دعم SSL مدمج: شهادات SSL مجانية ومعدة تلقائياً لبيئة التطوير المحلية لمحاكاة التشغيل الفعلي دون تحذيرات محتوى مختلط.
• دعم عدة تقنيات: إذا كان مشروعك يتضمن API خلفية (مثل Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot وغيرها) أو قواعد بيانات (MySQL, PostgreSQL, MongoDB, Redis)، يمكن لـ ServBay دمج هذه الخدمات بسهولة لتوفير بيئة تطوير محلية متكاملة، مع دعم متجدد لهذه الحزم.
• نسخ احتياطي واستعادة: يوفر ServBay أدوات نسخ احتياطي للإعدادات والمواقع وقواعد البيانات وشهادات SSL لتعزيز الحماية والأمان في التطوير المحلي.
• إعادة ضبط كلمات المرور لقواعد البيانات: ميزة لإعادة ضبط كلمة مرور root لقاعدتي بيانات MySQL وMariaDB وPostgreSQL، لمعالجة العقبات الشائعة لدى المطورين.

الأسئلة الشائعة (FAQ)

• س: عند تشغيل ng new أو ng serve تظهر رسالة command not found: ng، ماذا أفعل؟ ج: غالباً لم يتم تثبيت Angular CLI بشكل صحيح أو لم تتم إضافته لمسار النظام PATH. تأكد من تثبيت @angular/cli عالمياً (npm install -g @angular/cli) وأن بيئة Node.js في ServBay مفعلة بشكل صحيح. جرّب إعادة تشغيل الطرفية أو ServBay.
• س: فشل تشغيل ng serve مع ظهور رسالة أن المنفذ مشغول؟ ج: المنفذ المختار (مثل 8585) مستخدم من تطبيق آخر؛ جرب في الأمر استخدام منفذ آخر غير مستخدم، مثل ng serve --port 8586، ثم عدّل إعداد موقع ServBay ليستخدم المنفذ الجديد.
• س: ضبطت موقع ServBay ولكن عند زيارة النطاق لا يتم تحميل الصفحة؟ ج: تحقق مما يلي:
  • أن ServBay يعمل حالياً.
  • في بيئة التطوير، تأكد أن الأمر ng serve فعال والمنفذ مطابق لما هو في إعداد الوكيل العكسي.
  • في بيئة الإنتاج، تأكد أن إعداد "دليل الجذر" في موقع ServBay يشير إلى مجلد البناء الصحيح الذي يحتوي على ملف index.html (dist/اسم-مشروعك).
  • راجع ملفات سجلات ServBay فقد تجد تفاصيل أكثر حول الخطأ.
  • تأكد أن النطاق في المتصفح مطابق تماماً لما هو محدد في إعدادات ServBay للموقع.
• س: هل يمكنني استخدام خوادم ويب مختلفة (Caddy/Nginx/Apache) في ServBay لاستضافة نسخة الإنتاج في Angular؟ ج: نعم، يدعم ServBay استخدام خوادم Caddy أو Nginx (وأيضًا Apache) لخدمة الملفات الثابتة. عند ضبط موقع ثابت سيستخدم ServBay الخادم النشط حاليًا لتقديم الملفات بكفاءة.

ملخص

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