React x Express x Webpack構成のアプリケーションを自動ビルド＆再起動する方法

はじめに

こんにちは！さいけです。

今回は、「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"
    ...
  },