📸

vercel/og-imageをNetlify Functionsで動かせるように改造する

2022/02/10に公開

Netlify

Lambda

Puppeteer

tech

vercel/og-imageについて

https://github.com/vercel/og-image

Vercelが公開しているOG画像生成用のServerless Functionの例。

当然Vercelにデプロイする前提で作られているので、そのままではNetlifyにデプロイできません。

なんでNetlify Functionsにするかと言うと、Hobbyプランだと組織のリポジトリを使うことができず不便だからです。

メインコントリビューターのSteven氏が「Netlify Functionsに書き換える必要あるけど、試してないわ」と言ってそのままCloseされているissue。

ということで試してみましょう。

リファクタリング

netlify.tomlを用意

[build]
  command = "yarn build"
  publish = "public"

[functions]
  directory = "api"
  external_node_modules = ["chrome-aws-lambda"]

chrome-aws-lambdaを外部モジュールとして指定する必要があります。

また、Netlify FunctionsはTypeScriptをサポートしているため、api/distを指定する必要はありません。

esbuild: method that leverages esbuild to bundle functions, resulting in shorter bundling times and smaller artifacts. Currently available as an opt-in beta for JavaScript functions. TypeScript functions always use esbuild.

デプロイが割と速いなと思ったら、esbuildが使われているそうです。

ローカルでデバッグできるように

npm i -g netlify-cli
netlify login

Netlify CLIを使います。

package.json

  "scripts": {
-    "build": "tsc -p api/tsconfig.json && tsc -p web/tsconfig.json"
+    "build": "tsc -p api/tsconfig.json --noEmit && tsc -p web/tsconfig.json",
+    "dev": "yarn build && netlify dev --port 3003",
+    "dev:html": "OG_HTML_DEBUG=1 yarn dev"
  },

API部分のビルドは--noEmitで型チェックだけにします。 先述した通り向こうがesbuildを使ってくれるからです。

echo .netlify >> .gitignore

.netlify/functions-serve/indexができるため除外します。

追加パッケージを用意してindex.tsを書き換え

yarn add -D @netlify/functions

api/index.ts

-import { IncomingMessage, ServerResponse } from 'http';
import { parseRequest } from './_lib/parser';
import { getScreenshot } from './_lib/chromium';
import { getHtml } from './_lib/template';
+import { Handler } from '@netlify/functions';
+import { Buffer } from 'buffer';

-const isDev = !process.env.AWS_REGION;
const isHtmlDebug = process.env.OG_HTML_DEBUG === '1';

-export default async function handler(req: IncomingMessage, res: ServerResponse) {
+export const handler: Handler = async (event, ctx) => {
+  const isDev = !ctx.clientContext?.custom?.netlify;
  try {
-    const parsedReq = parseRequest(req);
+    const parsedReq = parseRequest(event);
    const html = getHtml(parsedReq, isHtmlDebug);
    if (isHtmlDebug) {
-      res.setHeader('Content-Type', 'text/html');
-      res.end(html);
-      return;
+      return {
+        statusCode: 200,
+        headers: {
+          'Content-Type': 'text/html',
+          'Cache-Control': '',
+        },
+        body: html,
+      };
    }
    const { fileType } = parsedReq;
    const file = await getScreenshot(html, fileType, isDev);
-    res.statusCode = 200;
-    res.setHeader('Content-Type', `image/${fileType}`);
-    res.setHeader('Cache-Control', `public, immutable, no-transform, s-maxage=31536000, max-age=31536000`);
-    res.end(file);
+    return {
+      statusCode: 200,
+      headers: {
+        'Content-Type': `image/${fileType}`,
+        'Cache-Control': `public, immutable, no-transform, s-maxage=31536000, max-age=31536000`,
+      },
+      body: Buffer.from(file).toString('base64'),
+      isBase64Encoded: true,
+    };
  } catch (e) {
-    res.statusCode = 500;
-    res.setHeader('Content-Type', 'text/html');
-    res.end('<h1>Internal Error</h1><p>Sorry, there was a problem</p>');
+    return {
+      statusCode: 500,
+      headers: {
+        'Content-Type': 'text/html',
+        'Cache-Control': '',
+      },
+      body: '<h1>Internal Error</h1><p>Sorry, there was a problem</p>',
+    };
    console.error(e);
  }
};

AWS_REGIONでプロダクション判定していましたが、Netlify CLIがLambdaをエミュレートする際にAWS CLIのリージョン設定を拾うらしく、私はap-northeast-1が勝手に入ってしまいました。

Netlify側が設定する環境変数はこちらで解説されているんですが、LambdaではNODE_ENVすら定義されていないらしく、ctx.clientContext?.custom?.netlifyを使うことでやっとこさ本番の判定ができました。

パーサー部分の書き換え

api/_lib/parser.ts

-import { IncomingMessage } from 'http';
+import { Event } from '@netlify/functions/dist/function/event';
import { parse } from 'url';
import { ParsedRequest, Theme } from './types';

-export function parseRequest(req: IncomingMessage) {
+export function parseRequest(req: Event) {
    console.log('HTTP ' + req.url);
-   const { pathname, query } = parse(req.url || '/', true);
+   const { pathname, query } = parse(req.path.replace('/.netlify/functions/index', '') || '/', true);

/.netlify/functions/index/が付いてしまったので応急処置。あと、NetlifyのHandlerに合わせた型定義に変えています。

web部分の書き換え

web/index.ts

-url.pathname = `${encodeURIComponent(text)}.${fileType}`;
+url.pathname = `/.netlify/functions/index/${encodeURIComponent(text)}.${fileType}`;

これも応急処置。Web部分は実使用だと使わないかも。私はまるごと消しています。

動作確認

3:33:12 AM: ────────────────────────────────────────────────────────────────
3:33:12 AM:   1. build.command from netlify.toml                            
3:33:12 AM: ────────────────────────────────────────────────────────────────
3:33:12 AM: 
3:33:12 AM: $ yarn build
3:33:12 AM: yarn run v1.22.10
3:33:12 AM: $ tsc -p api/tsconfig.json --noEmit
3:33:18 AM: Done in 6.16s.
3:33:18 AM: 
3:33:18 AM: (build.command completed in 6.4s)
3:33:18 AM: 
3:33:18 AM: ────────────────────────────────────────────────────────────────
3:33:18 AM:   2. Functions bundling                                         
3:33:18 AM: ────────────────────────────────────────────────────────────────
3:33:18 AM: 
3:33:18 AM: Packaging Functions from api directory:
3:33:18 AM:  - index.ts
3:33:18 AM: 
3:33:24 AM: 
3:33:24 AM: (Functions bundling completed in 5.8s)
3:33:24 AM: 
3:33:24 AM: ────────────────────────────────────────────────────────────────
3:33:24 AM:   3. Deploy site                                                
3:33:24 AM: ────────────────────────────────────────────────────────────────
3:33:24 AM: 
3:33:24 AM: Starting to deploy site from 'og-image/public'
3:33:24 AM: Creating deploy tree 
3:33:24 AM: Creating deploy upload records
3:33:24 AM: 0 new files to upload
3:33:24 AM: 1 new functions to upload
3:33:40 AM: Site deploy was successfully initiated
3:33:40 AM: 
3:33:40 AM: (Deploy site completed in 16.3s)
3:33:40 AM:

Webを消した場合のログはこんな感じになります。