إنشاء وتشغيل مشروع 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 لديك.
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. إذا لم تُضاف مسارات Node.js الخاصة بـ ServBay تلقائيًا إلى PATH في نظامك، قد تحتاج إلى الانتقال يدويًا إلى بيئة Node.js الخاصة بـ ServBay، لكن غالبًا يقوم البرنامج بذلك تلقائيًا.

   npm install -g @angular/cli

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

2. إنشاء مشروع Angular جديد: انتقل إلى دليل المواقع الأساسي المقترح من ServBay /Applications/ServBay/www، واستخدم الأمر ng new لإنشاء مشروع جديد. يفضل اختيار اسم يعكس علامة ServBay مثل servbay-angular-app.

   cd /Applications/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 بداخله البنية الأساسية للمشروع.

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

   cd servbay-angular-app
   npm install

   يقوم أمر npm install بتنزيل جميع الاعتمادات المذكورة في package.json إلى مجلد node_modules.

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

للتأكد من نجاح التشغيل، يمكنك تعديل الصفحة الرئيسية للمشروع لعرض رسالة مخصصة.

1. تعديل ملف 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: من جذر المشروع (/Applications/ServBay/www/servbay-angular-app) شغّل الخادم على منفذ محدد، مثل 8585 (لتجنب تعارض المنافذ مع ServBay الأصلي).

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

   سيبدأ الخادم على http://localhost:8585/، أبقه مشغلاً أثناء التطوير.

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

   • الاسم: مثلاً My Angular Dev Site (اسم داخلي في ServBay)
   • النطاق: يُوصى باستخدام نطاق تجريبي مثل servbay-angular-dev.servbay.demo (كل نطاق .servbay.demo يتم توجيهه تلقائيًا إلى 127.0.0.1).
   • نوع الموقع: اختر وكيل عكسي (Reverse Proxy).
   • عنوان الوكيل العكسي: أدخل 127.0.0.1.
   • منفذ الوكيل العكسي: أدخل المنفذ المستخدم مع ng serve، مثل 8585.

   بعد الإعداد، احفظ وطبّق التغييرات.

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

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

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

عند اكتمال التطوير، يلزمك بناء نسخة إنتاجية عالية الأداء لخدمة الملفات الثابتة باستخدام ServBay.

1. بناء نسخة الإنتاج: من جذر المشروع (/Applications/ServBay/www/servbay-angular-app)، استخدم الأمر التالي:

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

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

2. إعداد موقع ServBay (خدمة ملفات ساكنة): افتح إدارة المواقع في ServBay، وأضف موقعًا جديدًا يشير إلى مجلد ملفّات البناء الذي يحتوي على index.html.

   • الاسم: مثلاً My Angular Production Site
   • النطاق: يُوصى باستخدام نطاق تجريبي مختلف مثل servbay-angular-prod.servbay.demo.
   • نوع الموقع: اختر ساكن (Static).
   • دليل الجذر: وجّه إلى مجلد إنتاج المشروع: غالبًا /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app.

   احفظ وطبّق الإعدادات.

3. زيارة موقع الإنتاج: من المتصفح، انتقل إلى: https://servbay-angular-prod.servbay.demo.

   سترى نسختك الإنتاجية، تخدمها ServBay بواسطة خادم ويب عالي الأداء (Caddy أو Nginx حسب الإعداد)، مع إعداد 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 تكاملًا سهلاً لهذه الخدمات وتحديثات مستمرة لكل الحزم.
• النسخ الاحتياطي والاستعادة: حفظ واسترجاع إعداداتك والمواقع وقواعد البيانات وشهادات SSL لحماية بيانات التطوير المحلية.
• إعادة تعيين كلمات مرور قواعد البيانات: أداة مُضمّنة لإعادة تعيين كلمة مرور root لقواعد بيانات MySQL, MariaDB, PostgreSQL بسهولة.

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

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

ملخص

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