Zenn
🎨

node-canvasでのOGP動的生成でハマったポイント

2023/01/18に公開
Vercel
nodecanvas
tech

React.jsの勉強の一環としてemoji slotというものを作りました。

機能の一つとして、twitterでつぶやいた際にOGP画像を動的に生成しています。

仕組みとしては、パラメータに絵文字を入れるとOGP画像を生成するAPIが叩かれ、バイナリファイルが返ってきます。

以下の記事の案6として挙げられている方法で実装しています。（とても参考になりました）

絶対にお金を払いたくない精神での動的OGP生成は辛い

Next.jsのAPI Routesを利用して実装したのですが、Vercelにデプロイした際にいくつかのエラーに悩まされたので、その備忘録です。

node-canvasをVercelにデプロイした際のエラー

前提

node-canvasで画像生成するAPIをVercelで動作させることを想定しています。

絵文字(twemoji)をnode-canvasで使用するために、node-canvas-with-twemojiというライブラリを使用しています。

実際のコードはGithubを参照ください。

1. libuuid.so.1 ライブラリエラー

デプロイ時に以下のようなエラーが出た場合

Error: libuuid.so.1: cannot open shared object file: No such file or directory


こちらは既に解決している記事がいくつかあり、デプロイ時にライブラリをinstallすることで解決できました。

package.jsonのscriptsにnow-buildを追加すると、デプロイ時に実行してくれるようです。

"scripts": {
  // 以下を追加
  "now-build": "yum install libuuid-devel libmount-devel zlib-devel && cp /lib64/{libuuid,libmount,libblkid,libz}.so.1 node_modules/canvas/build/Release/ && yarn build"
}


参考

Vercel Now（旧ZEIT Now）上でnode-canvasを動かす

2. ZLIB_1.2.9 not found エラー

次に以下のようなエラーが出ました。

Error: /lib64/libz.so.1: version `ZLIB_1.2.9` not found (required by /opt/nodejs/node_modules/canvas/build/Release/libpng16.so.16)


こちらはnode-canvas@2.6.1に固定することで回避することができます。

現時点ではnode-canvas-with-twemojiを入れるとnode-canvas@2.8.0がinstallされるので、バージョン指定するように変更します。

"resolutions": {
  "node-canvas-with-twemoji/canvas": "2.6.1"
}


参考

Error: /lib64/libz.so.1: version `ZLIB_1.2.9' not found (required by /opt/nodejs/node_modules/canvas/build/Release/libpng16.so.16) #1779

Discussion