Docker x Laravel ブラウザ自動リロード(Hot Module Replacement)

css や js ファイルが変更されたら自動的にブラウザリロードしてくれるととても開発が楽になります。
ということで、Laravel-mixでブラウザ自動リロード設定を行います。

対象者

Laravel Blade を書く人向け

前提

• 最強のLaravel開発環境をDockerを使って構築する【新編集版】
• https://github.com/ucan-lab/docker-laravel

当記事は上記の記事の補足になる記事です。

環境

• PHP: 7.4.6
• Laravel: 8.5.0
• Node: 14.2.0
• yarn: 1.22.4
• browser-sync: 2.26.12
• browser-sync-webpack-plugin: 2.2.2
• vue-template-compiler: 2.6.12

前準備: yarn を使用する場合

{
    // ...
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    // ...
}

npm run を yarn に書き換えてください。

{
    // ...
    "scripts": {
        "dev": "yarn development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "yarn development -- --watch",
        "watch-poll": "yarn watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "yarn production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    // ...
}

webpack.mix.js を修正する

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .browserSync({
        proxy: {
            target: 'http://app:9000',
        },
        files: [
            './resources/**/*',
            './public/**/*',
        ],
        open: false,
        reloadOnRestart: true,
    });
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

ビルド

$ make web
$ yarn install

# npm コマンドでインストールしようとするので、手動で追加しておきます。
$ yarn add -D vue-template-compiler browser-sync browser-sync-webpack-plugin

$ yarn hot

resources や public 配下のファイルが変更されたら自動的にブラウザリロードが行われます。
これでもokなんですが、コンテナ内でビルドさせるとめちゃくちゃ遅いです...

ローカルでNodeを使う場合の設定を書きます。

ローカルのNodeを使う場合

webpack.min.js

        proxy: {
            target: 'http://127.0.0.1', // 書き換え(webコンテナを指定している)
        },

Webpackのサーバーを起動します。

$ cd backend
$ yarn hot

参考