2017-09-23 69 views
3

我使用创建反应的应用内创建一个码头工人容器内的反应的应用程序以外的文件时的WebPack不重建。 当我在容器内编辑App.js时,应用程序会自动重建并重新加载浏览器。 但是当我编辑一个文件容器(在主机上),它没有得到重建。阵营编辑搬运工容器(上MAC)

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

我认为这种事情对于开发人员设置(例如 - 使用docker创建构建环境,但使用实际代码使用挂载)是非常正常的。

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

+0

也许你m不正确地装入与主机/容器文件相匹配的卷。当你编辑文件(主机)时,你是否检查过容器文件也改变了? – eLRuLL

+0

是的。写入容器或主机中的文件,并反映这些更改。 – roocell

回答

3

我想通了自己。 这是webpack配置,阻止了容器外部的编辑以触发重建和重新启动。 诀窍存在(显然这是一个传统的选项)

watchOptions { 
    poll: 100 
} 

注:使用调查:1000导致它仅刷新所有其他编辑。每次编辑使用100个作品。不知道为什么。

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

我的前端是使用create-react-app创建的,其中没有暴露webpack配置。我不得不运行

npm run eject 

以暴露的WebPack配置(我编辑的配置/ webpackDevServer.config.js文件)。

现在,使用弹出是因为“你不能回去”而皱起了眉头......但是因为我使用docker容器并在构建容器时使用create-react-app/eject-我已经有效地使自己免于这种不良情况。 (尽管如果我有任何改变,我可能不得不修复我的docker文件)。

所有这些编辑,可以发现在我的搬运工文件在这里 https://github.com/roocell/fullstack_react_nodejs_in_docker

0

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

Docker容器纯属意味着运行代码,不能编辑它。你真的不应该在容器中使用编辑器。

我做不过认为当前的应用程序结构不正确。你的API应该提供前端检索和显示的数据。目前你的后端代码只用作您的前端应用的路由器,而是你应该使用一个client-side router和构建RESTful JSON-发送API。然后从你的客户端JavaScript你可以做fetch调用你的API,这应该是res.send一些JSON。

+0

绝对不打算编辑容器内的代码 - 想要为开发目的安装主机目录。使用卷实际上会解决我的问题吗?我会试试看。 我确实打算使用客户端路由器,并让后端吐出JSON - 只是还没有得到那么多。感谢链接到npm - 不知道它。 – roocell

+0

这很好听。你已经在你的'docker run'命令中使用了Volumes,而不是像我建议的那样每次使用Docker-Compose时都要运行两个长命令。 我没有在你的git仓库中看到一个package.json文件,你可以推它吗?我们需要确定你使用的是什么类型的监视器(像nodemon/pm2或甚至是一些webpack脚本) –

+0

我再次推送。观察者是任何反应使用 - 大概是webpack我相信。我的后端也有一个package.json(这是一个expressjs应用程序并使用webpack/nodemon) - 它也有同样的问题。在容器内编辑 - 监视器重建。在容器外编辑 - 观察者不重建。 – roocell

1

在我的情况下启用这个环境变量解决它:

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