Contents
概要
ブラウザの自動リロードを実現してくれるBrowsersyncという便利なプラグインがあり、ローカルIPアドレスでサーバーを立ち上げる事が出来ます。
同じLANネットワークの端末からアクセス出来るので、スマホ・タブレットでの表示確認に便利です。
割り当てられるIPアドレスは自動であるため、ホストOSに複数のIPアドレスが割り当てられている場合、想定したIPアドレスが割り当てられず、同じLAN内の端末からアクセス出来ないケースに遭遇しました。
仮想ソフトを導入し、複数のNICが割り当てられているローカル開発環境も多いと思いますので、そのようなケースで特定のIPアドレスを割り当てる方法をメモしておきます。
同じLAN内の端末からアクセス出来ない例
私の環境の場合、192.168.56.1という、本来デフォルトゲートウェイ（ルータ）に割り当てられるようなIPアドレスでサーバーが立ち上がり、同じLAN内の端末からアクセス出来ない状況でした。
このIPアドレスは何なのか
VirtualBoxを導入してゲストOSを立ち上げた時に、ホストOS（つまりGulpを動かしているPC）に割り当てられるIPアドレスのようです。
なぜこのIPアドレスが割り当てられるのか
Sometimes, depending on your network, your OS will report multiple external IP addresses. If this happens, currently Browsersync just picks the first one and hopes for the best.
You could use a tool like dev-ip to list all possible external URLs on your machine, and then provide the host option in your configuration
公式ドキュメントより Incorrect External URL
「IPアドレスは自動で割り当てられるので、正しくない場合はhostオプションで指定してね」との事です。
割り当てるIPアドレスの確認
割り当てるべきIPアドレスは、「インターネットに繋がっているIPアドレス」です。
上記dev-ipというツールで確認してもよいでしょうし、単にipconfig/ifconfig等で調べてもよいと思います。
BrowsersyncでローカルIPアドレスを指定する
hostにIPアドレスを指定します。
var gulp = require('gulp');
var browsersync = require("browser-sync").create();
// サーバーを立ち上げる
gulp.task('browser-sync', function (done) {
browsersync.init({
server: {
baseDir: './',
},
//ローカルIPアドレスでサーバーを立ち上げる
open: 'external',
//IPアドレスを指定する
host: '192.168.XXX.XXX'
});
done();
});
// ファイル監視
gulp.task('watch', function(done) {
gulp.watch('./**/*.html', gulp.task('browser-reload'));
done();
});
// ブラウザのリロード
gulp.task('browser-reload', function (done){
browsersync.reload();
done();
});
// タスクの実行
gulp.task('default', gulp.series(gulp.parallel('browser-sync', 'watch')));以上で、同じLAN内の端末からアクセス出来るようになります。