La recarga en caliente no funciona con webpack-dev-server y docker

Usando Ubuntu Linux con docker instalado. No VM.

He creado una imagen acoplable con una aplicación vuejs. Para habilitar la recarga en caliente, inicio el contenedor acoplable con:

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

Se inicia bien y puedo acceder desde mi navegador host localhost:8081. Pero cuando hago cambios en los archivos de origen y guardo esos cambios, no se reflejan en mi navegador antes de presionar F5 (la recarga en caliente no funciona).

Algunos detalles a continuación:

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

    }

Intenté modificar las opciones de watch pero no tiene ningún efecto.

EDITAR:

Según la respuesta a continuación, he intentado pasar: CHOKIDAR_USEPOLLING=truecomo una variable de entorno para ejecutar Docker

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

Pero no tiene efecto, todavía no puedo recargar mis cambios en caliente. También en el enlace provisto dice:

Actualización / Aclaración: este problema solo ocurre cuando se ejecuta el motor Docker dentro de una VM. Si está en Linux tanto para Docker como para la codificación, no tiene este problema.

Así que no piense que la respuesta se aplica a mi configuración: estoy ejecutando Ubuntu Linux en mi máquina donde instalé docker. Entonces no hay configuración de VM.

Otra actualización , basada en el comentario a continuación sobre cómo cambiar la asignación de puertos:

  # 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

Entonces, si porto el mapa a en 8080:8080lugar de 8081:8080la recarga en caliente funciona Observe que la aplicación aparece en ambos casos cuando accedo a ella en mi navegador host localhosten los puertos mencionados anteriormente. Es solo que la recarga en caliente solo funciona cuando asigno la aplicación a 8080 en mi host.

¿¿Pero por qué??

Ahora si lo hago:

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

Recarga en caliente, por supuesto, funciona. Pero aún no estoy seguro de por qué no puedo asignar el puerto de contenedor interno 8080 a 8081 externamente en el host.

Por cierto; No veo el problema en absoluto si lo uso vue-cli-service serve, todo funciona de forma inmediata .

No soy un usuario de VueJS en absoluto, nunca trabajé con él, pero uso mucho Docker para mi flujo de trabajo de desarrollo, y en el pasado tuve un problema similar.

En mi caso, el Javascript que se envió al navegador estaba tratando de conectarse con el puerto interno del contenedor acoplable 8080, pero una vez que el mapeado para el host fue 8081, el JS en el navegador no pudo alcanzar el 8080interior del contenedor acoplable, por lo tanto La recarga en caliente no funcionaba.

Entonces, me parece que tiene el mismo escenario que yo, por lo tanto, debe configurar en su aplicación VueJS la recarga en caliente para escuchar en el mismo puerto que desea usar en el host, o simplemente usar el mismo puerto para ambos Ya concluí que funciona.

Si watchOptions no funciona, puede probar la otra opción:

 environment:

  - CHOKIDAR_USEPOLLING=true

Según los documentos aquí:

“Si mirar no te funciona, prueba esta opción. La observación no funciona con NFS y máquinas en VirtualBox ".

Referencia:

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