Laravel

【Laravel×Docker】browser-syncでホットリロードする方法

環境

  • docker 20.10.6
  • docker-compose 1.29.1
  • composer 2.0.14
  • laravel 8.42.1
  • laravel Mix 6.0.19
  • php 8.0.7
  • browser-sync 2.26.14

手順

  1. browser-sync をインストール
  2. webpack.mix.js を編集
  3. 起動

browser-sync をインストール

以下のコマンドでグローバルに browser-sync をインストール(今後使わなそうなら開発環境のみでも OK)

npm install -g browser-sync browser-sync-webpack-plugin

webpack.mix.js を編集

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    // ここから下
    .browserSync({
        proxy: {
            target: 'http://localhost:10080',
        },
        files: ['./resources/**/*', './public/**/*'],
        open: true,
        reloadOnRestart: true,
    });
       proxy: {
            target: 'http://localhost:10080',
        },

targetには web サーバのホスト側ポート番号を設定

version: 3.9
services:

        (省略)

  web:
    image: nginx:1.20-alpine
    ports:
      - 10080:80 //ここの左側の値のこと
    volumes:
      - ./backend:/work
      - ./infra/nginx/default.conf:/etc/nginx/conf.d/default.conf
    working_dir: /work

        (省略)
        files: ['./resources/**/*', './public/**/*'],

ここで、各自変更を検知してほしいディレクトリを設定 今回で言うと resources、public 配下のファイルに編集が加わるたびにブラウザに自動で反映してくれる

        open: true,

これは browser-sync を起動したときに自動でブラウザを開くかの設定 ture にすると自動で開く

        reloadOnRestart: true,

これは browser-sync を再起動したときに、開いているブラウザをリロードするかの設定

動作確認

laravel のプロジェクトルートで以下のコマンドを打つと

npm run watch

browser-sync が起動して

(open: trueにしていれば) http://localhost:3000 でブラウザが開かれます

-Laravel