在 docker 容器外编辑文件时，React Webpack 不会重建（在 mac 上）

Question

我已经使用 create-react-app 在 docker 容器中创建了一个 React 应用程序。当我在容器内编辑 App.js 时，应用程序会自动重新构建并重新加载浏览器。但是当我在容器外（在主机上）编辑文件时，它不会被重建。

这是一个 webpack/watch 问题 - 但也许也与在 mac 上运行 docker 有关？任何帮助，将不胜感激。

我认为这种事情对于开发人员设置来说是很正常的（即 - 使用 docker 创建您的构建环境，但使用安装作为实际代码）。

这是我正在使用的 Github 存储库。

Answer 1

在我的情况下，启用此环境变量解决了它：

CHOKIDAR_USEPOLLING=true

仅此设置，无需安装。该Chokidar文档状态，它有助于在网络上观看的文件。看起来，这对 docker 卷也很有帮助。

PS： CPU负载相当高，所以很遗憾我也不得不通过设置来减少检查间隔CHOKIDAR_INTERVAL=1000。

您可以在docker-compose.yml文件中设置此变量...

    environment:
      - CHOKIDAR_USEPOLLING=true

……或在Dockerfile……

ENV CHOKIDAR_USEPOLLING=true

...或通过命令行，例如：

docker run -e CHOKIDAR_USEPOLLING=true my-app

Answer 2

我自己想出来了。Webpack 配置阻止了从容器外部进行编辑以触发重建和重新启动。诀窍是（显然这是一个遗留选项）

watchOptions {
  poll: 100
}

注意：使用 poll:1000 只会刷新所有其他编辑。每次编辑使用 100 个作品。不知道为什么。

因此，对于我的后端 API，我正在运行 node/expressjs。这里我需要安装并运行 webpack 和 nodemon。（nodemon 在容器外部进行编辑时需要 -L 选项才能工作）。

我的前端是使用 create-react-app 创建的，其中没有公开任何 webpack 配置。我必须跑

npm run eject

公开 webpack 配置（我编辑了 config/webpackDevServer.config.js 文件）。

现在，使用弹出是不受欢迎的，因为“你不能回去”......但由于我使用的是 docker 容器并在构建容器时使用 create-react-app/eject - 我有效地避免了这种情况不良情况。（尽管如果我有任何变化，我可能必须修复我的 docker 文件）。

所有这些编辑都可以在我的 docker 文件中找到 https://github.com/roocell/fullstack_react_nodejs_in_docker