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

Question

在 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

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

Answer 1

为了解决这个问题，我检查了 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

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

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

docker

docker-compose

webpack-dev-server

gatsby

webpack-hmr