はじめに
こんにちは!さいけです。
今回は、「React x Express x Webpack構成のアプリケーションを自動ビルド&再起動する方法」について紹介します。
前提
- Node.jsが端末にインストールされている
- React x Express x Webpack構成でアプリケーションが構築されている
- 今回は以下のリポジトリをサンプルとして使います
- https://github.com/IgnorantCoder/react-ssr-sample
React x Express x Webpack構成のアプリケーションを自動ビルド&再起動する方法
結論から言うと、以下の方法でぞれぞれのファイルを監視すれば良いです。
- webpackによるjsファイル監視は–watchオプション
- –watchオプションでビルド対象・依存関係にあるjsファイルを監視し、変更が発生したら再ビルドする
- Express(Node.js)のファイル監視はnodemon
- nodemonはnode.jsファイルを監視し、変更が発生したらnodeアプリケーションを再起動する
実際に以下の手順で自動ビルド&再起動が実現できます。
nodemonをインストールする
以下の記事の手順で、あらかじめnodemonをインストールします。
package.jsonのnpm scriptsにエイリアスを追加する
以下のようなscriptを追加します。
なお、サンプルコードなので、適宜プロジェクトに合わせて書き換えてください。
"scripts": {
...
"start": "webpack --config webpack.config.server.js --watch & webpack --config webpack.config.client.js --watch & nodemon dist/server.js"
...
},
検証してみる
ファイルに変更があったら、自動ビルド&アプリケーションの再起動ができているか検証してみます。
また、前提で記述した通り、下記のプロジェクトを利用して検証しています。
GitHub - IgnorantCoder/react-ssr-sample
Contribute to IgnorantCoder/react-ssr-sample development by creating an account on GitHub.
ファイルに変更があったら、自動ビルド&アプリケーションの再起動ができています👍🎉
さいごに補足ですが、ファイル監視による自動ビルド&再起動はキャッシュを持つため、手動のビルド&再起動より早く反映されるみたいなので、純粋に開発効率はありがりそうですね!
コメント