NestJSはnest newしたあとにnest start:devするだけで、ホットリロードする開発環境を整えることができます。しかし、これはファイルの変更を監視し、変更が検知されたら再度ビルドしているだけなので、プロジェクトが大規模になるとTypeScriptのビルドの処理が重くなります。
そこで、WebpackのHMR(Hot-Module Replacement)を利用すると、変更のあったモジュールだけを入れ替えることができるので、大きなプロジェクトでもホットリロードの時間を大幅に短縮することができます。

この記事は、ほとんど公式ドキュメントの意訳です。
ドキュメント : https://docs.nestjs.com/recipes/hot-reload
ライセンス : https://github.com/nestjs/docs.nestjs.com/blob/master/LICENSE

注意

Yarn v2(berry)を使用している場合は、そのままでは動きません。上記リンクより公式ドキュメントをご確認ください。
公式ドキュメントでは、Nest CLIを利用しない方法も紹介されていますが、この記事ではNest CLIを利用する方法のみご紹介します。

Nest CLIにはWebpackが含まれているので、WebpackのHotModuleReplacementPluginが使えます。

インストール

必要なパッケージをインストールします。

$ npm i --save-dev webpack-node-externals run-script-webpack-plugin webpack

設定ファイル

アプリケーションのルートディレクトリにwebpack-hmr.config.jsを作って、以下を書き込みます。

const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');

module.exports = function (options, webpack) {
  return {
    ...options,
    entry: ['webpack/hot/poll?100', options.entry],
    externals: [
      nodeExternals({
        allowlist: ['webpack/hot/poll?100'],
      }),
    ],
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin({ name: options.output.filename }),
    ],
  };
};

デフォルトのWebpack設定と、Nest CLIから渡されるWebpackパッケージの参照を引数に取ります。そして、HotModuleReplacementPlugin、WatchIgnorePlugin、RunScriptWebpackPluginプラグインでWebpackの設定を書き換えて返します。

Hot-Module Replacement

main.tsを開いて、以下のように書き換えることでHMRを有効化できます。

declare const module: any;

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);

  if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => app.close());
  }
}
bootstrap();

package.jsonに以下のスクリプトを追加します。nest newした状態だと既にstart:devは存在すると思うので、start:hmrにしてもいいと思います。

"start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch"

あとは、スクリプトを実行するだけです。

$ npm run start:dev

感想

私の環境だと、HMRするとファイル変更がすぐに反映されなかったりしたので、プロジェクトが大きくなるまでは通常のホットリロードを使用した方が無難かなと思いました。
また、Webpackを使用すると、ファイルパスの指定などに違いが出るようなので、HMRに移行する場合には注意が必要かもしれません。
これは私の知識不足ですが、ブラウザをオートリロードする方法がわからないです。