带有热重载的Docker容器上的Vue.js应用 [英] Vue.js app on a docker container with hot reload

问题描述

在docker实例上运行vue.js应用程序时，我有明显的延迟和较高的cpu使用率.

I have a signifiant delay and high cpu usage when running my vue.js app on docker instance.

这是我的docker设置

This is my docker setup

docker-compose.yml

docker-compose.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

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-compose up -d并且我的应用程序正在 http://localhost:8080/中加载时，此设置可以正常工作 但是热重装会在10秒后发生，然后像15秒钟一样继续增加，并且我的笔记本电脑CPU使用率达到60％并仍在增加

this setup works fine when i type docker-compose up -d and my app is loading in http://localhost:8080/ but hot reloading happens after 10 seconds , then 15 seconds like wise it keeps increasing and my laptop cpu usage gets 60% and still increasing

我使用的Mac Book Pro具有16 GB的RAM，对于docker，我启用了4个CPU和6 GB的RAM.

i am on a mac book pro with 16 gb ram, and for docker i have enabled 4 cpu's and 6 gb ram.

该问题如何解决?

推荐答案

将delegated或cached选项之一添加到安装应用程序目录的卷中.特别是使用缓存，我的性能得到了显着提高:

Add one of the delegated or cached options to the volume mounting your app directory. I've experienced significant performance increases using cached in particular:

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

这篇关于带有热重载的Docker容器上的Vue.js应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！