ウェブサイト検索

Angular CLI と PM2 を使用して Angular アプリを作成および実行する方法


Angular CLI は、Angular フレームワークのコマンドライン インターフェイスであり、開発中にアプリケーションをローカルで作成、構築、実行するために使用されます。

これは、開発サーバー上で Angular プロジェクトを構築してテストするように設計されています。ただし、運用環境でアプリケーションを永久に実行/維持したい場合は、PM2 などの Node.js プロセス マネージャーが必要です。

PM2 は、ロード バランサが組み込まれた、Node.js アプリケーション向けの、人気があり、高度で機能が豊富な運用プロセス マネージャーです。

その機能セットには、アプリケーションの監視、マイクロサービス/プロセスの効率的な管理、アプリケーションのクラスター モードの実行、アプリケーションのグレースフル リスタートとシャットダウンのサポートが含まれます。また、アプリケーション ログなどの簡単な管理もサポートしています。

この記事では、Angular CLIPM2 Node.js プロセス マネージャーを使用してAngular アプリケーションを実行する方法を説明します。これにより、開発中にアプリケーションを継続的に実行できます。

要件

続行するには、サーバーに次のパッケージがインストールされている必要があります。

  • Node.js と NPM
  • 角度 CLI
  • PM2

: Linux システムにすでに Node.jsNPM がインストールされている場合は、 にジャンプしてください。 >ステップ2です。

ステップ 1: Linux に Node.js をインストールする

最新バージョンの Node.js をインストールするには、まず、図に示すようにシステムにNodeSource リポジトリを追加し、パッケージをインストールします。 Linux ディストリビューションにインストールするNode.js バージョンに応じて正しいコマンドを実行することを忘れないでください。

Ubuntu に 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.jsNPM をインストールしたら、次のコマンドを使用してバージョンを確認できます。

node -v
npm -v

ステップ 2: Angular CLI と PM2 のインストール

次に、 図に示すようにnpm パッケージ マネージャーを使用してAngular CLIPM2をインストールします。次のコマンドの -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

次に、アプリケーションの Web インターフェイスにアクセスするには、次のスクリーンショットに示すように、ブラウザを開いてアドレス http://localhost:4200 を使用して移動します。

このガイドでは、Angular CLIPM2 プロセス マネージャーを使用して Angular アプリケーションを実行する方法を説明しました。さらに共有したいアイデアや質問がある場合は、以下のフィードバック フォームからお問い合わせください。