dockerがインストールされたUbuntu Linuxを使用します。VMなし。
私はvuejsアプリケーションでDockerイメージをビルドしました。ホットリロードを有効にするには、次のコマンドで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キーを押す前にブラウザに反映されません（ホットリロードが機能しません）。
以下の詳細：
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
}
watchOptionsを変更しようとしましたが、効果がありません。
編集：
以下の答えに基づいて、私は渡そうとしました：CHOKIDAR_USEPOLLING=truedocker runの環境変数として：
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内で実行している場合にのみ発生します。Dockerとコーディングの両方でLinuxを使用している場合、この問題は発生しません。
だから答えが私のセットアップに当てはまるとは思わない-私はドッカーをインストールした私のマシンで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にマップできないのかはまだわかりません。
ところで; vue-cli-service serve代わりに使用しても問題はまったくわかりません。すべてがそのまま機能します。
-p 8080:8080 -p 8081:8081