Hot reloading in Docker container stops working after a while

user_5280549 0
Viewed 1571

Background

We use Docker to containerize a Vue.js app and mount a volume with the source code.

Dockerfile

FROM node:13.8-alpine
RUN yarn install && \
    apk add --no-cache git
COPY . /usr/src/app
WORKDIR /usr/src/app
EXPOSE 8080
CMD ['/bin/sh', 'start_compose.sh']

docker-compose.yml

version: '3'
services:
  web:
    build: .
    volumes:
      - .:/usr/src/app:delegated
    ports:
      - '8080:8080'
    command: ['/bin/sh', 'start_compose.sh']

start_compose.sh

yarn install
npm rebuild node-sass
yarn serve

Problem

Hot reloading works generally, and code changes are usually immediately reflected in the browser.

But very often after a while, hot reloading stops working, and the code changes are not reflected in the browser.

Stopping and restarting the container fixes the issue for a while.

Question

What might be causing this problem and what is the solution?

Thanks!

hot-reload dockerfile docker-compose vue.js docker
2 Answers

Adding watchOptions to vue.config.js seems to help.

vue.config.js

module.exports = {
  devServer: {
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000,
    },
  },
};

I am still testing to see if this resolves the issue.

user_52805490

In several cases, this have more sense like a node issue than docker issue. When you stop and restart the container, node is reloading... I think that node reloading is that is doing hot reloading works again.

But there is some striking mounting way, "delegated". This could lead to inconsistency between host volume (when you are editing your code) and the container view. Try changing it with "consistent".

https://docs.docker.com/docker-for-mac/osxfs-caching/#tuning-with-consistent-cached-and-delegated-configurations

user_73992640
Related