Поиск по сайту:

Как создавать и запускать приложения Angular с помощью Angular CLI и PM2


Angular CLI — это интерфейс командной строки для платформы Angular, который используется для создания, сборки и локального запуска вашего приложения во время разработки.

Он предназначен для сборки и тестирования проекта Angular на сервере разработки. Однако, если вы хотите, чтобы ваши приложения постоянно работали в рабочей среде, вам понадобится менеджер процессов Node.js, такой как PM2.

PM2 — популярный, продвинутый и многофункциональный менеджер производственных процессов для приложений Node.js со встроенным балансировщиком нагрузки.

Его набор функций включает поддержку мониторинга приложений, эффективное управление микросервисами/процессами, запуск режима кластера приложений, а также плавный перезапуск и завершение работы приложений. Кроме того, он поддерживает простое управление журналами приложений и многое другое.

В этой статье мы покажем вам, как запускать приложения Angular с помощью Angular CLI и диспетчера процессов PM2 Node.js. Это позволяет вам непрерывно запускать приложение во время разработки.

Требования

Для продолжения на вашем сервере должны быть установлены следующие пакеты:

  • Node.js и NPM
  • Угловой интерфейс командной строки
  • ПМ2

Примечание. Если в вашей системе Linux уже установлены Node.js и NPM, перейдите к Шаг 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 submit вы можете видеть, что приложение Angular не работает в фоновом режиме, и вы больше не можете получить доступ к командной строке. Поэтому вы не можете выполнять какие-либо другие команды во время его работы.

Итак, вам нужен менеджер процессов для контроля и управления приложением: запускать его непрерывно (вечно), а также включать его автоматический запуск при загрузке системы, как описано в следующем разделе.

Прежде чем перейти к следующему разделу, завершите процесс, нажав [Ctl + C], чтобы освободить командную строку.

Шаг 4. Постоянное выполнение проекта Angular с использованием PM2

Чтобы новое приложение работало в фоновом режиме, освобождая командную строку, используйте для его обслуживания PM2, как показано. PM2 также помогает выполнять общие задачи системного администрирования, такие как перезапуск в случае сбоя, остановка и перезагрузка конфигураций без простоев и многое другое.

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

Затем, чтобы получить доступ к веб-интерфейсу вашего приложения, откройте браузер и перейдите по адресу http://localhost:4200, как показано на следующем снимке экрана.

В этом руководстве мы показали, как запускать приложения Angular с помощью Angular CLI и диспетчера процессов PM2. Если у вас есть какие-либо дополнительные идеи или вопросы, которыми вы можете поделиться, свяжитесь с нами через форму обратной связи ниже.