La ricarica a caldo non funziona con webpack-dev-server e docker

Utilizzo di Ubuntu Linux con docker installato. Nessuna macchina virtuale.

Ho creato un'immagine docker con un'applicazione vuejs. Per abilitare la ricarica a caldo, avvio il contenitore della finestra mobile 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

Si avvia bene e posso accedervi dal mio browser host su localhost:8081. Ma quando apporto modifiche ai file di origine e le salvo, queste non si riflettono nel mio browser prima di premere F5 (la ricarica a caldo non funziona).

Alcuni dettagli di seguito:

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

    }

Ho provato a modificare watchOptions ma non ha alcun effetto.

MODIFICARE:

Sulla base della risposta di seguito ho provato a passare: CHOKIDAR_USEPOLLING=truecome variabile d'ambiente per eseguire la finestra mobile:

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

Ma non ha effetto - non riesco ancora a ricaricare a caldo le mie modifiche. Anche nel link fornito si dice:

Aggiornamento / Chiarimento: questo problema si verifica solo quando si esegue il motore Docker all'interno di una macchina virtuale. Se sei su Linux sia per Docker che per la codifica non hai questo problema.

Quindi non pensare che la risposta si applichi alla mia configurazione: sto eseguendo Ubuntu Linux sul mio computer su cui ho installato la finestra mobile. Quindi nessuna configurazione VM.

Un altro aggiornamento - basato sul commento qui sotto sulla modifica della mappatura delle porte:

  # 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

Quindi, se porto la mappa 8080:8080invece di 8081:8080hot ricaricare funziona! Si noti che l'applicazione si presenta in entrambi i casi quando accedo ad essa sul mio browser host sulle localhostporte sopra menzionate. È solo che la ricarica rapida funziona solo quando mappa l'applicazione a 8080 sul mio host.

Ma perché??

Ora se lo faccio:

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

La ricarica a caldo ovviamente funziona. Ma ancora non so perché non riesco a mappare la porta del contenitore interno da 8080 a 8081 esternamente sull'host.

btw; Non vedo affatto il problema se uso vue-cli-service serveinvece: tutto funziona immediatamente .

Non sono affatto un utente VueJS, non ci ho mai lavorato, ma uso Docker pesantemente per il mio flusso di lavoro di sviluppo e in passato ho riscontrato un problema simile.

Nel mio caso il Javascript inviato al browser stava provando a connettersi con la porta interna del contenitore docker 8080, ma una volta che quello mappato per l'host era 8081, JS nel browser non era in grado di raggiungere 8080all'interno del contenitore docker, quindi la ricarica a caldo non funzionava.

Quindi mi sembra che tu abbia lo stesso scenario, quindi devi configurare nella tua app VueJS il hot ricaricamento per ascoltare nella stessa porta che vuoi usare nell'host, o semplicemente usare la stessa porta per entrambi ho già concluso che funziona.

Se watchOptions non funziona, puoi provare l'altra opzione:

 environment:

  - CHOKIDAR_USEPOLLING=true

Come da documenti qui:

“Se guardare non funziona per te, prova questa opzione. La visione non funziona con NFS e macchine in VirtualBox. ”

Riferimento:

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