Vue在docker中hot reload失效的問題

這陣子在嘗試在開發流程中導入docker，有次寫Vue時就發生了標題所述的狀況。
通常我們在啟動node之後，修改文檔不用重啟服務，就能直接在網頁看到調整的結果，在Vue中是透過Hot-Reloading這個機制，偵測文檔是否變動過而重新載入到服務中。
但掛載到docker後我發現這個機制失效了，一開始以為是設定問題，找了幾種方式來重啟Hot-Reloading結果都失敗，最後發現是docker掛在volumes時似乎無法偵測到host端的檔案修改裝態。

解決方式

解決方式很簡單，設定CHOKIDAR_USEPOLLING這個環境參數即可。
因為我是用docker-compose，所以設定方式如下：

version: "3.3"

services: 
  my_app:
    ....
    ports:
      - "3030:3000"
    volumes:
      - /path/on/laptop:/target/in/container
    stdin_open: true
    tty: true
    environment:
      - ...
      - CHOKIDAR_USEPOLLING=true #加上這個

如果用Dockerfile則也可以用指令方式呼CHOKIDAR_USEPOLLING
這樣就能在容器中偵測volumes的檔案變化囉！

可以參考以下資料
https://daten-und-bass.io/blog/enabling-hot-reloading-with-vuejs-and-vue-cli-in-docker/

https://github.com/paulmillr/chokidar