带有热重载的 docker 容器上的 Vue.js 应用程序

Posted 2023-03-07

【中文标题】带有热重载的 docker 容器上的 Vue.js 应用程序

【英文标题】：Vue.js app on a docker container with hot reload

【发布时间】：2019-04-14 05:39:30

【问题描述】：

在 docker 实例上运行我的 vue.js 应用程序时，我有一个显着的延迟和高 CPU 使用率。

这是我的 docker 设置

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

# 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% 并且还在增加

我在使用 16 GB 内存的 mac book pro，对于 docker，我启用了 4 个 cpu 和 6 GB 内存。

如何解决这个问题？

【问题讨论】：

您是否尝试使用 CHOKIDAR_INTERVAL=1000 设置间隔？

【参考方案1】：

将delegated 或cached 选项之一添加到安装您的应用程序目录的卷中。尤其是使用缓存，我体验到了显着的性能提升：

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