bunを使用したAPI proxy（考案レベル）

はじめに

現職でバックエンドで簡易的にコーディングできる環境かつバージョン管理を気にしなくても良い環境が欲しいとのことで、基本的にはHTML/CSS/JavaScriptでやることを考えたのですが、開発サーバーを持たせる必要もあったためせっかくなので最近のパッケージマネージャー「bun」を使用してみました。その際の別dockerコンテナのAPIへリクエストする必要があっためproxyをbun内部で完結させたかったためどのようにやったかをメモレベルで記載しておきます。

やり方

HTTPサーバー部分でproxy

bunのエントリーポイントであるindex.tsで以下の記述を追加

index.ts

const server = Bun.serve({
  port: 3001,
  async fetch(req) {
    const url = new URL(req.url);
    if (url.pathname === "/") return new Response(file("./index.html"));

    // api proxy setting
    // NOTE: /apiはじまりでfetchをした場合に正規のURLへproxyする。
    const PROXY_TARGET_PATH = '/api'
    if(url.pathname.startsWith(PROXY_TARGET_PATH)) {
      const proxyOrigin = '{proxy先のURL}'
      const proxyPathName = url.pathname.replace(PROXY_TARGET_PATH,'')
      const proxyedUrl = proxyOrigin + proxyPathName;
      const fetchData = await fetch(proxyedUrl,{
        method: req.method
      });
      return fetchData;
    }
    // それ以外をエラーページに飛ばす
    return new Response('404');
  },
});

これを記述したことによって以下のようにhtmlファイルからpath/apiへのfetchが以下のようにproxyできるようになりました。

proxy結果

/api/1 → {proxy先のURL}/1

// 厳密には
// http://localhost:3001/api/1 → {proxy先のURL}/1

index.html

<script>
  (
    async () => {
      await fetch("/api/1")
        .then((res) => res.json())
        .then((data)=> console.log(data))
    }
  )();
</script>

最後に

いかがでしょうか？
個人的にもこれが正解なのかは不明です。
結構雑ですが、さらに色々と調べてみたところbunにpluginがありうまく使えばもう少し綺麗に書けそうですね。。