[ Nest JS ] Hot reload 설정하기

안녕하세요? 수구리입니다.

이번 포스팅에서는 Nest 프로젝트에서 Hot reload 설정하는 방법에 대해서 알아보겠습니다.

우선 Hot reload란 무엇인지 알아야 겠죠?

 

대게 한 프로젝트를 빌드하고 실행했다고 생각해보겠습니다.

내가 원하는 결과가 바로바로 나온다면 정말 정말 좋겠지만.. 그렇지 않은 경우가 대부분일 겁니다.

따라서 원하는 결과에 도달할 때까지 빌드와 실행을 계속 반복하면서 작업을 한다면 아주 비효율적이라고 생각합니다.

그러므로 이 Nest에서 제공하는 Hot reload 기능을 적용하면 서버를 실행 중에 코드 부분이 바뀌어서 Ctrl + S를 누른다면 바로 그 수정사항이 반영되어서 알아서 빌드하고 서버를 재시작해줍니다.

이렇게 간단하게 알아보았고.. 그러면 바로 적용을 해보도록 하겠습니다!

 

[ 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 }),
    ],
  };
};

 

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 파일 수정

package.json 

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

 

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

$ npm run start:dev