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=true
como 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:8080
vez de 8081:8080
recarregar a quente, funciona! Observe que o aplicativo aparece nos dois casos quando eu o acesso no navegador host nas localhost
portas 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 .
-p 8080:8080 -p 8081:8081