Help us understand the problem. What is going on with this article?

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

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

対象者

Laravel Blade を書く人向け

前提

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

環境

  • 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 runyarn に書き換えてください。

{
    // ...
    "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.min.js を修正する

webpack.min.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

http://127.0.0.1

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

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

ローカルのNodeを使う場合

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

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

$ cd backend
$ yarn hot

http://127.0.0.1:3000

参考

https://browsersync.io/docs/options

ucan-lab
Backend Developer at ROLO. I love PHP and I'm focusing on Laravel, Docker, GraphQL.
https://u-can.pro
yyphp
PHPerが毎週集まり、ざっくばらんに情報交換する雑談コミュニティ
https://yyphp.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away