Vercel上部署node-canvas的中文字型顯示問題

這應該是個冷門的狀況，因為使用了node版本的canvas去跑圖，但Vercel的serverless環境沒有中文字型，所以輸出中文字體會變成框框，如果在本機伺服器處理這件事很簡單，安裝中文字型就好了(真是廢話)，但如果是在Vercel上的話，就得想辦法了。

解決方式

其實要做的目標就是，要如何在Vercel的node中安裝中文字型？從Vercel的官方說明能找到關鍵資訊：
How can I use files in Serverless Functions on Vercel?

// api/hello.js

import { readFileSync } from 'fs';
import path from 'path';

export default function handler(req, res) {
  const file = path.join(process.cwd(), 'files', 'test.json');
  const stringified = readFileSync(file, 'utf8');

  res.setHeader('Content-Type', 'application/json');
  return res.end(stringified);
}

主要透過path來加入檔案，而我後來是用node-canvas的registerFont方法來實作這件事。
大概寫法如下：

import canvas from 'canvas'
import path from 'path';

const canvasObj = canvas.createCanvas(256, 256);
const resolved = path.resolve('./fonts/Font.ttf');
canvasObj.registerFont(resolved, { family: 'Font' });
...
...
...
ctx.font = '30px Font';

這邊要注意path.join有可能在某些狀況讀不到路徑，所以改用了path.resolve。
另外也要注意Vercel部署時有50mb的限制，字型檔案太大有可能會編譯失敗唷。