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

技術
スポンサーリンク
スポンサーリンク

はじめに

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

今回は、「React x Express x Webpack構成のアプリケーションを自動ビルド&再起動する方法」について紹介します。

前提

  • Node.jsが端末にインストールされている
  • React x Express x Webpack構成でアプリケーションが構築されている

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

ファイルに変更があったら、自動ビルド&アプリケーションの再起動ができています👍🎉

さいごに補足ですが、ファイル監視による自動ビルド&再起動はキャッシュを持つため、手動のビルド&再起動より早く反映されるみたいなので、純粋に開発効率はありがりそうですね!

コメント