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

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

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

準備

まず下記記事を参考にExpressのアプリを作成してください。

【Node.js】Express入門

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


sample-app/
|-- bin/
|   |-- www
|-- node_modules/
|-- public/
|   |-- images/
|   |-- javascripts/
|   `-- stylesheets/
|      `-- style.css
|-- routes/
|   |-- index.js
|   `-- users.js
|-- views/
|   |-- index.ejs
|   `-- users.ejs
|-- app.js
|-- package-lock.json
`-- package.json

pm2のインストール

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


npm install pm2 -g

Browsersyncとnpm-run-allのインストール

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


npm install npm-run-all browser-sync -D

Browsersyncの設定ファイルを作成


npx browser-sync init

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


module.exports = {
    files: [ // 変更を検知したいファイルの記述します
        "./public/stylesheets/style.css",
        "./**/*.js",
        "./*.js",
        "./**/*.ejs",
    ],
    proxy: "localhost:3000", // Expressのポートを指定
    port: 4000, // Browsersyncのポートを指定
};

起動スクリプトを記述

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


"scripts": {
    "devstart": "run-p pm2 bs",
    "pm2": "pm2-dev bin/www",
    "bs": "browser-sync start --config bs-config.js"
},

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

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と入力します。

npm run devstart

> sample-app@0.0.0 devstart
> run-p pm2 bs


> sample-app@0.0.0 pm2
> pm2-dev bin/www


> sample-app@0.0.0 bs
> browser-sync start --config bs-config.js

[Browsersync] Proxying: http://localhost:3000
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:4000
    External: http://192.168.11.10:4000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Watching files...
===============================================================================
--- PM2 development mode ------------------------------------------------------
Apps started         : www
Processes started    : 1
Watch and Restart    : Enabled
Ignored folder       : node_modules
===============================================================================

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

参考