画像を返すAPIの作成

Azure Static Web Appではstaticなファイルにはmiddlewareが機能しないっぽいので、 画像にも認証をかけたい場合はAPIで画像を返すようにする必要がある。

Static Web Appってそういうものだよなーと思っているので仕方ない気がするし、 そもそも認証が必要なアプリはStatic Web App向きではないような気がしているものの、 パワープレイでなんとかしたいこともある。

ということで、非公開パスにある画像を読み込んで返すAPIを組んでみる。 以下のコードはNext.js(App Router)のもの。

import * as fs from "node:fs/promises";

export async function GET() {
  const closedPath = ...
  const content = await fs.readFile(path, { encoding: "binary" } );
  return new Response(Buffer.from(content, 'binary'), {
    status: 200,
    headers: {
      "Content-Type": "image/png",
    },
  });
}

これで認証チェックを追加すればOK。 いろんな画像フォーマットに対応するには拡張子とかでContent-Typeを切り替えればよさそう。

もう少し気になっているのはSVGを返したい場合。ちょっと勝手が違う気はするのでまた別途調べる。