NestJs Hot Reload 적용

NestJs도 NodeJs를 기반으로 동작하기 때문에 변경사항이 생기면 서버를 껐다가 다시 시작해야 변경사항이 적용되는 불편함이 있다.

express에서는 이러한 불편함을 nodemon 라이브러리를 통해 해결하지만,
NestJS에서는 Hot Reload라는 기능을 지원한다.

Hot Reload 적용하기

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

이 명령어를 통해 필요한 라이브러리를 설치한다.

그 다음 공식문서에 나와있는 코드를 복사하여 root 디렉토리에 webpack-hmr.config.json 파일명으로 파일을 생성한다.

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, autoRestart: false }),
    ],
  };
};

HMR 활성화를 위해 main.ts 파일에서 다음과 같이 추가해 준다.

// main.ts
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에서 scripts의 start:dev 명령어를 아래와 같이 변경한다.

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

참고링크 : https://docs.nestjs.com/recipes/hot-reload#hot-reload