핫리로딩 적용

nestjs 를 사용하면서 소스를 수정했을 시, 노드 서버를 껐다가 다시 켜서 적용시켜야 되는 불편함이 있는데, 핫리로딩을 적용하게 되면 소스를 수정 시 노드서버를 종료하고 다시 켜지 않아도 바로바로 적용되는 편리함을 갖추고 있다.

express 에서는 nodemon을 설치하는데, nestjs 에서는 핫리로드를 제공하므로 핫리로드를 적용시켜서 좀 더 편리하게 이용해보자.

적용 방법은 nestjs 공식문서를 참고하여 진행한다.

1. 패키지 설치

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

 

2. 설정

nestjs 의 루트 경로에 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. main.ts 에 적용

핫리로드를 적용하기 위해 src 폴더의 main.ts 에 해당 문구를 추가한다.

여기서 주의할점은, app.listen(port) 부분보다 아래에 있어야 핫리로드가 정상적으로 적용된다.

만약, app.listen(port) 보다 위에 있을 시, 핫리로드가 되지 않고 기존과 같이 서버를 내렸다 꺼야하는 상황이 발생한다.

해당 부분이 에러가 뜨지 않고 정상작동이 되길래 꽤 오랫동안 찾았는데.... 구체적인 원인은 좀 더 공부후에 남기도록 하겠다.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
declare const module: any; // 핫리로드

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  const port = process.env.PORT || 3000;

  //Swagger
  const config = new DocumentBuilder()
    .setTitle('슬랙클론코딩 API')
    .setDescription('인프런 슬랙클론코딩 개발을 위한 API 문서입니다.')
    .setVersion('1.0')
    .addTag('sleact')
    .build();
  const document = SwaggerModule.createDocument(app, config);
  SwaggerModule.setup('api', app, document);

  await app.listen(port);
  console.log(`${port} 포트로 접속 완료하였습니다.`);
  
  // 핫리로드
  if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => app.close());
  }
}

bootstrap();

 

4. package.json 설정

package.json 에서 기존의 start:dev 는 start:dev-backup 으로 백업해준 후 아래와 같이 작성하여 준다. 해당 부분 역시 공식문서를 참고하였다.

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

 

5. 실행

위의 절차가 완료 된 후에는 터미널에서 npm run start:dev 를 켜서 서버를 실행시켜주면 된다.