Docker x Laravel x Vueを使ってHMRをやってみる

webpack.mix.jsを編集

プロキシはビルドインサーバのデフォルトポート8000を指定。
ホストは0.0.0.0を指定。ホスト機からDockerコンテナにアクセスできるようにするため。

webpack.mix.js

const mix = require('laravel-mix');
・・・・・・
・・・・・・
//// ここから ////
mix.webpackConfig({
  devServer: {
    host: '0.0.0.0',
    proxy: {
      '*': 'http://localhost:8000'
    }
  }
});
//// ここまで ////
・・・・・・
・・・・・・

docker-compose.ymlを編集

ホストとコンテナのポートは8080を指定。webpack-dev-serverのデフォルトポート。
ホットリロードを利用するときはこちらのポートからアクセスする。

docker-compose.yml

version: '3'
services:
  php:
    container_name: php
    build:
・・・・・・
・・・・・・
    #### ここから #####
    ports:
      - 8080:8080
    #### ここまで #####
    volumes:
・・・・・・
・・・・・・
#  nginxなどのWebサーバは使わず、ビルドインサーバを使うのでコメントアウト。
#  nginx:
#    image: nginx
#    container_name: nginx
#    ports:
#      - 80:80

動かしてみる

ターミナルを2つ用意する。

bash1

docker-compose up -d
# xxxxxはコンテナ名を指定。
docker-compose exec xxxxx php artisan serve

bash2

docker-compose exec xxxxx npm run hot
#  DONE  Compiled successfully と表示されるまで待つ

http://localhost:8080/ にアクセスしてホットリロードできました。