热重新加载无法与Web包开发服务器和docker一起使用

使用安装了docker的Ubuntu Linux。没有虚拟机

我已经用vuejs应用程序构建了一个docker映像。要启用热重新加载，我使用以下命令启动docker容器：

docker run -it -p 8081:8080 -e "HOST=0.0.0.0" -v ${PWD}:/app/ -v /app/node_modules --name my-frontend my-frontend-image

它启动正常，我可以从主机浏览器

localhost:8081

上访问它。但是，当我对源文件进行更改并保存这些更改时，在按F5之前，它们不会反映在浏览器中（热重新加载不起作用）

有关详情如下:

package.json

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",

build/webpack.dev.conf.js

  devServer: {
    clientLogLevel: 'warning',
    ...
    hot: true,
    ...
    watchOptions: {
      //poll: config.dev.poll,
      //aggregateTimeout: 500, // delay before reloading
      poll: 100 // enable polling since fsevents are not supported in docker

    }

试图修改观察选项，但无效

编辑：

基于以下答案，我尝试将：

CHOKIDAR\u USEPOLLING=true

作为环境变量传递给docker run：

docker run -it -p 8081:8080 -e "HOST=0.0.0.0" -e "CHOKIDAR_USEPOLLING=true" -v ${PWD}:/app/ -v /app/node_modules --name my-frontend my-frontend-image

但它没有效果-仍然无法热重新加载我的更改。在提供的链接中，它还表示：

更新/澄清：此问题仅在运行 虚拟机中的Docker引擎。如果您在Linux上同时使用Docker和 编码您没有这个问题

所以，不要认为答案适用于我的设置——我正在安装docker的机器上运行UbuntuLinux。所以没有虚拟机设置

另一次更新-基于以下关于更改端口映射的评论：

  # Hot reload works!
  docker run -it -p 8080:8080 -e "HOST=0.0.0.0" -v ${PWD}:/app/ -v /app/node_modules --name my-frontend my-frontend-image

  # Hot reload fails!  
  #docker run -it -p 8081:8080 -e "HOST=0.0.0.0" -v ${PWD}:/app/ -v /app/node_modules --name my-frontend my-frontend-image

因此，如果我将端口映射到

8080:8080

而不是

8081:8080

热重新加载工作！请注意，在这两种情况下，当我在前面提到的端口上的主机浏览器上访问应用程序时，应用程序都会出现。只是热重新加载只有在我将应用程序映射到主机上的8080时才起作用

但是为什么呢

现在如果我这样做：

PORT='8081'
docker run -it -p "${PORT}:${PORT}" -e "HOST=0.0.0.0" -e "PORT=${PORT}" -v ${PWD}:/app/ -v /app/node_modules --name my-frontend my-frontend-image

当然是热装了。但是仍然不确定为什么我不能在主机外部将内部容器端口8080映射到8081

---

顺便说一句；如果改用

vue cli服务，我根本看不出问题所在-一切都是现成的。
如果watchOptions不起作用，您可以尝试其他选项：

 environment:

  - CHOKIDAR_USEPOLLING=true

根据此处的文件：

如果监视不适用于您，请尝试此选项。监视不适用于NFS和VirtualBox中的计算机

参考：

我根本不是VueJS用户，从未使用过它，但我在开发工作流程中大量使用Docker，过去我也遇到过类似的问题

在我的例子中，发送到浏览器的Javascript试图连接docker容器的内部端口
8080
，但一旦主机的映射端口为
8081
，浏览器中的JS就无法到达docker容器内的
8080
，因此热重新加载无法工作

因此，在我看来，您的场景与我相同，因此您需要在VueJS应用程序中配置热重新加载，以便在主机中使用的相同端口中进行侦听，或者只使用相同的端口，因为您已经得出结论，它可以工作。
这在VM下工作吗？您所描述的应用程序在docker容器中运行是什么意思。可以将端口定义更改为
-p8080:8080-p8081:8081
Ha指定'docker run-it-p8080:8080-e“HOST=0.0.0.0”-v${PWD}：/app/-v/app/node_模块--命名我的前端我的前端图像“工作！因此，应用程序显然需要映射到8080的端口才能进行热重新加载。但为什么呢？我不确定在哪里指定您的建议，但据我所知，它需要设置为一个环境变量。如果我这样做docker run就没有效果了。见我更新的帖子。在你提供的链接中，它还说这只在虚拟机中运行时才相关。这确实解决了我的热负载问题：
PS D:\app>docker run-dp 80:8080-e“CHOKIDAR_USEPOLLING=true”-w/app-v“$（pwd）：/app”node:15 alpine sh-c“npm run serve”
听起来不错。不过有一个解释可能会很有趣——因为现在我需要记住按照描述应用我的变通方法。另外，正如我所描述的，如果我改用“vue cli service serve”，它是开箱即用的，因此必须是原始“webpack dev server”中出现的问题。在“webpack dev server”中没有任何问题，您只需要了解Docker是如何工作的。Docker就像一个实时重新加载的黑匣子。重要的是，它与本地主机而不是docker对话。