How to deploy og-image on Netlify?

[iamrajiv]

Description

I want to deploy https://github.com/vercel/og-image on Netlify. I tried deploying and it deployed successfully but it is not loading anything.

https://og-image.netlify.app

[styfle]

You'll probably need to convert the API from Vercel Functions to Netlify Functions but I haven't tried it

[andhisan]

Seems too late but I finally figured out how to deploy on Netlify.

Codes

netlify.toml

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

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

api/index.ts

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 isHtmlDebug = process.env.OG_HTML_DEBUG === '1';

export const handler: Handler = async (event, ctx) => {
  const isDev = !ctx.clientContext?.custom?.netlify;
  try {
    const parsedReq = parseRequest(event);
    const html = getHtml(parsedReq, isHtmlDebug);
    if (isHtmlDebug) {
      return {
        statusCode: 200,
        headers: {
          'Content-Type': 'text/html',
          'Cache-Control': '',
        },
        body: html,
      };
    }
    const { fileType } = parsedReq;
    const file = await getScreenshot(html, fileType, isDev);
    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) {
    console.error(e);
    return {
      statusCode: 500,
      headers: {
        'Content-Type': 'text/html',
        'Cache-Control': '',
      },
      body: '<h1>Internal Error</h1><p>Sorry, there was a problem</p>',
    };
  }
};

The tricky part is that isDev needs to be tweaked for Netlify lambda because AWS_REGION is also set when run with Netlify CLI on local. I tested with several env variables but even NODE_ENV is not set on Netlify lambda environment.

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);

Not cool but this works anyway

package.json

-    "build": "tsc -p api/tsconfig.json && tsc -p web/tsconfig.json"
+    "build": "tsc -p api/tsconfig.json --noEmit && tsc -p web/tsconfig.json"

api/dist directory is not needed because Netlify natively supports TypeScript. So we do only type-check here.

Note

I still can't figure out how to shorten function URLs.

echo .netlify >> .gitignore

Also, don't forget to ignore .netlify.