不能通过create-react-app和docker windows进行webpack hotreload [英] Cant get webpack hotreload with create-react-app and docker windows

问题描述

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

We are going to develop a react pwa with dockersetup and to publish the app on gitlab pages during deployment to master branch.

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

I work on a windows device and cant get the feature of hotreloading in dev-mode. Whenever i make some change, the code isnt recompiling. I have to docker-compose up --build every single time for every change.

是否可以通过 windows/docker/create-react-ap p安装程序进行热重装?

Is there any possible way to get hotreloading working on a windows/docker/create-react-app setup?

遵循package.json:

Following the 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"
  ]
}

现在使用Dockerfile进行开发设置:

Now the Dockerfile for Dev-Setup:

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"]

至少是docker-compose来进行dev-setup:

And at least the docker-compose for dev-setup:

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

我正在设备上为Windows运行docker.我希望有人可以帮助我...谢谢！

Im running docker for windows on the device. I hope anyone can help me out of here...Thanks!

推荐答案

问题主要是由您在Windows上引起的.

The problem is mainly caused by the fact you're on Windows.

为什么?

因为Windows上的Docker不能很好地与卷配合使用.更准确地说-它不会将体积变化通知容器.它确实公开了容器中的最新文件，但是容器内的Linux不知道"文件已更改这一事实，这是触发Webpack重新编译所必需的.

Because Docker on Windows does not work well with volumes. To be more precise - it does not notify the container about the volume change. It does expose up to date files in container but the Linux inside the container "doesn't know" about the fact that file has been changed which is required to trigger webpack recompilation.

解决方案很少

1. 切换到Linux进行开发(我知道这是不可能的，但是如果您与docker在一起工作很多并且可以移动-这样做.Linux上的Linux容器工作得更快，卷等没有问题)
2. 如果不能，则可以在评论中已提及的weback中使用旧版轮询
3. 您可以使用例如 https://github.com/merofeev/docker-windows-volume-watcher这是一个基于Python的工具，它可以监视卷中的本地文件和容器文件，并通知容器有关更改的信息...

1. Switch to Linux for development (I know it may be not possible but if you are working with docker a lot and you can move - do that. Linux containers on Linux work much faster, no issues with volumes etc)
2. If you can't you can either use legacy polling in weback which is already mentioned in comments
3. You can use e.g. https://github.com/merofeev/docker-windows-volume-watcher which is Python based tool which watch your local files and container files inside the volumes and notify the container about the change...

我发现3个的性能要好于2个，但是两者都会牺牲一些性能.

I found 3 working a bit better than 2 but both will have some performance sacrifice.

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

I hope it helps. If you have any questions just comment and I will try to edit to explain better.

这篇关于不能通过create-react-app和docker windows进行webpack hotreload的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！