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

2024-03-03

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

一些细节如下:

包.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

    }

尝试修改观看选项但没有效果。

EDIT:

根据下面的答案,我尝试通过: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

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

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

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

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

  # 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相反 - 一切正常盒子外面.


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

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

热重载不适用于 webpack-dev-server 和 docker 的相关文章

随机推荐