当 docker 容器内的数据发生变化时，Create-react-app 服务器不会重新编译

Question

我目前正在尝试在 docker 中运行 React 应用程序。我正在运行包含在容器内运行 npm start 的 create-react-app 包中的脚本，并且我正在使用绑定挂载在主机中工作并反映容器中的更改。遗憾的是，react 包附带的重新编译功能在容器内不起作用，即使文件确实发生了变化。问题是我正在使用案卷工具箱。你们知道可能是什么问题吗？为什么不重新编译？

我的文件结构如下。

project
|   .dockerignore
|   .gitignore
|   docker-compose.yml
|   Dockerfile
|   LICENSE
|   README.md
|
\---frontend
    +---nodemodules\*
    |   package-lock.json
    |   package.json
    |   README.md
    |
    +---public
    |       index.html
    |
    \---src
        |   index.js
        |
        \---container
                App.jsx

Dockerfile

FROM node:8.11.1

COPY . /usr/src/

WORKDIR /usr/src/frontend

ENV PATH /usr/src/frontend/node_modules/.bin:$PATH

RUN npm install -g create-react-app
RUN npm install

EXPOSE 3000

CMD [ "npm", "start" ]

docker-compose.yml

version: "3.5"

services:
  react:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - "./frontend:/usr/src/frontend"
      - '/usr/src/frontend/node_modules'
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development

Answer 1

当应用在容器内运行时，有时 React 不会在更改文件时重新编译代码。

如果项目在虚拟机中运行，例如（Vagrant 配置的）VirtualBox，则在项目目录中创建一个.env 文件（如果该文件不存在），并将CHOKIDAR_USEPOLLING=true 添加到其中。这可确保下次您运行 npm start 时，观察者会根据需要在 VM 内使用轮询模式。详情请见documentation。

Answer 2

把你的树改成

project
|   .dockerignore
|   .gitignore
|   docker-compose.yml
|   LICENSE
|   README.md
|
\---frontend
    +---nodemodules\*
    |   package-lock.json
    |   package.json
    |   README.md
    |   Dockerfile    
    |
    +---public
    |       index.html
    |
    \---src
        |   index.js
        |
        \---container
                App.jsx

Dockerfile

FROM node:node:8.11.1
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .

EXPOSE 3000
CMD [ "npm", "start" ]

构建镜像，这一步你需要在每次更新时做

cd frontend/

docker build -t reactapp .

docker-compose.yml

version: "3.5"
services:
  react:
     image: reactapp
     ports:
       - "3000:3000"