画像ワークフロー実践【2025年版】：アップロード署名・Moderation・CDN署名URLまで

全体像

1. サーバーでアップロード用「短命署名」を発行 → 2) クライアントが直送 → 3) Moderation（自動/人手） → 4) 公開は変換プリセット＋署名URL。

アップロード署名の発行

// app/api/upload/sign/route.ts
import crypto from 'crypto';
export async function POST() {
  const expire = Math.floor(Date.now()/1000) + 60; // 60秒
  const policy = JSON.stringify({ exp: expire, maxBytes: 5_000_000 });
  const signature = crypto.createHmac('sha256', process.env.UPLOAD_SECRET!).update(policy).digest('hex');
  return Response.json({ policy, signature });
}

クライアントから直送

// app/uploader.tsx（概念）
export default function Uploader() {
  async function onChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    const { policy, signature } = await fetch('/api/upload/sign', { method: 'POST' }).then(r=>r.json());
    const form = new FormData();
    form.append('file', file!);
    form.append('policy', policy);
    form.append('signature', signature);
    await fetch('https://upload.example.com', { method: 'POST', body: form });
  }
  return <input type="file" accept="image/*" onChange={onChange} />
}

Moderationと公開

• 自動Moderation結果で保留/承認/差し戻し。承認時に変換プリセットを確定（例：w=1280,h=720,fit=crop,f=auto,q=auto）。
• 公開URLは署名付きで期限を設定し、ホットリンク対策を実施。

// 署名URL生成（擬似）
function signedUrl(path: string, ttl = 600) {
  const exp = Math.floor(Date.now()/1000) + ttl;
  const sig = createHmac('sha256', process.env.DELIVERY_SECRET!).update(`${path}${exp}`).digest('hex');
  return `https://cdn.example.com${path}?exp=${exp}&sig=${sig}`;
}

コスト/監視

• 変換回数と帯域のダッシュボード化。プリセットを絞り、多様なサイズはsrcset/sizesで吸収。
• エラー率、アップロード失敗率、Moderation差し戻し率を監視して改善。

まとめ

署名→直送→審査→署名配信の流れを確立すると、安全でスケーラブルな画像運用が実現します。