TypeScriptなcreate-react-appで複数のプロキシを使いたいな

なんでこれだと動くのかわからないけど動くので

きっかけ

Configuring the Proxy Manually

を参考に、ドメインは一緒だけど異なるポート番号を持つ各APIサーバーに接続したかった

• /api/hoge -> http://localhost:5001
• /api/fuga -> http://localhost:5002

公式どおりjsファイルを設置したけど動かないうえに、ググラビリティが低いのかまったく情報が出てこない

あれこれ試してたら動いてしまったのでメモ

/src/setupProxy.js の作成

公式どおりjsを作成

/src/setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api/hoge',
    createProxyMiddleware({
      target: 'http://localhost:5001',
      changeOrigin: true,
    })
  );
  app.use(
    '/api/fuga',
    createProxyMiddleware({
      target: 'http://localhost:5002',
      changeOrigin: true,
    })
  );
};

/src/setupProxy.ts の作成

中身一緒でtsファイルを作る

TypeScript的エラーが出たところは適当に直す

/src/setupProxy.ts

import { createProxyMiddleware } from 'http-proxy-middleware';
module.exports = function(app: any) {
  app.use(
    '/api/hoge',
    createProxyMiddleware({
      target: 'http://localhost:5001',
      changeOrigin: true,
    })
  );
  app.use(
    '/api/fuga',
    createProxyMiddleware({
      target: 'http://localhost:5002',
      changeOrigin: true,
    })
  );
};

完了

多分これで動くはず

jsファイルとtsファイルのどっちかだけだと動かないのでかなりはまった

後から思ったけどtsファイルのかわりに型定義ファイルを置けばいい話なんだろうか

ちょっと時間がなくて試してないので興味のある方はお試しください