![UXデザイナー 松木順子[ HuwaHuwa ]](https://huwahuwa.org/wp-content/uploads/2016/06/logo.png){kind=logo}
VVVでBrowsersyncを動かしたい。
仮想環境を作ったので、あとは手を動かすだけ！
と思っていたら、gulpのBrowsersyncが動かない。。
いや、動いてはいるのですが（ターミナル上では正常に動いている表示）、ブラウザでの表示がCANNOT的なことでまっしろ。なんてことだ。動かしたい。
htmlは表示される
検証したところ、試しにindex.htmlを突っ込んだら難なく表示されました。
やっぱりBrowsersync自体は正常に動いている。
どうやらBrowsersyncのオプション設定らしい
調べたところ、オプション設定の部分がキモのようです。
いつもserver設定していた部分ですが、serverオプションだと、静的なサイト表示のみで、phpのような動的サイトは表示できないそうです。
なるほど。だからCANNNOT。
|
1 2 3 4 5 6 7 |
gulp.task("serve", (done) => { const browserSyncOption = { server: "./" } browserSync.init(browserSyncOption) done() }) |
proxyオプションを使う
ここで登場するのがserverに変わるproxyオプションです。
こちらであれば、動的なサイトも表示可能です。
https://browsersync.io/docs/options/#option-proxy
|
1 2 3 4 5 6 7 |
gulp.task("serve", (done) => { const browserSyncOption = { proxy: "local.dev" } browserSync.init(browserSyncOption) done() }) |
VVVのlocalhostを設定する
前回の記事で作成したlocalhostのurlをproxyオプションへ設定します。
（前回記事：vagrant virtualBox VVVでwordpressの仮想環境をつくる）
|
1 2 3 4 5 6 7 |
gulp.task("serve", (done) => { const browserSyncOption = { proxy: "local.wordpress.test" } browserSync.init(browserSyncOption) done() }) |
表示を確認してみる
ここまでで設定は完了です！
では、gulpを再起動してブラウザでの表示を確認してみましょう！
いつものlocalhost:3000などで立ち上がり、表示されるはずです。
後記
静的サイトと動的サイトで設定オプションが違うのは目からウロコでした。
公式のマニュアルをチェックする癖をつければ自己解決のスピードが上がりそうです。
