2017/08/25更新

[フロントエンド] webpack-dev-serverで、一部のリクエストを別サーバーへ転送する(Proxy利用)

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
今日はWebpackを用いたフロントエンドの開発で、一部のリクエストのみ、別サーバーへプロキシする(リクエストを転送する)方法をブログに書きたいと思います。
画像

目次




やりたいこと

WebpackDevServerを用いると、簡単にローカル環境で開発用のサーバーを起動できます。

それだけでも開発は非常に効率的に行えますが、サーバーサイドとAPI結合した開発をする際には少し考慮が必要です。サーバーサイドとの結合と言っても、いくつかパターンがありますが、ドメインは一緒で、パスによってサーバーに接続するような場合を、今回は考慮したいと思います。

例えば、以下のようなサイトのURLだったとして、
http://local.yoheim.net/
/apiのみ、バックエンドの別のサーバーへリクエストを流したいとします。
# 例えばこんなURLをバックエンドサーバーへ流したい
http://local.yoheim.net/api/users
そして、バックエンド先は以下のURLで待ち受けているとします。
http://localhost:3000/api/users
この場合に、webpack-dev-serverの設定をどうすれば良いのか、説明を書きたいと思います。



webpack-dev-serverの設定方法

具体的には、webpack-dev-serverのproxy機能を用います。webpack.config.jsにて、devServer > proxyに転送設定を記述します。
module.exports = {
    ...省略...

    // webpack-dev-server-の設定
    devServer: {
      host: 'localhost',
      port: 8080,

      // 「/api」を別サーバーへ転送する設定
      proxy: {
        '/api': {
          target: 'http://localhost:3000'
        }
      }
    },

    ...省略...
}
そして、起動は以下のように行います(以下では直接コマンドを使っていますが、package.jsonscriptsで定義する方法でもOKです)。
$ node_modules/.bin/webpack-dev-server 
[HPM] Proxy created: /api  ->  http://localhost:3000
...以下省略...
起動時に、/apiがプロキシされていることがわかります。

Proxy設定は他にも色々と詳細がありますので、詳しくは以下のリンクをご参照ください。
https://webpack.js.org/configuration/dev-server/#devserver-proxy



最後に

webpackには色々な機能があるので、学んで使えるようになると開発がすごく効率的になっていいなーと思います。今後も色々とブログにアウトプットできたらと思いますので、興味ある方はチェックいただけたら幸いです。

最後になりますが本ブログでは、フロントエンド・Python・Node.js・Linux・インフラ・開発環境・Go言語・Swift・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。