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

10

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 .

u123
fonte
Isso está funcionando na VM?
Gauravsa
Como assim descrito, o aplicativo está sendo executado dentro de um contêiner de docker.
U123
Pode mudar a sua definição de porta para-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 ! Então, aparentemente, o aplicativo precisa portar mapeado para 8080 para que a recarga a quente funcione. Mas por que??
U123

Respostas:

2

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.

Exadra37
fonte
Sim, parece que sim. Pode ser interessante com uma explicação - já que agora preciso me lembrar de aplicar minha solução alternativa, conforme descrito. Além disso, como eu descrevi, funciona imediatamente se eu usar o 'vue-cli-service serve', então isso deve ser algo que está quebrado no 'webpack-dev-server' bruto.
U123 22/11/19
Nada está quebrado no 'webpack-dev-server', você só precisa entender como o Docker funciona. O Docker é como uma caixa preta para a recarga ao vivo. Por tudo o que importa é conversar com o host local, não com o docker.
Exadra37
-1

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/

Gauravsa
fonte
Não tenho certeza sobre onde especificar o que você sugere, mas, pelo que entendi, ele precisa ser definido como uma variável de ambiente. Se eu fizer isso para executar o docker, não terá efeito. Veja minha postagem atualizada. Também no link fornecido, ele diz que isso é relevante apenas quando executado em uma VM.
U123