Docker環境でVUE CLIのホットリロードが効かない

問題

Docker上でvue.jsプロジェクトを作成するとホットリロードが動作しない。

解決策

プロジェクトルートのvue.config.jsに以下のように記述。
vue.config.jsがなければ作成

vue.config.js

module.exports = {
  devServer: {
    client: {
      webSocketURL: 'ws://0.0.0.0:8080/ws'
    }
  }
}

詳細

環境

・macOS Big Sur 11.5.2
・@vue/cli 5.0.0
・Docker version 4.13.1 (90346)
・docker-compose version 2.12.1

最初は、以下の記事を参考にし、vue.config.jsにこんな感じで書いた。
Docker Compose 上で Vue CLI の Hot Reload を動くようにする

vue.config.js

module.exports = {
  devServer: {
    client: {
      host: '0.0.0.0',
      webSocketURL: 'ws://0.0.0.0:8080/ws'
    }
  }
}

しかし、npm run serveするとこんなエラーを吐かれた

 INFO  Starting development server...
 ERROR  ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
         - options.client has an unknown property 'host'. These properties are valid:
           object { logging?, overlay?, progress?, reconnect?, webSocketTransport?, webSocketURL? }

どうやらwebpack-dev-serverのv4ではhostオプションが消えているらしい。

devServer-> client内のhostオプションを削除するとうまく動作した。

vue.config.js

vue:vue.config.js
module.exports = {
  devServer: {
    client: {
      // host: '0.0.0.0',
      webSocketURL: 'ws://0.0.0.0:8080/ws'
    }
  }
}

参考文献

Docker Compose 上で Vue CLI の Hot Reload を動くようにする