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


10

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 .


¿Funciona esto en VM?
Gauravsa

¿Qué quieres decir con lo descrito? La aplicación se está ejecutando dentro de un contenedor acoplable.
u123

¿Puede cambiar su definición de puerto a-p 8080:8080 -p 8081:8081
George

Ha especificando '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' funciona ! Por lo tanto, la aplicación necesita un puerto asignado a 8080 para que la recarga en caliente funcione. ¿¿Pero por qué??
u123

Respuestas:


2

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.


Sí, suena así. Sin embargo, podría ser interesante con una explicación, ya que en este momento necesito recordar aplicar mi solución alternativa como se describe. Además, como lo describí, funciona de inmediato si utilizo 'vue-cli-service serve' en su lugar, por lo que debe ser algo que está roto en el 'webpack-dev-server' sin formato.
u123

Nada está roto en 'webpack-dev-server', solo necesita comprender cómo funciona Docker. Docker es como una caja negra para la recarga en vivo. Por todo lo que importa es hablar con localhost, no con Docker.
Exadra37

-1

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/


No estoy seguro de dónde especificar lo que sugiere, pero según tengo entendido, debe establecerse como una variable de entorno. Si hago eso para ejecutar Docker, no tiene ningún efecto. Ver mi publicación actualizada. También en el enlace que proporciona, dice que esto solo es relevante cuando se ejecuta en una VM.
u123
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.