Supabase Edge Functionsを使用したOGP画像の生成

supabase

ogp

対象

OGP画像の動的生成をしたい
ブログを無料で運用したい
Vercelの@vercel/ogから脱却したい
CloudFlareのCloud WorkerでOGP生成が難しいので、簡単にOGPを生成したい

前提

既にSupabaseアカウントを作成している
既にSupabaseプロジェクトを作成している
SupabaseプロジェクトのReference IDわかる

実装

基本的にはSupabaseの公式ドキュメントに記載されているGenerating OG Imagesを参考に実装しました。

作業フォルダーを作成

mkdir og-image
cd og-image

Supabaseの初期化

Supabase init

Supabase Edge FunctionsをCLIを使って生成

supabase functions new og-image

supabase/functions/og-image/index.tsというファイルが生成されます。

handler.tsxを作成

og-imageディレクトリに移動して、handler.tsxを作成してください。

cd supabase/functions/og-image
touch handler.tsx

コードを貼り付ける

以下のコードは公式のドキュメントに貼られているコードになります。

handler.tsxは以下のようにコードを貼り付けてあげてください。

handler.tsx

import React from 'https://esm.sh/[email protected]'
import { ImageResponse } from 'https://deno.land/x/[email protected]/mod.ts'

export default function handler(req: Request) {
  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 128,
          background: 'lavender',
        }}
      >
        Hello OG Image!
      </div>
    )
  )
}

index.tsには以下のコードを貼り付けてください。

index.ts

import { serve } from 'https://deno.land/[email protected]/http/server.ts'
import handler from './handler.tsx'

console.log('Hello from og-image Function!')

serve(handler)

SupabaseのContainerを起動

supabase start

初回実行だと起動までに数分かかることもあります。

サーバーの起動

supabase functions serve og-image --no-verify-jwt

以下のようなコンソールが表示されれば起動は成功です。
"image"

ブラウザで確認

http://localhost:54321/functions/v1/og-image にアクセスしてみてください。

以下のような画像が生成されたら成功です。
"image"

Supabaseにdeploy

以下のコマンドを実行してSupabaseのダッシュボードでEdge Functionsを確認すると画像のようにog-imageという関数が追加されていると思います。

supabase functions deploy og-image --project-ref [SupabaseのReferenceID] --no-verify-jwt

"image"

最後に

きっかけ

仕事の関係でSupabaseのEdge Funcitonsを読むことがありました。
その時に画像の赤枠ようにOpen Graph Image GenerationのExamplesがあったので実装してみることとしました。