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

Question

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

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

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

Here 是我正在使用的 Github 回购协议。

Answer 1

您应该 link 使用 Volumes. Even better would be to use Docker-Compose 将包含应用程序文件的主机文件夹复制到容器，因为您使用的是多个容器。

Docker 容器纯粹是为了运行代码，而不是编辑它。您真的不应该在容器内使用编辑器。

不过我确实认为您当前的应用程序结构不正确。您的 API 应该提供您的前端检索和显示的数据。目前，您的后端代码仅用作前端应用程序的路由器，但您应该使用 client-side router 并构建 RESTFUL JSON-发送 API。然后从您的客户端 javascript 您可以对您的 API 进行 fetch 调用，这应该 res.send 一些 JSON.

Answer 2

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

watchOptions {
  poll: 100
}

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

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

我的前端是使用 create-react-app 创建的，其中公开了 webpack 配置的 none。我不得不运行

npm run eject

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

现在，不赞成使用弹出，因为 "you can't go back"...但是因为我使用的是 docker 容器并在构建容器时使用 create-react-app/eject - 我有效地使自己摆脱了这种不良情况。（尽管如果我有任何变化，我可能必须修复我的 docker 文件）。

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

Answer 3

在我的例子中启用这个环境变量解决了它：

CHOKIDAR_USEPOLLING=true

就是这个设置，不用安装。 Chokidar docs 声明它有助于通过网络观看文件。看起来，这对 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

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

React Webpack not rebuilding when edited file outside docker container (on mac)

macos

docker

reactjs

webpack

create-react-app