ローカルのR2にある画像を取得するURLがなかったのでHonoでなんとかする

概要

Cloudflare の R2 に置いてある画像を表示するようなWebアプリを作っていて、vite でローカルで動作確認をしながらやっていた。ローカルのR2の画像を表示するためのURLはどうしたらいいんだろう？となった。

本当は別のいいやり方があったらすみません。とりあえず僕は今こうやってますよってやつ。

結論

ローカルのR2から画像を取って送り返す API を ローカルに Hono で立てた
Hono でやったのは、単にプロジェクトに組み込みやすかっただけの話で、何かしらのエンドポイントを作って wrangler なりなんなり、R2にコマンドを実行できるものを使って画像を取得し、返せばよい

やり方

本命のアプリのほうは Remix で作ったのを Cloudflare Pages で動かしているので、プロジェクトに Hono を組み込んで一緒に立ち上がるようにした。

API の本体

server/index.ts

import { Hono } from "hono";

const app = new Hono<{ Bindings: Env }>();

app.get("/local-bucket/:filename", async (c) => {
  const filename = c.req.param("filename");
  const obj = await c.env.MY_BUCKET.get(`${filename}`);
  if (!obj) {
    return c.text("not found", 404);
  }
  return new Response(obj.body, {
    headers: {
      "Content-Type": "image/png",
    },
  });
});

export default app;

環境変数にR2バケットのURLを入れておくスタイルでやっているので、ローカルで使う画像のベースURLとして、上のAPIを設定しておく

.dev.vars

R2_BUCKET_URL="http://localhost:5173/local-bucket"

サーバーが起動するように設定追加

vite.config.ts

import adapter from "@hono/vite-dev-server/cloudflare";
import serverAdapter from "hono-remix-adapter/vite";
...
serverAdapter({
    adapter,
    entry: "./server/index.ts",
}),
...

で無事、ローカルのR2にある画像が取得できた。

おわりに

普通に最初、考えるのがめんどくさくて毎回プレビュー環境にデプロイすればいいやと思ってたんですが、そんな話をしたら友達が強く引き止めてくれて、「なんかプロキシ的なの立てればいいだけだと思うよ」というアイデアをくれました。マジで感謝。