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

IT技术 reactjs docker docker-compose create-react-app docker-toolbox
2021-05-19 12:48:18

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

我的文件结构如下。

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

文件

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
2个回答

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

如果项目在虚拟机中运行，例如（Vagrant 配置的）VirtualBox，.env如果它不存在，请在项目目录中创建一个文件，然后添加CHOKIDAR_USEPOLLING=true到其中。这可确保下次运行时npm start，观察者在 VM 内根据需要使用轮询模式。有关详细信息，请参阅文档。

将您的树更改为

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

文件

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"
其它你可能感兴趣的问题
上一篇react受控与非受控输入 下一篇useEffect 不会在路由更改时更新状态