node-canvasをvercelにdeployしたときのerror

2021年07月23日2022年11月07日
Node.jsnode-canvasNext.js

きっかけはNext.jsで動的OGPを生成する機能を実装するところ。
node-canvasを使ってvercelにデプロイしたところ、次のエラーが発生。

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

回避方法 2022/11/07時点

バージョンを2.6.1で固定することで回避することができたが、canvasのissueを読み解いていくと別の回避方法があった。

https://github.com/Automattic/node-canvas/issues/1779#issuecomment-895885846

vercelにビルドした際のパスが違うため、修正してあげるという方法みたい。

next.config.js
module.exports = () => {
  if (
    process.env.LD_LIBRARY_PATH == null ||
    !process.env.LD_LIBRARY_PATH.includes(
      `${process.env.PWD}/node_modules/canvas/build/Release:`,
    )
  ) {
    process.env.LD_LIBRARY_PATH = `${
      process.env.PWD
    }/node_modules/canvas/build/Release:${process.env.LD_LIBRARY_PATH || ''}`
  }
}

過去の回避方法 2021/07/27時点

今のところ、node-canvasのバージョンを固定することで回避できるとのこと。
バージョン固定は脆弱性などの問題が発生するため、上に記載したnext.config.jsを使った回避方法を推奨する。

package.json
{
  "name": "offiter",
  "version": "0.1.0",
  "private": true,
  "scripts":
    {
      "dev": "next dev",
      "build": "next build",
      "start": "next start"
    },
  "dependencies":
    {
      "canvas": "2.6.1"
    },
  "devDependencies": {}
}

自分の場合、npm install --save canvasすると2.8.0がインストールされてました。
ローカルだと問題ないのですが、vercel上だとエラーが発生するのでpackage.jsonだけ修正しておけばよかったです。

根本的な解決方法

2022/11/07時点では、まだ解決されてなさそうです。

https://github.com/Automattic/node-canvas/issues/1779

ローカル環境では動き、vercel環境では動かない環境特有の問題だったため修正されずにクローズとなりそうですね。

まとめ

node-canvasをvercelにデプロイするときにはバージョンを2.6.1に固定する。
next.config.jsで回避できるので、canvasはバージョンせよ！！