Гаряче перезавантаження не працює з webpack-dev-сервером і docker

Використання Ubuntu Linux із встановленим докером. Немає ВМ.

Я створив зображення докера з додатком vuejs. Щоб увімкнути гаряче перезавантаження, я запускаю контейнер докера за допомогою:

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",

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

    }

Спробував змінити годинник, але це не впливає.

Редагувати:

На підставі наведеної нижче відповіді я намагався передати: CHOKIDAR_USEPOLLING=trueяк змінна середовище для запуску докера:

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 всередині VM. Якщо ви працюєте в Linux як для Docker, так і для кодування, у вас немає цієї проблеми.

Тому не думаю, що відповідь стосується моєї установки - я запускаю Ubuntu Linux на своїй машині, де я встановив докер. Так що ніяких налаштувань VM.

Ще одне оновлення - засноване на коментарі нижче щодо зміни картографічного порту:

  # 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, ніколи з ним не працював, але дуже активно використовую Докер для свого робочого процесу, і в минулому я відчував подібну проблему.

У моєму випадку Javascript, який було надіслано браузеру, намагався з'єднатись із внутрішнім портом контейнера docker 8080, але як тільки відображений для хоста 8081, JS у браузері не зміг дістатися 8080до контейнера docker, тому гаряче перезавантаження не працювало.

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

Якщо годинник не працює, ви можете спробувати інший варіант:

 environment:

  - CHOKIDAR_USEPOLLING=true

Відповідно до документів тут:

"Якщо перегляд у вас не працює, спробуйте цей варіант. Перегляд не працює з NFS та машинами у VirtualBox. "

Довідка:

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