ふんばりフロントエンジニアのブログ

新米フロントエンジニアの備忘録です。ふんばり温泉タオル欲しい...

browserSyncのproxyとは?自動リロードが効かないときは試してみよう

今回はちょっとした小ネタです。

browserSyncってありますよね。あのローカルサーバーを簡単に立てられるやつです。

その中でオプションで「proxy」というものがあるのですがその「proxyってなんだ?」というお話です。

proxyと聞いてすぐに思い浮かぶのはプロキシサーバーとかだと思いますが、まさにこのプロキシサーバーを実現するためのオプションのよう。

ざっとプロキシサーバーの概要を説明するとこんな感じです。(大雑把な理解なので間違ってたらすいません...)

f:id:ma1129nm:20200417180822p:plain

まあ中間管理職みたいな感じですよねきっと。どっちかっていうとエージェント...??

ということで、プロキシサーバは上記のように振る舞うことで、二つのシステムを一つのシステムであるかのように動かすことができるという理解に落ち着きました。

では実際にどのような動作になるのか、ということを確認していきます。

まず、今回のプロジェクトはバックエンド・フロントエンド共にLaravelを使用して作成しています。

環境

  • サーバーサイド

Dockerにて、「9000」ポートでLaravelプロジェクトをホスティング

  • フロントエンド

「3000」ポートでbrowserSyncを起動

もちろんリロードすれば9000番ポートの方でも変更は反映されるのですが、自動リロード効かないんすよね...

ということでオプション「proxy」の出番です!

コード

mix.browserSync({
    files: [
        "resources/views/**/*.blade.php",
        "public/**/*.*"
    ],
    proxy: {
        target: "localhost:9000",
    }
});

browserSyncの設定は上記のみ。

filesは監視対象のファイルですね。

さて、proxyオプションを確認すると「 target: "localhost:9000"」と記載されていますね。

このように指定することで現在Laravelプロジェクトがホスティングされている9000番ポートのシステムと同期し、3000番ポートの方でも同じように9000番ポートの内容が反映されることになります。

そして、browserSyncが起動しているのは3000番ポートの方なのでプロジェクトを編集する際は「localhost:3000」を開きながら編集することで自動リロードもできているはずです。

以上、大雑把な小ネタでした...