【Node.js】Express + pm2 + Browsersyncでホットリロードを実現

2021.08.17

Expressで開発をする際、通常はファイル変更のたびにサーバーを再起動してブラウザをリロードしなければ反映されませんが、この記事ではpm2とBrowsersyncを使うことによってそれらを自動で行う方法を解説します。

pm2とは	本番環境用のプロセスマネージャー。バックグラウンドでのサーバー起動、ログ管理、監視等が簡単にできる。もちろん開発環境でも使用可能。
Browsersyncとは	ファイルの変更を監視してブラウザを自動でリロードしてくれるツール。

準備

まず下記記事を参考にExpressのアプリを作成してください。【Node.js】Express入門

ディレクトリ構造は以下のようになっていると仮定してください。

pm2をグローバルにインストールします。

npm-run-allは複数のnpmスクリプトを並列または順次実行するためのツールです。

上記コマンドを実行するとbs-config.jsが作成されますので以下のように記述します。

package.jsonに起動スクリプトを記述します。 scriptsの箇所を以下のように記述します。

各スクリプトの説明は以下の通りです。

`pm2-dev bin/www`	デバッグモードでアプリケーションを起動します。ファイルの変更があればサーバーを再起動します。`pm2 start bin/www --watch`とほぼ同じです。
`browser-sync start --config bs-config.js`	設定ファイル（`bs-config.js`）と元にBrowsersyncを起動します。
`run-p pm2 bs`	`pm2`と`bs`を並列に実行します。`run-p`は並列、`run-s`は順次実行です。

スクリプトの登録が完了したら実際に起動してみましょう。 package.jsonと同じ階層でnpm run devstartと入力します。

起動したらhttp://localhost:4000にアクセスして、ファイル変更時に自動で画面に反映されれば成功です。