Laravel Sailで作成したプロジェクトでBrowsersyncを有効化する

Laravel Sailで作成したプロジェクトでBrowsersyncを有効化するLaravel Sailで作成したプロジェクトの`package.json`には`watch`や`hot`スクリプトが定義されていますが、Browsersyncのインストールや`docker-compose.yml`の設定はないので設定方法をまとめました。


## Browsersyncとは

Browsersync - Time-saving synchronised browser testing
https://browsersync.io/

Browsersyncはソースコードを編集して更新したタイミングでブラウザをリロードしてくれる便利ツールです。

## 前提

[こちら](https://qiita.com/kai_kou/items/bfea0281689b3d376812)の手順で手元にLaravel Sailで作成したプロジェクトがクローンされており、Dockerコンテナが実行されている環境となります。

今回の手順は[こちらのブランチ](https://github.com/kai-kou/laravel-sail-sample-projects/tree/use-browsersync)でも確認できます。

## 手順

### `docker-compose.yml`の編集

Browsersyncが利用するポート番号`3000`、`3001`を開放します。

```yaml:docker-compose.yml(一部抜粋)
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.0
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.0/app
        ports:
            - '${APP_PORT:-80}:80'
            - '3000:3000'
            - '3001:3001'
```

### `webpack.mix.js`の編集

公式ドキュメントを参考にして`webpack.mix.js`に設定を追加します。

BrowserSync | Laravel Mix Documentation
https://laravel-mix.com/docs/4.0/browsersync


```js:webpack.mix.js
mix.browserSync('laravel.test');
```

### Browsersyncのインストール

```console
> ./vendor/bin/sail npm install browser-sync browser-sync-webpack-plugin --save-dev
```

### Browsersyncの実行

Browsersyncのインストールと設定ができたら`npm run hot`コマンドを実行します。

```console
> ./vendor/bin/sail npm run hot
(略)
✔ Compiled Successfully in 8426ms
┌────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐
│                                                                                                           File │ Size     │
├────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤
│                                                                                                     /js/app.js │ 926 KiB  │
│                                                                                                    css/app.css │ 3.75 MiB │
└────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘
webpack compiled successfully
[Browsersync] Proxying: http://laravel.test
[Browsersync] Access URLs:
 -----------------------------------
       Local: http://localhost:3000
    External: http://172.31.0.7:3000
 -----------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -----------------------------------
[Browsersync] Watching files...
[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)
```

Browsersyncが実行されると、`http://localhost`がBrowsersyncを経由して`http://localhost:3000`でアクセスできるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48549/6577be23-fc09-f4ce-7164-90515a980abe.png)


`http://localhost:3001`はBrowsersyncのダッシュボードになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48549/f9e32751-9dfb-b40b-bd1c-f9928903c429.png)

`.env`ファイルで`APP_PORT`を指定してポートを変更しても`APP_PORT`は`docker-compose.yml`でホスト側のポート指定するのに利用されているので、ポート変更しても特に他の対応がいらず使い勝手が良いです。`http://localhost:3000`のみ利用するのであれば、開放するポートを絞り込むこともできます。素敵

```yaml:こんな感じ
        ports:
            - '${APP_PORT:-3000}:3000'
            - '3001:3001' # ダッシュボードが不要だと削除できる
```


## 参考

Browsersync - Time-saving synchronised browser testing
https://browsersync.io/

BrowserSync | Laravel Mix Documentation
https://laravel-mix.com/docs/4.0/browsersync