[NestJs] NodeJs에선 nodemon이 있다면 NestJS에서는 Hot reload

 

서론

이번 심화 개인과제를 시작하기전에 NodeJS에서는 nodemon(파일이 수정되면 자동으로 애플리케이션을 재시작) 라이브러리가 있었는데 NestJS에서도 nodemon을 사용하려 했는데 NestJS는 프레임워크이다 보니 nodemon이 없을수도 있다는 생각이 들어 NestJS 공식 홈페이지 를 찾아보니 Hot reload가 있는것을 찾아 NestJS에 적용하였습니다.

 

 

CLI 사용법

 

설치

먼저 필요한 패키지를 설치해줍니다.

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

 

구성

설치가 완료되면 webpack-hmr.config.ts 애플리케이션의 루트 디렉터리에 파일을 만듭니다.

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(PORT);

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

 

 

실행 프로세스를 단순화 하려면 package.json 파일에 스크립트를 추가합니다.

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

 

이제 터미널을 열고 다음 명령을 실행합니다.

npm start

 

CLI 사용하지 않는 방법은 공식홈페이지를 참고하시면 될거같습니다.

 

 

참고 사항

 

Hot Reload가 가끔 안 될 때가 있습니다. 이럴 때는 서버를 껐다가 다시 켜시면 정상 작동합니다.

 

Documentation | NestJS - A progressive Node.js framework