satoriを使ったAstroのOGP画像生成メモ

TL;DR

• SVG to PNG の変換は shape だとビルドエラーになり、@resvg/resvg-js を使った
  • Vite内部のなんらかのエラーでデバッグも難しくこれ以上の深掘りは諦めた
• satoriに読み込ませるフォントファイルはウェイトごとにそれぞれ分ける
  • Google Fontsのクエリパラメータの wght@400;700 は最初の一つしか機能しなかった

やったこと

• satori, @resvg/resvg-js のインストール
• npx astro add react
  • satoriに食わせるJSXを書くため
  • astro.config.js への変更もやってくれるので astro add を使うのが楽でよい
• [slug].png.ts エンドポイントの作成
  • ブログ記事ごとに対応したPNG画像を返却するためのエンドポイント
• SVGを生成してPNGに変換して返す
  • satori + @resvg/resvg-js
  • @resvg/resvg-js が内部で .node ファイルをロードするところで astro dev コマンドが死んでしまったので、Astroの設定ファイルで vite: { optimizeDeps: { exclude: ['@resvg/resvg-js'] } } を加えてViteの最適化対象から外した

結果

こんな感じの画像をビルド時に生成するようになった。ところで、Twitter Cardは最近は7日間キャッシュされるらしく、しばらくは反映が遅れそうだ。OGPの動作確認はDiscordに貼り付けるのが楽でよい。

参考にしたURL