O recarregamento a quente não funciona com o webpack-dev-server e o docker

Usando o Ubuntu Linux com o docker instalado. Sem VM.

Criei uma imagem do docker com um aplicativo vuejs. Para ativar o recarregamento a quente, inicio o contêiner do docker com:

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

Ele inicia bem e eu posso acessá-lo no meu navegador host localhost:8081. Mas quando eu faço alterações nos arquivos de origem e as salvo, elas não são refletidas no meu navegador antes de pressionar F5 (a atualização a quente não funciona).

Alguns detalhes abaixo:

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

    }

Tentou modificar as watchOptions, mas não tem efeito.

EDITAR:

Com base na resposta abaixo, tentei passar: CHOKIDAR_USEPOLLING=truecomo uma variável de ambiente para executar o 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

Mas não tem efeito - ainda não é possível recarregar minhas alterações a quente. Também no link fornecido, ele diz:

Atualização / esclarecimento: Esse problema ocorre apenas ao executar o mecanismo do Docker dentro de uma VM. Se você estiver no Linux para o Docker e para codificação, não terá esse problema.

Portanto, não pense que a resposta se aplica à minha configuração - estou executando o Ubuntu Linux na minha máquina em que instalei o docker. Portanto, nenhuma configuração de VM.

Outra atualização - com base no comentário abaixo sobre a alteração do mapeamento de portas:

  # 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

Portanto, se eu portar o mapa para, em 8080:8080vez de 8081:8080recarregar a quente, funciona! Observe que o aplicativo aparece nos dois casos quando eu o acesso no navegador host nas localhostportas mencionadas anteriormente. É apenas que recarregar a quente só funciona quando mapeio o aplicativo para 8080 no meu host.

Mas por que??

Agora, se eu fizer:

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 a quente, é claro, funciona. Mas ainda não sei por que não consigo mapear a porta de contêiner interno 8080 a 8081 externamente no host.

Btw; Não vejo o problema se eu o usar vue-cli-service serve- tudo funciona imediatamente .

Eu não sou um usuário do VueJS, nunca trabalhei com ele, mas uso o Docker fortemente no meu fluxo de trabalho de desenvolvimento e, no passado, tive um problema semelhante.

No meu caso, o Javascript enviado ao navegador estava tentando conectar-se à porta interna do contêiner do docker 8080, mas uma vez mapeado para o host 8081, o JS no navegador não conseguiu acessar 8080o contêiner do docker, portanto recarregamento a quente não estava funcionando.

Parece-me que você tem o mesmo cenário que eu, portanto, você precisa configurar no seu aplicativo VueJS o recarregamento quente para escutar na mesma porta que deseja usar no host ou apenas usar a mesma porta para você. já concluiu que funciona.

Se watchOptions não funcionar, tente a outra opção:

 environment:

  - CHOKIDAR_USEPOLLING=true

Conforme documentos aqui:

“Se assistir não funcionar para você, tente esta opção. Assistir não funciona com NFS e máquinas no VirtualBox. ”

Referência:

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