Nest.JS Hot reload 적용하기

NestJS로 개발할때,
변경사항이 생기면 프로세스를 종료하고,
다시 작동(bootstrap)시켜야한다.

수동으로도 할 수 있겠지만, watch 라는 옵션을 사용하면
자동으로 할 수 있다.

Watch

개발 서버를 시작할 때 다음 CLI 명령으로 시작한다.

$ nest start --watch

위 명령어는 CLI로 프로젝트를 생성했다면
package.json에도 정의가 되어 있을 것이다.

"start:dev" : "nest start --watch"

그럼 다음과 같이 실행 할 수 있다.

$ npm run start:dev

Hot reload

위 Watch 방법처럼 할 수 있겠지만,
위 방법은 프로젝트 전체를 재 시작한다.
작은규모라면 별 데미지가 없겠지만,
프로젝트 규모가 점점 커지거나
번들되는 파일들이 많아지면 병목이 생길 수 있다.

NestJS 공식문서에서는 변경된 파일만 Bundle 하여
변경사항을 적용시키는 방법을 소개하고있다.

패키지 설치

2개의 패키지가 필요하다.

npm i --save-dev webpack-node-externals start-server-webpack-plugin

개발용도로 사용할 것 이기 때문에, -dev 옵션을 붙혀
dev dependency로 설치하도록 하자.

환경설정 만들기

Hot reload에 필요한 환경설정을 만들어줘야한다.
js 파일로 다음 코드 전문을
프로젝트 루트 위치에
webpack-hmr.config.js 라는 이름으로 만들자.

const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const StartServerPlugin = require('start-server-webpack-plugin');

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

Hot reload 활성화

Main Bootstrap 함수에 코드를 추가하여
Hot reload를 활성화 한다.

main.ts 파일에 다음 코드를 추가하자.

declare const module: any; // new !

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

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

Hot reload 시작하기

package.js 의 서버 시작 명령을 다음과 같이 변경한다.

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

서버를 시작할땐 CLI 명령을 다음과 같이 입력하자.

$ npm run start:dev

마치며

watch 옵션과 달리 서버를 시작할때 build라는 명령으로 서버를 시작한다.
미리 컴파일(번들링)을 하고, 추가한 패키지가 변경된 내용을 번들링 된 파일들(dist디렉토리) 에게 접근해 변경사항을 반영하는 것 같다

자세한 원리는 모르겠다 ^^

참고자료

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