AngularCLIとPM2を使用してAngularアプリを実行する方法


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

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

PM2は、ロードバランサーが組み込まれたNode.jsアプリケーション向けの、人気があり、高度で機能豊富なプロダクションプロセスマネージャーです。その機能セットには、アプリケーションモニタリング、マイクロサービス/プロセスの効率的な管理、アプリケーションクラスターモードの実行、およびアプリケーションの正常な再起動とシャットダウンのサポートが含まれます。また、アプリケーションログの簡単な管理などをサポートします。

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

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

  1. Node.js and NPM
  2. Angular CLI
  3. PM2

注:LinuxシステムにNode.jsとNPMが既にインストールされている場合は、ステップ2にジャンプします。

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

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

$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -        #for Node.js version 12
$ curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash -        #for Node.js version 11
$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -        #for Node.js version 10
$ sudo apt install -y nodejs
# curl -sL https://deb.nodesource.com/setup_12.x | bash -    #for Node.js version 12
# curl -sL https://deb.nodesource.com/setup_11.x | bash -    #for Node.js version 11
# curl -sL https://deb.nodesource.com/setup_10.x | bash -     #for Node.js version 10
# apt install -y nodejs
# curl -sL https://rpm.nodesource.com/setup_12.x | bash -    #for Node.js version 12
# curl -sL https://rpm.nodesource.com/setup_11.x | bash -    #for Node.js version 11
# curl -sL https://rpm.nodesource.com/setup_10.x | bash -    #for Node.js version 10
# yum -y install nodejs
# dnf -y install nodejs   [On RHEL 8 and Fedora 22+ versions]

さらに、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:AngularCLIとPM2をインストールする

次に、図のようにnpmパッケージマネージャーを使用してAngularCLIとPM2をインストールします。次のコマンドで、 -g オプションは、パッケージをグローバルにインストールすることを意味します。これは、すべてのシステムユーザーが使用できます。

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

ステップ3:AngularCLIを使用してAngularプロジェクトを作成する

次に、サーバーのwebrootディレクトリに移動し、Angular CLIを使用して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

ngserveコマンドの出力から、Angularアプリがバックグラウンドで実行されていないことがわかります。コマンドプロンプトにアクセスできなくなりました。したがって、実行中は他のコマンドを実行できません。

したがって、アプリケーションを制御および管理するには、プロセスマネージャーが必要です。アプリケーションを継続的に(永久に)実行し、次のセクションで説明するように、システムの起動時に自動起動できるようにします。

次のセクションに進む前に、 [Ctl + C] を押してプロセスを終了し、コマンドプロンプトを解放します。

ステップ4:PM2を使用してAngularプロジェクトを永久に実行する

図のように、新しいアプリケーションをバックグラウンドで実行してコマンドプロンプトを解放するには、PM2を使用してアプリケーションを提供します。 PM2は、障害時の再起動、停止、ダウンタイムなしの構成の再ロードなど、一般的なシステム管理タスクも支援します。

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

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

PM2ホームページ:http://pm2.keymetrics.io/

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