当文件从 Docker-compose 中的主机映射卷更改时,热重载失败

Hot reload fails when files are changed from the host mapped volume in Docker-compose

在 docker-compose 中,我有两个服务共享来自主机的同一个映射卷。映射卷是位于主机中的应用程序源文件。 当主机中的源文件发生更改时,不会触发 HMR,包括手动刷新不会显示最新更改。不过,如果直接在容器中编辑文件,HMR 会重新加载并显示更改。最后,更改从主机可见 - 这意味着映射的卷是正确的并且指向正确的位置。 问题是为什么 webpack-dev-server 观察者没有接收到变化?这个怎么首发?有哪些解决方案?

有问题的 docker-compose 服务:

  node_dev_worker:
    build:
      context: .
      dockerfile: ./.docker/dockerFiles/node.yml
    image: foobar/node_dev:latest
    container_name: node_dev_worker
    working_dir: /home/node/app
    environment:
      - NODE_ENV=development
    volumes:
      - ./foobar-blog-ui/:/home/node/app
    networks:
      - foobar-wordpress-network

  node_dev:
    image: foobar/node_dev:latest
    container_name: node_dev
    working_dir: /home/node/app
    ports:
     - 8000:8000
     - 9000:9000
    environment:
      - NODE_ENV=development
    volumes:
      - ./foobar-blog-ui/:/home/node/app
      - ./.docker/scripts/wait-for-it.sh:/home/node/wait-for-it.sh
    command: /bin/bash -c '/home/node/wait-for-it.sh wordpress-reverse-proxy:80 -t 10 -- npm run start'
    depends_on:
      - node_dev_worker
      - mysql
      - wordpress
    networks:
      - foobar-wordpress-network

node.yml:

FROM node:8.16.0-slim

WORKDIR /home/node/app

RUN apt-get update
RUN apt-get install -y rsync vim git libpng-dev libjpeg-dev libxi6 build-essential libgl1-mesa-glx

CMD npm install

Webpack 开发服务器配置遵循网上找到的一些针对容器问题的建议,比如我正在介绍的那个。 webpack配置放在Gatsbyjs提供的中间件gatsby-node.js中,如下:

devServer: {
    port: 8000,
    disableHostCheck: true,
    watchOptions: {
        poll: true,
        aggregateTimeout: 500
    }
}

Linux 发行版是(Docker 图片名为 node:8.16.0-slim):

PRETTY_NAME="Debian GNU/Linux 9 (stretch)"
NAME="Debian GNU/Linux"
VERSION_ID="9"
VERSION="9 (stretch)"
ID=debian

此外,浏览器确实显示 [HMR] 已连接并正在侦听。如下:

[HMR] connected
[HMR] bundle rebuilt in 32899ms

有问题的主机是 Macos 10.14.6 Mojave。 运行 Docker 2.1.0.2

关于如何调试此问题的任何提示?

为了解决这个问题,我检查了 Docker 提供的文档,关于我的主机系统是 MacOS,他们在其中发布了 OSFX ( https://docs.docker.com/docker-for-mac/osxfs/ ),所以在其他任何事情之前,我确定列出了允许我从 MacOS 安装的 volumes

我的卷位于 /Users 父目录下,所以我可以开始了! Obs:我不认为它相关,但我在继续验证“文件共享”选项卡之前 reset to factory

请记住我之前在原始票证中提出的更改,因为这有帮助并且是推荐的。检查您的 Webpack 开发服务器配置:

devServer: {
    port: 8000,
    disableHostCheck: true,
    watchOptions: {
        poll: true,
        aggregateTimeout: 500
    }
}

通过声明 --host 和 --port 来启动开发服务器也很重要,例如:

gatsby develop -H 0.0.0.0 -p 8000

为了完成,我相信这是解决这个问题的关键是我在 Docker-compose yaml 文件中设置了以下环境变量 GATSBY_WEBPACK_PUBLICPATH,在 属性 environment:

  node_dev:
    image: moola/node_dev:latest
    container_name: node_dev
    working_dir: /home/node/app
    ports:
     - 8000:8000
     - 9000:9000
    environment:
      - NODE_ENV=development
      - GATSBY_WEBPACK_PUBLICPATH=/
    volumes:
      - ./foobar-blog-ui/:/home/node/app
      - ./.docker/scripts/wait-for-it.sh:/home/node/wait-for-it.sh
    command: /bin/bash -c '/home/node/wait-for-it.sh wordpress-reverse-proxy:80 -t 10 -- npm run start'
    depends_on:
      - node_dev_worker
      - mysql
      - wordpress
    networks:
      - foobar-wordpress-network