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

Posted 2023-04-15

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

【英文标题】：Create-react-app server not recompiling when data changes inside docker container

【发布时间】：2018-10-01 18:25:43

【问题描述】：

我目前正在尝试在 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

【问题讨论】：

删除图片重新运行。

@JinnaBalu 很遗憾这不起作用,,,

RUN npm install -g create-react-app，为什么需要这一步。我正在从nodejs.org/en/docs/guides/nodejs-docker-webapp 更改 docker 文件和 docker-compose cotomising 给你

【参考方案1】：

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

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

【讨论】：

描述请访问链接create-react-app.dev/docs/…

轮询会导致更高的 CPU 使用率并迅速耗尽电池电量。您不需要CHOKIDAR_USEPOLLING=true，因为文件系统事件应该传播到容器。从最近开始，即使您的主机运行 Windows，这也应该可以工作：docs.docker.com/docker-for-windows/release-notes/…（搜索“inotify”）。但是，当使用 Docker for Mac 时，这种机制有时似乎会失败：github.com/docker/for-mac/issues/2417#issuecomment-462432314。在我的情况下，重新启动 Docker 守护进程会有所帮助。

【参考方案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"

【讨论】：

我安装了 create-app，因为它会自动安装最新版本的 react-scripts，当我将前端文件夹复制到容器中时，它也会复制 json 包，所以我得到了覆盖。也将 docker-compse up --build 我构建了没有结果的新图像。

npm 包使用命令 npm install 安装。你不需要复制 node_modules

是的，对不起，我没有把它放在问题中，但 dockerignore 文件忽略了模块。