Cloudflare PagesでOGP画像を動的生成する際のWASM制限とその解決策

// src/pages/og/[slug].png.ts

import type { APIRoute, GetStaticPaths } from 'astro';
import satori from 'satori';
import { Resvg, initWasm } from '@resvg/resvg-wasm';
import { getPosts } from '@/lib/notion/client';

// ビルド時に静的生成（SSG）
export const prerender = true;

// WASM初期化フラグ
let wasmInitialized = false;

async function ensureWasmInitialized(): Promise<void> {
  if (wasmInitialized) return;

  const fs = await import('node:fs/promises');
  const path = await import('node:path');
  const wasmPath = path.resolve(
    process.cwd(),
    'node_modules/@resvg/resvg-wasm/index_bg.wasm'
  );
  const wasmBuffer = await fs.readFile(wasmPath);
  await initWasm(wasmBuffer);
  wasmInitialized = true;
}

export const getStaticPaths: GetStaticPaths = async () => {
  const posts = await getPosts();
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { title: post.title },
  }));
};

export const GET: APIRoute = async ({ props }) => {
  const { title } = props as { title: string };

  await ensureWasmInitialized();

  // satoriでSVGを生成
  const svg = await satori(
    // React-likeなJSXオブジェクト
    {
      type: 'div',
      props: {
        style: { /* スタイル */ },
        children: title,
      },
    },
    {
      width: 1200,
      height: 630,
      fonts: [{ name: 'Noto Sans JP', data: fontData }],
    }
  );

  // resvgでPNGに変換
  const resvg = new Resvg(svg, { fitTo: { mode: 'width', value: 1200 } });
  const pngData = resvg.render();
  const pngBuffer = pngData.asPng();

  return new Response(pngBuffer, {
    headers: { 'Content-Type': 'image/png' },
  });
};