microCMS + Astro｜CMSとローカルの画像を使ったOGPイメージの自動生成方法

import { getBlogs, getBlogDetail } from "../library/microcms";
import { getOgImage } from "../components/OgImage";

// 詳細記事ページの全パスを取得
export async function getStaticPaths() {
  const response = await getBlogs({ fields: ["id"] });
  return response.contents.map((content: any) => ({
    params: {
      blogId: content.id,
    },
  }));
}

export async function GET({ params }: APIContext) {
  if (params.blogId === undefined) {
    // blogIdがない場合は404を返す
    return new Response(null, { status: 404 });
  }

  // 記事の詳細情報を取得
  const blog = await getBlogDetail(blogId as string);

  // OGPイメージを生成
  return new Response(await getOgImage(blog));
}

import fs from "fs";
import satori from "satori";
import sharp from "sharp";

export async function getOgImage(blog: any) {
  // フォントを読み込む
  const fontRegularData = fs.readFileSync(
    "src/styles/fonts/NotoSansJP-Regular.ttf",
  );
  const fontBoldData = fs.readFileSync(
    "src/styles/fonts/NotoSansJP-Bold.ttf",
  );

  // ベースのローカル画像を読み込む
  const baseImage = Uint8Array.from(
    fs.readFileSync("src/assets/ogpImageBase.png"),
  ).buffer;

  // authorImgの画像を読み込む
  const authorImage = await fetch(blog.authorImg.url);
  const authorImageBuffer = await authorImage.arrayBuffer();

  const svg = await satori(
    <div
      style={{
        width: "1200px",
        height: "630px",
        display: "flex",
        position: "relative",
      }}
    >
      <img
        /* @ts-ignore リンターの警告がでる場合はignoreする */
        src={baseImage}
        width={1600}
        height={630}
        style={{
          height: "100%",
          width: "100%",
        }}
      />
      <div
        style={{
          width: "100%",
          height: "100%",
          position: "absolute",
          padding: "30px",
          fontFamily: "Noto Sans JP",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
        }}
      >
        <div
          style={{
            flexGrow: 1,
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
          }}
        >
          <div
            style={{
              display: "flex",
              margin: "18px 30px",
              flexDirection: "column",
            }}
          >
            <div
              style={{
                fontSize: "58px",
                fontWeight: 700,
                lineHeight: "1.1",
              }}
            >
              {blog.title}
            </div>
          </div>
        </div>
        <div
          style={{
            marginLeft: "30px",
            marginBottom: "34px",
            display: "flex",
            alignItems: "center",
          }}
        >
          <img
            /* @ts-ignore リンターの警告がでる場合はignoreする */
            src={authorImageBuffer}
            width={blog.authorImg.width}
            height={blog.authorImg.height}
            alt="author image"
            style={{
              height: "100px",
              width: "100px",
              objectFit: "cover",
              borderRadius: "50%",
            }}
          />
          <div
            style={{
              fontSize: "40px",
              marginLeft: "12px",
            }}
          >
            {blog.authorName}
          </div>
        </div>
      </div>
    </div>,
    {
      width: 1200,
      height: 630,
      fonts: [
        {
          name: "Noto Sans JP",
          data: fontRegularData,
          weight: 400,
          style: "normal",
        },
        {
          name: "Noto Sans JP",
          data: fontBoldData,
          weight: 700,
          style: "normal",
        },
      ],
    },
  );

  // SVGをPNGに変換
  return await sharp(Buffer.from(svg)).png().toBuffer();
}