Question

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

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

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

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

Answer 1

我自己想通了。 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

Answer 2

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

CHOKIDAR_USEPOLLING=true

只需此设置，无需安装。 Chokidar docs表示它有助于通过网络查看文件。看起来，这对码头工作量也很有帮助。

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 3

您应该使用Volumes将包含应用程序文件的主机文件夹链接到容器。更好的方法是使用Docker-Compose，因为你使用的是多个容器。

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

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

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

3 个答案: