Hot Reload nie działa z webpack-dev-server i docker

Używanie systemu Ubuntu Linux z zainstalowanym dokerem. Bez maszyny wirtualnej.

Zbudowałem obraz dokera z aplikacją vuejs. Aby włączyć ponowne ładowanie na gorąco, uruchamiam kontener dokerów z:

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

Zaczyna się dobrze i mogę uzyskać do niego dostęp z mojej przeglądarki na localhost:8081. Ale kiedy wprowadzam zmiany w plikach źródłowych i zapisuję te zmiany, nie są one odzwierciedlane w mojej przeglądarce przed naciśnięciem F5 (ponowne ładowanie na gorąco nie działa).

Niektóre szczegóły poniżej:

pakiet.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

    }

Próbowałem zmodyfikować watchOptions, ale nie działa.

EDYTOWAĆ:

Na podstawie poniższej odpowiedzi próbowałem przekazać: CHOKIDAR_USEPOLLING=truejako zmienną środowiskową do uruchomienia okna dokowanego:

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

Ale to nie działa - wciąż nie mogę wczytać na gorąco moich zmian. Również w podanym linku jest napisane:

Aktualizacja / wyjaśnienie: ten problem występuje tylko podczas uruchamiania silnika Docker wewnątrz maszyny wirtualnej. Jeśli korzystasz z systemu Linux zarówno dla Dockera, jak i dla kodowania, nie masz tego problemu.

Więc nie sądzę, że odpowiedź dotyczy mojej konfiguracji - używam Ubuntu Linux na moim komputerze, na którym zainstalowałem dokera. Więc nie ma konfiguracji VM.

Kolejna aktualizacja - na podstawie poniższego komentarza dotyczącego zmiany mapowania portów:

  # 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

Więc jeśli przeniesie mapę do 8080:8080zamiast 8081:8080przeładowania na gorąco, działa! Zauważ, że aplikacja pojawia się w obu przypadkach, gdy uzyskuję do niej dostęp w przeglądarce hosta na localhostwyżej wymienionych portach. Po prostu ponowne ładowanie na gorąco działa tylko wtedy, gdy mapuję aplikację na 8080 na moim hoście.

Ale dlaczego??

Teraz jeśli zrobię:

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

Gorące przeładowanie oczywiście działa. Ale nadal nie jestem pewien, dlaczego nie mogę zmapować wewnętrznego portu kontenera 8080 na 8081 zewnętrznie na hoście.

Btw; Nie widzę problemu, jeśli użyję vue-cli-service servezamiast tego - wszystko działa od razu po wyjęciu z pudełka .

W ogóle nie jestem użytkownikiem VueJS, nigdy z nim nie pracowałem, ale używam Dockera do pracy nad programowaniem, aw przeszłości miałem podobny problem.

W moim przypadku JavaScript, który został wysłany do przeglądarki, próbował połączyć się z wewnętrznym portem kontenera dokującego 8080, ale kiedy już był mapowany dla hosta 8081, JS w przeglądarce nie był w stanie dotrzeć 8080do kontenera dokującego, dlatego Hot Reload nie działało.

Wydaje mi się więc, że masz taki sam scenariusz jak ja, dlatego musisz skonfigurować w aplikacji VueJS hot reload, aby nasłuchiwać w tym samym porcie, którego chcesz używać na hoście, lub po prostu użyć tego samego portu dla obu już doszedłem do wniosku, że to działa.

Jeśli watchOptions nie działa, możesz wypróbować drugą opcję:

 environment:

  - CHOKIDAR_USEPOLLING=true

Zgodnie z dokumentami tutaj:

„Jeśli oglądanie nie działa, wypróbuj tę opcję. Oglądanie nie działa z NFS i komputerami w VirtualBox. ”

Odniesienie:

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