Laravel Sail など Docker 環境下で Laravel Mix のホットリロード (sail npm run hot) が正常に動作しない場合の対処法

発生事象

• Laravel Sail 環境下で、ホットリロード sail npm run hot が正常に動作しない。
• ブラウザから HMR で指定している localhost:8080 にリクエストを送ると、 EMPTY_RESPONSE エラーあるいは CONEECTION_REFUSED エラーが返却される

GET http://localhost:8080/js/main.js net::ERR_EMPTY_RESPONSE

Failed to load resource: net::ERR_CONNECTION_REFUSED

解決方法

ポイントは以下の2点

1. webpack の DevServer のバインドアドレスに 0.0.0.0 を指定すること

デフォルトでは localhost (127.0.0.1) にバインドされるため、ホストからアクセスすることができません。

webpack.mix.js

mix.webpackConfig({
  devServer: {
    host: '0.0.0.0',
    port: 8080,
  },
});

2. 8080番のポートフォワーディングを行うこと

docker-compose.yaml

services:
    laravel.test:
        ports:
            - '${APP_PORT:-80}:80'
            - '8080:8080'
# その他省略

HMR や DevServer で別ポートを指定している場合は適宜読み替えてください。

---