環境
- 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
手順
- browser-sync をインストール
- webpack.mix.js を編集
- 起動
browser-sync をインストール
以下のコマンドでグローバルに browser-sync をインストール（今後使わなそうなら開発環境のみでも OK）
npm install -g browser-sync browser-sync-webpack-pluginwebpack.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 watchbrowser-sync が起動して
(open: trueにしていれば) http://localhost:3000 でブラウザが開かれます