programing

핫 새로고침 기능이 있는 도커 컨테이너의 Vue.js 앱

bestcode 2022. 8. 25. 23:55
반응형

핫 새로고침 기능이 있는 도커 컨테이너의 Vue.js 앱

도커 인스턴스에서 vue.js 앱을 실행할 때 지연이 심하고 CPU 사용량이 높습니다.

이것은 도킹 스테이션 설정입니다.

docker-param.yml

version: '2'
services:

  app:
    build:
      context: ./
      dockerfile: docker/app.docker
    working_dir: /usr/src/app
    volumes:
    - ~/.composer-docker/cache:/root/.composer/cache:delegated
    - ./:/usr/src/app
    stdin_open: true
    tty: true
    environment:
    - HOST=0.0.0.0
    - CHOKIDAR_USEPOLLING=true
    ports:
    - 8080:8080

app.docker

# base image
FROM node:8.10.0-alpine

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
COPY package*.json ./

RUN npm install

# Bundle app source
COPY . .

EXPOSE 8080

CMD [ "npm", "run", "serve"]

docker-up-d 라고 입력하고, http://localhost:8080/ 로드를 실행하고 있습니다만, 핫 새로고침은 10초 후에 발생합니다.그 후 15초 동안 계속 증가하고 노트북의 CPU 사용률은 60%가 계속 증가하고 있습니다.

저는 16GB 램을 탑재한 Mac Book Pro를 사용하고 있으며, 도커에서는 4개의 CPU와 6GB 램을 사용할 수 있습니다.

이 문제를 어떻게 해결할 수 있을까요?

다음 중 하나를 추가합니다.delegated또는cached옵션을 선택하여 앱 디렉토리를 마운트합니다.특히 캐시를 사용하면 성능이 크게 향상되었습니다.

volumes:
  - ~/.composer-docker/cache:/root/.composer/cache:delegated
  - ./:/usr/src/app:cached

언급URL : https://stackoverflow.com/questions/53246267/vue-js-app-on-a-docker-container-with-hot-reload

반응형