Nest JS Hot reload 설정하기

Nest JS Hot reload 설정하기

 

https://docs.nestjs.com/recipes/hot-reload

Documentation | NestJS - A progressive Node.js framework

 

공식문서 참고 ㅎㅎ

 

 

Hot reload란?

 

nodemon 혹은 pm2 처럼 내가 원하는 결과가 웹사이트에 바로바로 빌드되도록 서버의 재시작을 도와주는 라이브러리이다.

 

cli를 이용하여 Hot Reload 설치하기

 

1. 필요한 package설치

 

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

 

요렇게 설치 해주세용

 

2. 설치가 완료되었다면, 프로젝트의 root디렉터리에 webpack-hmr.config.js 파일 생성 후 아래의 코드를 복붙해주세요!

 

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

 

 

3. Hot_Module대체하기

 

위에서 정의한 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();

 

4. package.json파일 수정

 

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

 

5. 현재 실행 중인 서버를 종료하고, 다시 시작

 

$ npm run start:dev