热重装不适用于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键之前它们不会反映在我的浏览器中（热重装不起作用）。

以下是一些详细信息：

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

    }

试图修改watchOptions，但无效。

编辑：

基于以下答案，我尝试通过：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

但这没有效果-仍然无法热装我的更改。同样在提供的链接中显示：

更新/说明：仅在VM中运行Docker引擎时才会出现此问题。如果您在Linux上同时使用Docker和编码，则不会出现此问题。

因此，不要认为答案适用于我的设置-我在安装了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 就无法到达8080docker 容器内部，因此热重载不起作用。

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

Answer 2

如果 watchOptions 不起作用，您可以尝试其他选项：

\n\n

 environment:\n\n  - CHOKIDAR_USEPOLLING=true\n

\n\n

根据此处的文档：

\n\n

\xe2\x80\x9c如果观看不适合您，请尝试此选项。观看不适用于 NFS 和 VirtualBox 中的计算机。\xe2\x80\x9d

\n\n

参考：

\n\n

https://daten-und-bass.io/blog/enabling-hot-reloading-with-vuejs-and-vue-cli-in-docker/

\n