vercel/og-imageをフォークして自分だけのOGP画像生成サービスを作ろう

動的にOGP画像を生成するのに Vercel が良いらしいという話を何度か聞いた。動的サイトの配信が出来て、画像もキャッシュしてくれるのでとても良い。しかも無料プランまである。

動的OGP生成サービス、作りたい。

vercel/og-image とは

そんなわけであれこれ調べていたら Vercel 公式のリポジトリが出てきた。

• リポジトリ：https://github.com/vercel/og-image
• サイト：https://og-image.vercel.app

なんと Vercel 公式が動的にOGPを生成するサービスを作っていた。
しかも実際に公式ドキュメントやブログに使われているようで、https://vercel.com/docs の og:imageは

<meta property="og:image" content="https://og-image.now.sh/Introduction%20to%20Vercel.png?
theme=light&
md=1&
fontSize=75px&
images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fzeit-black-triangle.svg">

となっている(パラメータごとに改行した)。

さらに README.md を眺めていると

You'll want to fork this repository and deploy your own image generator.
https://github.com/vercel/og-image/blob/main/README.md#deploy-your-own

と書かれているではないか。

そういうわけなので、君も vercel/og-image をフォークして自分だけのOGP画像生成サービスを作ろう！

作り方

前置きはこれくらいにして作り方を紹介します。

詳細はREADME.md の Deploy your own と、CONTRIBUTING.md を読みましょう。以下にざっくりとまとめます。

1. vercel/og-image を フォーク
2. $ npm install -g vercel でvercelコマンドを使用可能に
3. $ vercel login でログイン( https://vercel.com でのアカウント作成が必要)
4. アカウントが無料プランであればvercel.jsonのrewrites意外の設定を削除する
5. $ vercel dev で動作確認
6. 変更を加える
7. $ vercel でデプロイ

注意点としては4.に記載の通り無料プランで使用できない設定を削除する必要があることです。
無料プランで動作確認して、さらに高性能なプランを利用したい場合はプランを変更してから再度設定を戻すと良いでしょう。

また、開発の上での主要なファイルはだいたい以下の通りです。基本的に TypeScript で記述されています。

• /api/index.ts
  • OGP画像を生成するAPI
  • テンプレートは/api/_lib/template.ts
• /web/index.ts
  • メインページのフロントエンド用コード(出力先は/public/dist)
  • CDNから読み込んだ dotdom を使用しています

Windows での不具合？

$ vercel devを使用したところ、ビルドしたpublic/dist/web/index.jsが読み込めずフロントエンドが真っ白になっていました。

いろいろ試したんですがpublic/a/b.txtなどpublicよりも深いところにあるファイルが配信されませんでした。WSL2 で試したところ動作したので、Windows 特有の問題かもしれません。

作ってみたもの

実際にフォークしてデプロイまでやってみました。

• リポジトリ：https://github.com/mkizka/og-image
• サイト：https://ogi-api.vercel.app

変更したのは以下の通り。

• 日本語に対応させた
• ロゴの選択肢を無くした
• 背景画像を追加出来るようにした

こんな感じになります(背景は https://unsplash.com から持ってきたいい感じの画像)↓