ReactでAPIリクエストをプロキシする / Proxy API request with React

TLDR

Reactアプリの開発中、Nginxなどを利用せずにAPIにプロキシする場合、package.jsonにproxyプロパティを追加することで解決できる。

モチベーション

docker-composeを利用して複数のコンテナ間を上手く連携したかった。
無策で以下のようなコードを書いた場合上手く動作しないです。

componentDidMount() {
  fetch("/api/animals")
    .then(res => res.json)
    .then(json => setState({json}))
}

これは、リクエストの投げ先がReactアプリをホストしているドメインになってしまうためです。
本番環境ではNginxやApacheなどを利用して、リソースパス毎に振り分けをすれば良いのですが開発環境でそこまで用意するのは少し煩雑です。

解決策

Reactでは、リクエストの返り値が静的な資産でない場合、事前に設定したプロキシ先にプロキシする機能があります。
こちらを利用することで、任意の指定先にプロキシすることが可能です。
指定の方法は package.json に proxy プロパティを追加するだけです。

{
  ...
  "proxy": "http://localhost/9000",
  ...
}

proxy にはlocalホストだけでなく、docker-composeの links で指定した名前を指定することができます。( eg. http://express-api-server )
公式のドキュメントは下記となりますので、詳細が気になる方はこちらをご覧ください。

Proxying API Requests in Development · Create React App

まとめ

マイクロサービスの流行もあって、細かくアプリケーションを分割する機会は今後増えていくと思います。
その時、今回のようなプロキシ設定を知っておくと開発環境の構築がぐっと容易になるのかなと考えています。
最後に自分が作成したサンプルプロジェクトのリンクを共有して結びとさせていただきます。

dorayakikun/micro-web-services-template