express+webpackな環境でホットリロード設定を行い快適な開発環境を構築する

はじめまして。最近SHIFTに入社した三輪です。SHIFT社内のプロダクト開発に従事しております。

今までサーバサイドはRailsを使ってきましたが、初めてexpressを使うことになったので開発してるときに役立ったホットリロードの設定方法をまとめてみようと思います。

ホットリロード

現在の開発環境ではWebpackでビルドしてNodeサーバの起動を行っている。
Webpackでは--watchオプションがあり、ファイル変更時は自動でビルドを行ってくれるが、サーバ再起動しないといけない。
それはかなり面倒なので、expressの開発でホットリロード出来る環境を作る。

解決策

Webpackの--watchオプションとnodemonを併用することで簡単に解決出来る。
ファイルを変更するとWebpackが変更を検知して自動的にリビルドしてくれて、それが終わるとnodemonがdistフォルダに出力されたjsファイルの変更を検知して、自動でサーバ再起動を行ってくれる。

方法

1. webpack.config.jsでビルド後出力先にdist/index.jsを指定

2. yarn add nodemon でnodemonをインストール

3. package.jsonのスクリプトを下記のように編集する

// package.json

{
  ...
  "scripts": {
    "start": "npx webpack --watch & npx nodemon dist/index.js"
  },
  ...
}

これでOK。yarn startすればサーバ起動し、ファイル変更すればホットリロードしてくれる。

Webpackとは

複数のファイルを1つにまとめて出力してくれるツールのこと。これをモジュールバンドラと呼ぶ。
基本的にはjsファイルをバンドルする役割が多いが、cssや画像などもバンドルしてくれる。

利点としては下記2つ
・機能ごとにファイルを分けて開発出来るので、開発効率・保守性アップにつながる
・複数のjsファイルを1ページで読み込む場合、リクエスト数が増加するためパフォーマンスが悪化する。1ファイルにまとめることでリクエスト数を1回だけにし、パフォーマンス向上につなげることが出来る

参考
・Webpack
・Github

nodemonとは

ファイルを監視して自動でサーバを再起動してくれるツールのこと。 nodeコマンドの代わりにnodemonコマンドでファイル実行すると、ファイル変更時にプロセスが自動で再起動する。 下記コマンドでサーバ立ち上げ

$ npx nodemon dist/index.js

すると、プロセスを立ち上げた時は下記のようなログが吐き出される。

[nodemon] 2.0.15
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node dist/index.js`
Example app listening on port 3000!

ファイル変更検知時は下記のようなログが吐き出される。

[nodemon] restarting due to changes...
[nodemon] starting `node dist/index.js`

参考
・nodemon
・Github

まとめ

既存のライブラリを使うことで簡単にホットリロード設定が出来た。
この設定を行うだけでファイル編集のたびにサーバ再起動をする必要がなくなり、特に開発環境での生産性が段違いで良くなると思う。
ぜひこの設定を試してみてもらいたい。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/