docker - 热重载不适用于 webpack-dev-server 和 docker

Question

使用安装了 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 之前，它们不会反射(reflect)在我的浏览器中(热重载不起作用)。

一些细节如下:

package.json

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

构建/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

    }

试图修改 watch 选项 但它没有效果。

编辑:

基于以下答案，我试图通过:CHOKIDAR_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

但它没有效果 - 仍然无法热重新加载我的更改。同样在提供的链接中，它说:

Update/Clarification: This problem only occurs when running your Docker engine inside a VM. If you are on Linux for both Docker and for coding you do not have this problem.

所以不要认为答案适用于我的设置 - 我在我安装了 docker 的机器上运行 Ubuntu Linux。所以没有VM设置。

另一个更新 - 基于下面关于更改端口映射的评论:

  # 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热重载有效!请注意，当我在 localhost 上的主机浏览器上访问该应用程序时，在这两种情况下都会出现该应用程序。在前面提到的端口上。只是热重载仅在我将应用程序映射到主机上的 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-service serve，我根本看不到问题相反 - 一切都开箱即用。

Answer 1

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

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

所以在我看来你和我有同样的场景，因此你需要在你的 VueJS 应用程序中配置热重载来监听你想在主机中使用的同一个端口，或者只是使用同一个端口作为你已经得出结论，它有效。