Hot reload tidak bekerja dengan webpack-dev-server dan buruh pelabuhan

Menggunakan Ubuntu Linux dengan buruh pelabuhan diinstal. Tidak ada VM.

Saya telah membangun gambar buruh pelabuhan dengan aplikasi vuejs. Untuk mengaktifkan hot reload, saya memulai wadah buruh pelabuhan dengan:

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

Ini dimulai dengan baik dan saya dapat mengaksesnya dari browser host saya aktif localhost:8081. Tetapi ketika saya membuat perubahan pada file sumber dan menyimpan perubahan itu mereka tidak tercermin di browser saya sebelum saya menekan F5 (hot reload tidak berfungsi).

Beberapa detail di bawah ini:

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

    }

Sudah mencoba mengubah WatchOptions tetapi tidak berpengaruh.

EDIT:

Berdasarkan jawaban di bawah ini saya telah mencoba untuk lulus: CHOKIDAR_USEPOLLING=truesebagai variabel lingkungan untuk menjalankan buruh pelabuhan:

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

Tapi itu tidak berpengaruh - masih belum bisa memuat ulang perubahan saya. Juga di tautan yang disediakan tertulis:

Pembaruan / Klarifikasi: Masalah ini hanya terjadi ketika menjalankan mesin Docker Anda di dalam VM. Jika Anda menggunakan Linux untuk kedua Docker dan untuk coding Anda tidak memiliki masalah ini.

Jadi jangan berpikir jawabannya berlaku untuk pengaturan saya - saya menjalankan Ubuntu Linux di mesin saya di mana saya telah menginstal buruh pelabuhan. Jadi tidak ada pengaturan VM.

Pembaruan lain - berdasarkan komentar di bawah ini tentang mengubah pemetaan port:

  # 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

Jadi jika saya port peta ke, 8080:8080bukan 8081:8080karya ulang panas! Perhatikan bahwa aplikasi muncul dalam kedua kasus ketika saya mengaksesnya di browser host saya pada localhostpada port yang disebutkan sebelumnya. Hanya saja hot reload itu hanya berfungsi ketika saya memetakan aplikasi ke 8080 di host saya.

Tapi kenapa??

Sekarang jika saya lakukan:

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

Hot reload tentu saja berfungsi. Tetapi masih tidak yakin mengapa saya tidak dapat memetakan port container internal 8080 ke 8081 secara eksternal pada host.

Btw; Saya tidak melihat masalah sama sekali jika saya menggunakannya vue-cli-service serve- semuanya bekerja di luar kotak .

Saya bukan pengguna VueJS sama sekali, tidak pernah bekerja dengannya, tapi saya menggunakan Docker banyak untuk alur kerja pengembangan saya, dan di masa lalu saya mengalami masalah yang sama.

Dalam kasus saya, Javascript yang dikirim ke browser sedang mencoba untuk terhubung dengan port internal wadah buruh pelabuhan 8080, tetapi begitu yang dipetakan untuk tuan rumah adalah 8081, JS di browser tidak dapat menjangkau 8080di dalam wadah buruh pelabuhan, oleh karena itu hot reload tidak berfungsi.

Jadi menurut saya Anda memiliki skenario yang sama dengan saya, sehingga Anda perlu mengonfigurasi dalam aplikasi VueJS Anda dengan memuat ulang panas untuk mendengarkan di port yang sama yang ingin Anda gunakan di host, atau hanya menggunakan port yang sama untuk keduanya seperti Anda sudah menyimpulkan bahwa itu berhasil.

Jika WatchOptions tidak berfungsi, Anda dapat mencoba opsi lain:

 environment:

  - CHOKIDAR_USEPOLLING=true

Sesuai dokumen di sini:

“Jika menonton tidak berhasil untuk Anda, cobalah opsi ini. Menonton tidak bekerja dengan NFS dan mesin di VirtualBox. "

Referensi:

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