【React】フロントを複数のAPIサーバーとつなげたい【Docker】

前置き

Docker利用
Reactコンテナでaxiosを使ったリクエストをExpress(API用バックサーバ)コンテナにオーバーライドさせる必要があったのでまとめました。
APIコンテナ1つの場合と2つ以上の場合に分けてます。

1. APIコンテナ１つの場合

状況

コンテナ	ポート番号	コンテナ名
React	3000	front
Express	3333	back

方法

Reactコンテナのpackage.jsonにproxy項目追加

package.json

#  "http://コンテナ名:ポート番号" を記入
"proxy": "http://back:3333"

これで、例えばback側に/usersというapiのURLを作っていたとすると、
front側で axios.get('/users').....で呼び出せます。

2. APIコンテナ２つ以上の場合

状況

コンテナ	ポート番号	コンテナ名
React	3000	front
Express1	3333	back1
Express2	3838	back2

方法

http-proxy-middlewareの利用

1. React側コンテナでhttp-proxy-middlewareのインストール

# Reactコンテナ
$ npm install --save-dev http-proxy-middleware

２. setupProxy.jsに設定記述

今回の状況の場合は下記のようなコードなりました。

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
       # ここに呼び出したいURL
        '/users/**',
        createProxyMiddleware({
       # /users/と打つとhttp://back1:3333/users/になる
　　　　# "http://コンテナ名:ポート番号" を記入
        target: 'http://back1:3333',
        changeOrigin: true,
        secure: false
        })
    );
    app.use(
        '/cards/**',
        createProxyMiddleware({
        # /cards/と打つとhttp://http://back2:3838/cards/になる
        target: 'http://back2:3838',
        changeOrigin: true,
        secure: false
        })
    );
  }