4/24 express x TypeScriptの環境でnodemonを使用してホットリロードする設定

前提

expressをTypeScriptでバックエンドを実装している。

なぜ必要か

コードを変更するたびに、手動でサーバーを再起動する手間を省き、開発の効率を上げるためにホットリロードを導入したい。

ホットリロードとは

ホットリロード(Hot Reload)とは、コードを変更したときに自動でリロードしてくれる機能です。Expressで言えば、コードを変更したときに、自動でサーバーを再起動する仕組みです。

手順

①nodemonのインストール

npm i nodemon -D

②package.jsonにスクリプトを追加

"scripts": {
    "start": "node dist/bin/www",
    "nodemon": "tsc -w & nodemon" // nodemon.json内で使用します。
  },

• tsc -w でTypeScriptをコンパイルさせています。

w オプションは、TypeScript コンパイラ (tsc) の "watch" モードを有効にするオプションです。watch モードは、TypeScript ファイルの変更を監視し、変更が検出されたら自動的に再コンパイルを行います。

これにより、開発中に変更を加える度に手動でコンパイルする必要がなくなり、効率的に作業を進めることができます。コマンドラインで tsc -w を実行すると、対象の TypeScript ファイルが監視され、変更があるたびに JavaScript へのコンパイルが実行されます。

• nodemonで後で設定するnodemon.jsonで設定した条件での変更あった場合に、自動で再起動します。

③nodemon.jsonを作成する

nodemon.jsonという名称でルートプロジェクトにファイルを追加して下記のように設定

{
  "watch": ["src"],
  "ext": "ts,js",
  "ignore": ["test/", "node_modules/"],
  "exec": "npm run nodemon"
}

• "watch": 監視するディレクトリを指定します。ここではsrcディレクトリを監視している
• "ext": 監視するファイルの拡張子を指定します。ここではtsとjsonファイルを監視している
• "ignore": 監視しないファイルを指定します。ここではsrc/*/.spec.tsというパターンのファイルを除外している
• "exec": nodemonが監視したファイルの変更が検出された際に②で設定したtsc -w & nodemonコマンドが実行されます。

④npm run startでサーバーを立ち上げて確認する

• コードに変更を加えて、ターミナルで再起動されているか
• ブラウザに変更点が反映されるかの確認をする

追記

学習を進めていたら、こちらだけで良さそうでした。

pakage.json

"scripts": {
    "start": "nodemon dist/bin/www",

• node dist/bin/www を nodemon dist/bin/www に変えるだけでもできそうです。

nodemon.json

{
  "watch": ["backend"],
  "ext": "ts,js",
  "ignore": ["test/", "node_modules/"],
  "exec": "ts-node ./backend/src/app.ts"
}