运行开发服务器，在 docker 容器内有 create-react-app

Question

我正在尝试运行 docker 容器内的 create-react-app 开发服务器并让它重新编译并将更改后的应用程序代码发送给客户端以用于开发目的，但它未从 docker 容器内部获取更改。

（当然，我有app的工作目录作为容器的volume。）

有没有办法让它工作？

Answer 1

其实我找到了答案here。显然 create-react-app 使用 chokidar 来监视文件更改，并且它有一个标志 CHOKIDAR_USEPOLLING 来使用轮询来监视文件更改。所以 CHOKIDAR_USEPOLLING=true npm start 应该可以解决问题。至于我，我在 docker 容器的环境变量中设置了 CHOKIDAR_USEPOLLING=true 并刚刚启动了容器。

Answer 2

另一个答案中建议的轮询会导致更高的 CPU 使用率并快速耗尽电池电量。您不需要 CHOKIDAR_USEPOLLING=true 因为文件系统事件应该传播到容器。最近，即使您的主机运行 Windows: https://docs.docker.com/docker-for-windows/release-notes/#docker-desktop-community-2200（搜索 "inotify"），这也应该可以工作。

然而，当 Docker 用于 Mac 时，此机制有时似乎会失败：https://github.com/docker/for-mac/issues/2417#issuecomment-462432314

重新启动 Docker 守护进程对我的情况有帮助。

Answer 3

如果您的更改没有被拾取，可能是文件监视机制有问题。此问题的解决方法是配置轮询。您可以按照的说明在全局范围内执行此操作，但您也可以通过 webpack 配置在本地执行此操作。这样做的好处是指定忽略的文件夹（例如 node_modules），这会在使用轮询时减慢观看过程（并导致高 CPU 使用率）。

在你的webpack配置中，添加如下配置：

devServer: {
  watchOptions: {
    poll: true, // or use an integer for a check every x milliseconds, e.g. poll: 1000
    ignored: /node_modules/ // otherwise it takes a lot of time to refresh
  }
}

来源：documentation webpack watchOptions

如果您在后端 Node.js 项目中遇到与 nodemon 相同的问题，您可以使用 --legacy-watch 标志（简称 -L），它开始也在投票。

npm exec nodemon -- --legacy-watch --watch src src/main.js

或 package.json:

"scripts": {
  "serve": "nodemon --legacy-watch --watch src src/main.js"
}

文档：nodemon legacy watch

Answer 4

如果你使用linux那么你不需要使用CHOKIDAR_USEPOLLING=true

运行 开发服务器，在 docker 容器内有 create-react-app

Running development server with create-react-app inside of a docker container

docker

create-react-app

运行开发服务器，在 docker 容器内有 create-react-app