expressとwebpackな環境でホットリロード設定する
express+webpackな環境でホットリロード設定を行い快適な開発環境を構築する
はじめまして。最近SHIFTに入社した三輪です。SHIFT社内のプロダクト開発に従事しております。
今までサーバサイドはRailsを使ってきましたが、初めてexpressを使うことになったので開発してるときに役立ったホットリロードの設定方法をまとめてみようと思います。
ホットリロード
現在の開発環境ではWebpackでビルドしてNodeサーバの起動を行っている。
Webpackでは--watchオプションがあり、ファイル変更時は自動でビルドを行ってくれるが、サーバ再起動しないといけない。
それはかなり面倒なので、expressの開発でホットリロード出来る環境を作る。
解決策
Webpackの--watchオプションとnodemonを併用することで簡単に解決出来る。
ファイルを変更するとWebpackが変更を検知して自動的にリビルドしてくれて、それが終わるとnodemonがdistフォルダに出力されたjsファイルの変更を検知して、自動でサーバ再起動を行ってくれる。
方法
webpack.config.jsでビルド後出力先にdist/index.jsを指定
yarn add nodemon でnodemonをインストール
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回だけにし、パフォーマンス向上につなげることが出来る
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`
まとめ
既存のライブラリを使うことで簡単にホットリロード設定が出来た。
この設定を行うだけでファイル編集のたびにサーバ再起動をする必要がなくなり、特に開発環境での生産性が段違いで良くなると思う。
ぜひこの設定を試してみてもらいたい。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
執筆者プロフィール：Taiga Miwa
受託会社で2年ほど勤務し、Railsを使ったWebアプリの新規開発を主に担当。Rails, React, Vue, GraphQLなどモダンな技術を使って開発を行っていた。最近SHIFTにジョインし、アーキテクト目指して修行中。
得意技はRubyと魚捌き。
お問合せはお気軽に
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/