react開発時に特定のリクエストを外部サーバへ転送する方法

create-react-app hogehoge
cd hogehoge
npm start

Webpack dev serverが起動しホットリロードで開発ができるようになる。

フロント側の開発ならこれでいいのだが、サーバーサイドの処理や外部APIを利用する場合このままでは都合が悪い。

その場合、特定のパスだけ外部サーバーに飛ばすようにする。
手順は以下の通り

npm install http-proxy-middleware

/src/setupProxy.js
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "https://localhost:8080",
      changeOrigin: true,
    })
  );
};

npm start

これで http//localhost/api/***
のリクエストは http://localhost:8080 へリバースプロキシされる。