Expressで開発をする際、通常はファイル変更のたびにサーバーを再起動してブラウザをリロードしなければ反映されませんが、この記事ではpm2とBrowsersyncを使うことによってそれらを自動で行う方法を解説します。
- pm2とは
- 本番環境用のプロセスマネージャー。バックグラウンドでのサーバー起動、ログ管理、監視等が簡単にできる。もちろん開発環境でも使用可能。
- Browsersyncとは
- ファイルの変更を監視してブラウザを自動でリロードしてくれるツール。
準備
まず下記記事を参考に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
にアクセスして、ファイル変更時に自動で画面に反映されれば成功です。