Hot reload ไม่ทำงานกับ webpack-dev-server และ docker

ใช้ Ubuntu Linux พร้อมติดตั้ง docker ไม่มี VM

ฉันสร้างภาพนักเทียบท่าด้วยแอปพลิเคชั่น vuejs ในการเปิดใช้งาน hot reload ฉันเริ่มคอนเทนเนอร์ 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 (hot reload ไม่ทำงาน)

รายละเอียดบางอย่างด้านล่าง:

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

แต่มันไม่มีผลกระทบ - ยังคงไม่สามารถโหลดการเปลี่ยนแปลงของฉันร้อน นอกจากนี้ในลิงค์ที่มีให้มันบอกว่า:

Update / Clarification: ปัญหานี้เกิดขึ้นเฉพาะเมื่อรันเอ็นจิ้น Docker ภายใน VM หากคุณอยู่บน Linux สำหรับทั้ง Docker และการเข้ารหัสคุณไม่มีปัญหานี้

ดังนั้นอย่าคิดว่าคำตอบนั้นนำไปใช้กับการตั้งค่าของฉัน - ฉันใช้งาน Ubuntu Linux บนเครื่องที่ติดตั้ง Docker ไว้ ดังนั้นจึงไม่มีการตั้งค่า 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 ที่ถูกส่งไปยังเบราว์เซอร์กำลังพยายามเชื่อมต่อกับพอร์ตภายในของคอนเทนเนอร์นักเทียบท่า8080แต่เมื่อแมปหนึ่งสำหรับโฮสต์ถูก8081JS ในเบราว์เซอร์ไม่สามารถเข้าถึง8080ภายในคอนเทนเนอร์นักเทียบท่าดังนั้น การโหลดซ้ำร้อนไม่ทำงาน

ดังนั้นสำหรับฉันแล้วคุณมีสถานการณ์แบบเดียวกันกับฉันดังนั้นคุณต้องกำหนดค่าในแอป VueJS ของคุณโหลดร้อนใหม่เพื่อฟังในพอร์ตเดียวกับที่คุณต้องการใช้ในโฮสต์หรือเพียงแค่ใช้พอร์ตเดียวกันสำหรับทั้งคุณ สรุปแล้วว่ามันใช้งานได้

หาก watchOptions ไม่ทำงานคุณสามารถลองใช้ตัวเลือกอื่น ๆ ได้:

 environment:

  - CHOKIDAR_USEPOLLING=true

ตามเอกสารที่นี่:

“ หากการรับชมไม่เหมาะกับคุณให้ลองใช้ตัวเลือกนี้ การเฝ้าดูไม่ทำงานกับ NFS และเครื่องใน VirtualBox”

อ้างอิง:

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