Laravel5.5、MixのBrowserSync

タグ： Laravel5.5   Homestead  

小ネタです。Homestead環境でMixを起動したときに、自動的にブラウザが開かないと言う投稿を見たときに説明しようと思っていたが、面倒なので止めました。気分が乗っているので、簡単に説明します。

BrowserSyncをMixで活用するのは簡単です。インストール状態のwebpack.mix.jsでBrowserSyncを実行する場合は、以下のように１関数チェーンするだけです。

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .browserSync();

Homesteadを使用している場合でも、アセットのコンパイルを行うMixは、ホスト側で実行しても、Homestead環境で実行しても通常問題ありません。ただ、npmのバージョン合わせなどで手間がかかることがありますし、MixのドキュメントでHomesteadではnpmもセットアップ済みであると説明されているため、Homestead側で行いたい方もいるでしょう。

BrowserSyncが起動されると、デフォルトのWebブラウザを開き、接続しようとします。しかし、HomesteadのベースOSはUbuntuですが、デスクトップ環境ではありません。サーバー環境です。つまり、ブラウザはインストールされていません。（ヘッドレスを除きます。）

デスクトップ環境のブラウザがありませんから、デフォルトは当然存在しません。そのため、以下のメッセージが表示されます。

Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

手っ取り早い方法は、このメッセージを無視することです。

メッセージがどうしても気になる方は、内容が示している通りに、openオプションをfalseに指定しましょう。

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .browserSync({open: false});

ホスト側のブラウザを自動的に開くことは通常無理です。Homesteadは自分のOSの環境にあるとは言え、独立した別の仮想環境です。簡単に言えば、Webサーバーです。Webサーバーが勝手に自分のコンピュータのWebブラウザを開いてしまったら、恐ろしい事態です。

ですから、自分でホスト側のブラウザから接続します。こちら側からサーバーへ接続します。いつもやっている通りです。

もし、Homesteadのドキュメントに従い、homestead.testをマシン名（ドメイン）として指定しているなら、homestead.testのURLを指定すれば、Webサーバー経由でHomesteadへ接続できるはずです。

BrowserSyncもサーバー動作をしていますが、デフォルトの80ポートではなく、設定したポートで接続します。起動時に多分、次のように表示されるはずです。

[Browsersync] Proxying: http://app.dev
[Browsersync] Access URLs:
 ----------------------------------
       Local: http://localhost:3000
    External: http://10.0.2.15:3000
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://10.0.2.15:3001
 ----------------------------------
[Browsersync] Watching files...

上の段が接続、下の段がUIを使ったBrowserSyncの設定ページです。ですからこの場合、3000ポートで接続すれば良いことがわかります。

ホスト側でブラウザを立ち上げ、homestead.test:8000のURLでアクセスすれば、BrowserSync経由で接続できます。監視対象ファイルが変更されれば、ちゃんとそれが反映されます。