Laravel Sailの環境でBrowsersyncを利用したホットリロードを実現する

docker-compose.ymlに3000番のポートを追加

Browsersyncで使用するポート3000番を追加します


        ports:
            - "${APP_PORT:-80}:80"
            - "${HMR_PORT:-8080}:8080"
            - "3000:3000"

Browsersyncの設定

webpack.mix.jsに下記コードを追記


mix.browserSync({
    proxy: "laravel.test",
    port: 3000,
    open: false,
});

モジュールのインストール

まずコンテナにルートユーザーで接続します


sail root-shell

次に下記コマンドで必要なモジュールをインストールします


npm i browser-sync browser-sync-webpack-plugin -D

コンテナを再起動する

コンテナを再起動させると3000番のポートが開いた状態で立ち上がります


sail stop
sail up -d

Browsersyncの実行


sail npm run watch

上記コマンドを実行後http://localhost:3000にアクセスできるようになります。

参考