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 バージョンに応じて正しいコマンドを実行することを忘れないでください。
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.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
次に、アプリケーションの Web インターフェイスにアクセスするには、次のスクリーンショットに示すように、ブラウザを開いてアドレス http://localhost:4200
を使用して移動します。
このガイドでは、Angular CLI とPM2 プロセス マネージャーを使用して Angular アプリケーションを実行する方法を説明しました。さらに共有したいアイデアや質問がある場合は、以下のフィードバック フォームからお問い合わせください。