كيفية تشغيل تطبيقات Angular باستخدام Angular CLI و PM2

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

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

PM2 هو مدير عمليات إنتاجي شهير ومتقدم وغني بالميزات لتطبيقات Node.js مع توازن الحمل المدمج.

تشمل ميزاته دعم لمراقبة التطبيقات، وإدارة كفءة للخدمات الصغيرة/العمليات، وتشغيل التطبيقات في وضع تجمع، وإعادة تشغيل وإيقاف تشغيل الطبيقات بانسيابية. كما أنه يدعم إدارة سهلة لسجلات التطبيقات، والمزيد بكثير.

في هذه المقالة، سنريك كيفية تشغيل تطبيقات Angular باستخدام Angular CLI ومدير عمليات Node.js PM2. وهذا يتيح لك تشغيل تطبيقك بشكل مستمر أثناء التطوير.

المتطلبات

يجب أن تكون لديك الحزم التالية مثبتة على خادمك للمتابعة:

• Node.js و NPM
• Angular CLI
• PM2

ملحوظة: إذا كان لديك بالفعل Node.js و NPM مثبتين على نظام Linux الخاص بك، انتقل إلى الخطوة 2.

الخطوة 1: تثبيت Node.js في Linux

لتثبيت أحدث إصدار من Node.js، أضف أولاً مستودع NodeSource على نظامك كما هو موضح وثبت الحزمة. لا تنسَ تشغيل الأمر الصحيح لإصدار Node.js الذي تريد تثبيته على توزيعة Linux الخاصة بك.

تثبيت Node.js على Ubuntu

------------- For Node.js v19.x ------------- 
$ curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash - &&\
$ sudo apt-get install -y nodejs

------------- For Node.js v18.x -------------
$ curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\
$ sudo apt-get install -y nodejs

------------- For Node.js v16.x -------------
$ curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - &&\
$ sudo apt-get install -y nodejs

------------- For Node.js v14.x -------------
$ curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - &&\
$ sudo apt-get install -y nodejs

تثبيت Node.js على Debian

------------- For Node.js v19.x ------------- 
$ curl -fsSL https://deb.nodesource.com/setup_19.x | bash - &&\
$ sudo apt-get install -y nodejs

------------- For Node.js v18.x ------------- 
$ curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&\
$ sudo apt-get install -y nodejs

------------- For Node.js v16.x ------------- 
$ curl -fsSL https://deb.nodesource.com/setup_16.x | bash - &&\
$ sudo apt-get install -y nodejs

------------- For Node.js v14.x ------------- 
$ curl -fsSL https://deb.nodesource.com/setup_14.x | bash - &&\
$ sudo apt-get install -y nodejs

تثبيت Node.js على توزيعات RHEL

------------- For Node.js v19.x ------------- 
$ curl -fsSL https://rpm.nodesource.com/setup_19.x | sudo bash -
$ sudo yum install -y nodejs

------------- For Node.js v18.x ------------- 
$ curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
$ sudo yum install -y nodejs

------------- For Node.js v16.x ------------- 
$ curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -
$ sudo yum install -y nodejs

------------- For Node.js v14.x ------------- 
$ curl -fsSL https://rpm.nodesource.com/setup_14.x | sudo bash -
$ sudo yum install -y nodejs

بالإضافة إلى ذلك، قم بتثبيت أدوات التطوير على نظامك حتى تتمكن من تجميع وتثبيت الوصلات الطبيعية من NPM.

$ sudo apt install build-essential  [On Debian/Ubuntu]
# yum install gcc-c++ make          [On CentOS/RHEL]
# dnf install gcc-c++ make          [On Fedora]

بمجرد تثبيت Node.js و NPM، يمكنك التحقق من إصداراتهما باستخدام الأوامر التالية.

$ node -v
$ npm -v

الخطوة 2: تثبيت Angular CLI و PM2

تثبيت Angular CLI و PM2 باستخدام مدير حزم npm كما هو موضح. في الأوامر التالية، يعني الخيار -g تثبيت الحزم على نطاق عالمي – قابلة للاستخدام من قبل جميع مستخدمي النظام.

$ sudo npm install -g @angular/cli        #install Angular CLI
$ sudo npm install -g pm2                 #install PM2

الخطوة 3: إنشاء مشروع Angular باستخدام Angular CLI

الآن انتقل إلى دليل webroot على الخادم الخاص بك، ثم قم بإنشاء، بناء، وخدمة تطبيق Angular الخاص بك (يُسمى sysmon-app، استبدل هذا باسم تطبيقك).

$ cd /srv/www/htdocs/
$ sudo ng new sysmon-app        #follow the prompts

بعد ذلك، انتقل إلى دليل التطبيق (المسار الكامل هو /srv/www/htdocs/sysmon-app) الذي تم إنشاؤه للتو وقم بخدمة التطبيق كما هو موضح.

$ cd sysmon-app
$ sudo ng serve

من إخراج أمر ng serve، يمكنك رؤية أن التطبيق Angular لا يعمل في الخلفية، ولا يمكنك الوصول إلى موجه الأوامر بعد الآن. لذلك لا يمكنك تنفيذ أي أوامر أخرى أثناء تشغيله.

لذلك، تحتاج إلى مدير عمليات للتحكم في التطبيق وإدارته: تشغيله بشكل مستمر (دائمًا) وأيضًا تمكينه من التشغيل التلقائي عند بدء تشغيل النظام كما هو موضح في القسم التالي.

قبل الانتقال إلى القسم التالي، قم بإيقاف عملية الضغط على [Ctl + C] لتحرير موجه الأوامر.

الخطوة 4: تشغيل مشروع Angular باستخدام PM2 بشكل دائم

لجعل تطبيقك الجديد يعمل في الخلفية، مما يحرر موجه الأوامر، استخدم PM2 لخدمته، كما هو موضح. PM2 يساعد أيضًا في مهام الإدارة النظامية الشائعة مثل إعادة التشغيل عند الفشل، والإيقاف، وإعادة تحميل التكوينات بدون فترة توقف، والمزيد من ذلك.

$ pm2 start "ng serve" --name sysmon-app

ثم، للوصول إلى واجهة تطبيقك على الويب، افتح متصفحًا وانتقل باستخدام العنوان http://localhost:4200 كما هو موضح في الصورة التالية.

في هذا الدليل، قمنا بشرح كيفية تشغيل تطبيقات Angular باستخدام Angular CLI ومدير عمليات PM2. إذا كانت لديك أفكار إضافية للمشاركة أو أسئلة، فلا تتردد في الاتصال بنا من خلال النموذج التالي للتغذية الراجعة.