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を返したい場合。ちょっと勝手が違う気はするのでまた別途調べる。