Vercel（元ZeitのNow）にてNext.jsのAPI Routesでnode-canvasを使う

Next.jsにはAPI Routesという機能があり、pages/api 配下に通常のページと同じように配置してサーバーサイドの処理を書くことができる。アクセスは /api/パス のような感じ。

export default (req, res) => {
  res.statusCode = 200
  res.setHeader('Content-Type', 'application/json')
  res.end(JSON.stringify({ name: 'John Doe' }))
}

https://nextjs.org/docs/api-routes/introduction

この機能を使ってOGPを実装し、いざVercelにデプロイしてみるとなぜか動かない。ローカルではうまくいったのに。下記のようなエラーが出る。

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

GitHubにも同じ現象についてのissueがあり、解決法を書いている人もいた。

https://github.com/zeit/now/issues/3460#issuecomment-574712112

ちょっと分かりづらいのでもうちょっと詳しく解説。

wget https://github.com/jwerre/node-canvas-lambda/raw/master/node12_canvas_lib64_layer.zip
unzip -j -d canvas_lib64 node12_canvas_lib64_layer.zip

上記はローカルで実行する。そして出来上がったcanvas_lib64フォルダをコミットしてしまう（now-buildコマンドに混ぜてみたがwgetが無いとどやされた）。

ちなみに上記のzipファイルの配置が時々変わるようなので、その場合は該当のリポジトリを確認。

{
  "scripts": {
    "now-build": "cp canvas_lib64/*so.1 node_modules/canvas/build/Release/"
  }
}

上記は自分のpackage.jsonのscriptsの中にこのnow-buildコマンドを追加するという意味。ただ、これだとうまくいかなかったため下記にした。多分コピーだけになってしまってビルドされなくなってしまったのではないかと思う。

cp canvas_lib64/*so.1 node_modules/canvas/build/Release/ && yarn build

これで動いた。

ただし、VercelにてNext.jsのAPI Routesでは、なんと他のファイルを読み込むことが出来ない。フォントも画像も。そのためこのままだとひたすら描画して作るしかない。

対処法は @now/next と @now/node のbuildersを併用するのだが詳しくは後日別の記事にて。

↓後日の別の記事
Vercel（元ZeitのNow）にてNext.jsでnode-canvasを使ってOGP