Angular CLI 및 PM2를 사용하여 Angular 앱을 만들고 실행하는 방법

Angular CLI는 개발하는 동안 로컬에서 애플리케이션을 생성, 빌드 및 실행하는 데 사용되는 Angular 프레임워크용 명령줄 인터페이스입니다.

개발 서버에서 Angular 프로젝트를 빌드하고 테스트하도록 설계되었습니다. 그러나 프로덕션 환경에서 애플리케이션을 영원히 실행/유지하려면 PM2와 같은 Node.js 프로세스 관리자가 필요합니다.

PM2는 로드 밸런서가 내장된 Node.js 애플리케이션을 위한 인기 있고 기능이 풍부한 고급 생산 프로세스 관리자입니다.

해당 기능 세트에는 애플리케이션 모니터링, 마이크로 서비스/프로세스의 효율적인 관리, 애플리케이션 클러스터 모드 실행, 애플리케이션의 정상적인 재시작 및 종료에 대한 지원이 포함됩니다. 또한 애플리케이션 로그 등을 쉽게 관리할 수 있도록 지원합니다.

이 문서에서는 Angular CLI 및 PM2 Node.js 프로세스 관리자를 사용하여 Angular 애플리케이션을 실행하는 방법을 보여줍니다. 이를 통해 개발 중에 애플리케이션을 지속적으로 실행할 수 있습니다.

요구사항

계속하려면 서버에 다음 패키지가 설치되어 있어야 합니다.

Node.js와 NPM
각도 CLI
PM2

참고: Linux 시스템에 Node.js 및 NPM이 이미 설치되어 있는 경우 로 이동하세요. >2단계.

1단계: Linux에 Node.js 설치

최신 버전의 Node.js를 설치하려면 먼저 표시된 대로 시스템에 NodeSource 저장소를 추가하고 패키지를 설치하세요. Linux 배포판에 설치하려는 Node.js 버전에 맞는 올바른 명령을 실행하는 것을 잊지 마세요.

우분투에 Node.js 설치

------------- 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

Debian에 Node.js 설치

------------- 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

RHEL 기반 배포판에 Node.js 설치

------------- 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 설치

다음으로, 그림과 같이 npm 패키지 관리자를 사용하여 Angular CLI 및 PM2를 설치합니다. 다음 명령에서 -g 옵션은 모든 시스템 사용자가 사용할 수 있는 전역적으로 패키지를 설치한다는 의미입니다.

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

3단계: Angular CLI를 사용하여 Angular 프로젝트 생성

이제 서버의 webroot 디렉터리로 이동한 다음 다음을 사용하여 Angular 앱(sysmon-app이라고 함, 이를 앱 이름으로 바꿈)을 생성, 빌드 및 제공합니다. 각도 CLI.

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

다음으로, 방금 생성된 애플리케이션(전체 경로는 /srv/www/htdocs/sysmon-app) 디렉터리로 이동하여 표시된 대로 애플리케이션을 제공합니다.

cd sysmon-app
sudo ng serve

ngserve 명령의 출력에서 Angular 앱이 백그라운드에서 실행되고 있지 않으며 더 이상 명령 프롬프트에 액세스할 수 없음을 알 수 있습니다. 따라서 실행 중에는 다른 명령을 실행할 수 없습니다.

따라서 애플리케이션을 제어하고 관리하려면 프로세스 관리자가 필요합니다. 애플리케이션을 지속적으로(영원히) 실행하고 다음 섹션에 설명된 대로 시스템 부팅 시 자동 시작되도록 활성화합니다.

다음 섹션으로 이동하기 전에 [Ctl + C]를 눌러 프로세스를 종료하여 명령 프롬프트를 비우세요.

4단계: PM2를 사용하여 Angular 프로젝트를 영원히 실행하기

새 애플리케이션을 백그라운드에서 실행하고 명령 프롬프트를 해제하려면 표시된 대로 PM2를 사용하여 제공하세요. PM2는 또한 장애 발생 시 다시 시작, 가동 중지 시간 없이 구성을 중지 및 다시 로드하는 등의 일반적인 시스템 관리 작업을 지원합니다.

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

다음으로, 애플리케이션의 웹 인터페이스에 액세스하려면 브라우저를 열고 다음 스크린샷에 표시된 대로 http://localhost:4200 주소를 사용하여 탐색하세요.

이 가이드에서는 Angular CLI 및 PM2 프로세스 관리자를 사용하여 Angular 애플리케이션을 실행하는 방법을 보여주었습니다. 공유할 추가 아이디어나 질문이 있는 경우 아래 피드백 양식을 통해 문의해 주세요.