[TroubleShooting / Docker] Vue.js 프로젝트에서 Docker 환경에서의 핫 리로딩

 

 

몇번의 시도 끝에 301, 451ms 에서 10,491ms로 리로딩 시간 단축

(이 정도면 콜드 리로딩이긴 하다...ㅠㅠ)

 

문제는 노드 모듈 때문이었다...

1. Vue CLI 3.0 이상

CHOKIDAR_USEPOLLING=true

2. Vue CLI 5.0 이상 또는 Webpack 5 사용

WATCHPACK_POLLING=true

 

사용 방법:

1. Docker Compose를 사용하는 경우 docker-compose.yml 파일에 다음과 같이 추가:

 

services:
  web:
    environment:
      - CHOKIDAR_USEPOLLING=true  # 또는 WATCHPACK_POLLING=true
    volumes:
      - ./node/경로이름:/app:cached  # 경로 뒤 :cached 추가
      - node_modules:/app/node_modules 
      # 1. node_modules라는 이름의 Docker 볼륨이 생성되어 컨테이너의 
      # /app/node_modules 디렉토리에 마운트
      # 2. 의존성 패키지를 매번 다시 설치할 필요가 없음
      
 # ... 기존 설정 ...

volumes:
  node_modules:

 

2. package.json

"scripts": {
    "serve": "vue-cli-service serve  --port 8080",
    "start:debug": "cp ./env/.env.debug ./.env && yarn serve --watch ",
 }

--watch  추가

 

 

3. vue.config.js

  // 수정전
  
devServer: {
  watchOptions: {
    poll: true
  },
  hot: true
}
  
  // 수정후
  
  devServer: {
    watchOptions: {
      poll: 1000, 
      aggregateTimeout: 300 
    },
    hot: true
  },

 

아직 시간을 더 단축시킬 요소들이 있을거고 위 요소중 불필요한 부분도 있겠지만,

추후 다시 생길 시행착오를 줄이기 위해 기록한다
화면개발 할 시간이 없어서... 여기까지... ㅠ

 

 

 

하지만 여기서 중요한 점은 nodemon의 --ignore 옵션과 webpack의 동작이 서로 다른 레벨에서 작동한다는 것입니다:
nodemon의 --ignore:
이는 파일 시스템 변경을 감지하고 서버를 재시작하는 데 사용됩니다.
node_modules 디렉토리의 변경사항을 무시하여 불필요한 서버 재시작을 방지합니다.
webpack의 빌드 프로세스:
Vue CLI는 내부적으로 webpack을 사용하여 애플리케이션을 빌드합니다.
webpack은 여전히 node_modules에서 필요한 모듈을 로드하고 처리합니다.
따라서 보고 계신 로그는 webpack의 빌드 프로세스에서 발생하는 것으로, nodemon의 --ignore 옵션과는 직접적인 관련이 없습니다.
이 문제를 해결하기 위해서는 webpack 설정을 수정해야 합니다. Vue CLI 프로젝트에서 이를 위해 다음과 같은 방법을 시도해볼 수 있습니다:

webpack.Progress 에서 다음과 같이 node_modules를 읽는 시간이 오래걸리는 이슈였다

 

 

services:

  # ... 다른 서비스들 ...

  www:

    build:

      context: node

      dockerfile: WWW.Dockerfile

      args:

        - TARGET_DIR=./workspace/www

    ports:

      - "38080:8080"

    volumes:

      - ./node/ workspace /www:/app

      - /app/node_modules

    environment:

      - NODE_ENV=development

      - CHOKIDAR_USEPOLLING=true

    networks:

      - insunetfc_default

    working_dir: /app

 

 

module.exports = {
  // ... 기존 설정 ...

  devServer: {
    disableHostCheck: true,
    watchOptions: {
      poll: 1000,
      aggregateTimeout: 300,
      ignored: /node_modules/
    },
    hot: true
  },

  configureWebpack: {
    performance: {
      hints: false
    },
    optimization: {
      splitChunks: {
        minSize: 10000,
        maxSize: 250000,
      }
    }
  },

  chainWebpack: config => {
    config.plugin('fork-ts-checker').tap(args => {
      args[0].memoryLimit = 4096;
      return args;
    });

    // node_modules 내의 파일에 대한 처리 최소화
    config.module
      .rule('js')
      .exclude
      .add(/node_modules/)
      .end();
  }
}