2020-10-13に更新

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

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, Vue.js, React, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント