Горячая перезагрузка не работает с webpack-dev-server и docker

Использование Ubuntu Linux с установленным докером. Нет ВМ.

Я создал образ докера с помощью приложения vuejs. Чтобы включить горячую перезагрузку, я запускаю Docker-контейнер с:

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

Он запускается нормально, и я могу получить к нему доступ через браузер хоста localhost:8081. Но когда я делаю изменения в исходных файлах и сохраняю эти изменения, они не отражаются в моем браузере, пока я не нажму F5 (горячая перезагрузка не работает).

Некоторые детали ниже:

package.json

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",

сборки / 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

    }

Пытался изменить watchOptions, но это не имеет никакого эффекта.

РЕДАКТИРОВАТЬ:

Основываясь на ответе ниже, я попытался передать: CHOKIDAR_USEPOLLING=trueв качестве переменной среды для запуска 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

Но это не имеет никакого эффекта - все еще не в состоянии перезагрузить мои изменения. Также в приведенной ссылке сказано:

Обновление / уточнение: эта проблема возникает только при запуске вашего механизма Docker внутри виртуальной машины. Если вы используете Linux для Docker и для кодирования, у вас нет этой проблемы.

Так что не думайте, что ответ применим к моей установке - я использую Ubuntu Linux на моей машине, где я установил докер. Так что нет настройки ВМ.

Еще одно обновление - на основе приведенного ниже комментария об изменении сопоставления портов:

  # 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

Так что если я перенесу карту 8080:8080вместо 8081:8080горячей перезагрузки работает! Обратите внимание, что приложение появляется в обоих случаях, когда я обращаюсь к нему через свой хост-браузер localhostна вышеупомянутых портах. Просто горячая перезагрузка работает только тогда, когда я сопоставляю приложение с 8080 на моем хосте.

Но почему??

Теперь, если я сделаю:

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

Горячая перезагрузка конечно работает. Но все еще не уверен, почему я не могу сопоставить внутренний порт контейнера 8080 с 8081 внешним на хосте.

Btw; Я не вижу проблемы вообще, если я использую vue-cli-service serveвместо этого - все работает из коробки .

Я вообще не пользователь VueJS, никогда не работал с ним, но я активно использую Docker для своего рабочего процесса разработки, и в прошлом у меня возникала похожая проблема.

В моем случае Javascript, который был отправлен в браузер, пытался соединиться с внутренним портом контейнера Docker 8080, но как только был сопоставлен один из них для хоста 8081, JS в браузере не смог достичь 8080внутри контейнера Docker, поэтому горячая перезагрузка не работала.

Поэтому мне кажется, что у вас тот же сценарий, что и у меня, поэтому вам необходимо настроить в своем приложении VueJS горячую перезагрузку для прослушивания на том же порту, который вы хотите использовать на хосте, или просто использовать один и тот же порт для обоих, как вы уже пришел к выводу, что это работает.

Если watchOptions не работает, вы можете попробовать другой вариант:

 environment:

  - CHOKIDAR_USEPOLLING=true

Согласно документации здесь:

«Если просмотр не работает для вас, попробуйте этот вариант. Наблюдение не работает с NFS и машинами в VirtualBox ».

Ссылка:

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