【Docker × Laravel】browser-syncの設定方法

5998 ワード
PHP browser-sync Laravel docker-compose Docker PHP テキストリンク

環境

  • 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）

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

webpack.mix.jsを編集

webpack.mix.js
mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
        require("postcss-import"),
        require("tailwindcss"),
        require("autoprefixer"),
    ])
    // ここから下
    .browserSync({
        proxy: {
            target: "http://localhost:10080",
        },
        files: ["./resources/**/*", "./public/**/*"],
        open: true,
        reloadOnRestart: true,
    });
webpack.mix.js
       proxy: {
            target: "http://localhost:10080",
        },

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

docker-compose.yml
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

　　　　　　　　（省略）
webpack.mix.js
        files: ["./resources/**/*", "./public/**/*"],

ここで、各自変更を検知してほしいディレクトリを設定

今回で言うとresources、public配下のファイルに編集が加わるたびにブラウザに自動で反映してくれる

webpack.mix.js
        open: true,

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

webpack.mix.js
        reloadOnRestart: true,

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

動作確認

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

npm run watch

browser-syncが起動して

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