[フロントエンド] 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.jsonのscriptsで定義する方法でも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の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。

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