无法使用 create-react-app 和 docker windows 获取 webpack 热重载

Question

我们将使用 dockersetup 开发一个 react pwa，并在部署到 master 分支期间将应用程序发布到 gitlab 页面上。

我在 Windows 设备上工作，无法在开发模式下获得热重载功能。每当我进行一些更改时，代码都不会重新编译。每次更改我都必须docker-compose up --build。

有什么方法可以让热重载在windows/docker/create-react-app 设置上工作？

在 package.json 之后：

 {
  "name": "Appname",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "buildandserver": "react-scripts build && serve -s build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

现在是用于 Dev-Setup 的 Dockerfile：

FROM node:9.6.1
# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install
RUN npm install react-scripts@1.1.1 -g
# start app
CMD ["npm", "start"]

至少还有用于 dev-setup 的 docker-compose：

version: '3.5'

services:

  App-Name:
    container_name: App-Name
    build:
      context: .
      dockerfile: devsetup/Dockerfile
    volumes:
      - './:/usr/src/app'
      - '/usr/src/app/node_modules'
    ports:
      - '3000:3000'
    environment:
      - NODE_ENV=development

我正在设备上运行 docker for windows。 我希望任何人都可以帮助我离开这里...谢谢！

Answer 1

问题主要是由于您使用的是 Windows 造成的。

为什么？

因为 Windows 上的 Docker 不能很好地处理卷。更准确地说 - 它不会通知容器有关音量的变化。它确实暴露了容器中的最新文件，但容器内的 Linux“不知道”文件已更改的事实，这是触发 webpack 重新编译所必需的。

解决办法很少：

1. 切换到 Linux 进行开发（我知道这可能是不可能的，但如果您经常使用 docker 并且您可以移动 - 这样做。Linux 上的 Linux 容器运行速度更快，卷等方面没有问题）
2. 如果不能，您也可以在 cmets 中提到的 weback 中使用旧式轮询
3. 您可以使用例如https://github.com/merofeev/docker-windows-volume-watcher 这是基于 Python 的工具，它可以监视卷内的本地文件和容器文件，并通知容器有关更改...

我发现 3 比 2 工作得好一点，但两者都会牺牲一些性能。

我希望它有所帮助。如果您有任何问题，请发表评论，我会尝试编辑以更好地解释。