npm i fastify dotenv

const isVercel = process.env.VERCEL === '1'
export const createApp = async () => {
  const app = Fastify({})

  return app
}

if (!isVercel) {
  // 如果不是 Vercel 环境，则开启一个常驻服务
  createApp().then(async (app) => {
    await app.listen({ port: 2234 })
    console.info('Server is running on http://localhost:2234')
  })
}

import { resolve } from 'node:path'

import { config } from 'dotenv'

config({
  path: resolve(__dirname, '../../.env'),
})

npm i satori @resvg/resvg-js

import { FastifyInstance } from 'fastify'

export const ogRoute = (app: FastifyInstance) => {
  app.get('/og', async (req, reply) => {})
}

import { ogRoute } from './routes/og'

ogRoute(app)

npm i kose-font

const koseFontPath = require.resolve('kose-font')
const koseFontData = fs.readFileSync(koseFontPath)

fontsData.push({
  name: 'Kose',
  data: koseFontData,
  weight: 400,
  style: 'normal' as 'italic' | 'normal',
})

export default fontsData

import { Resvg } from '@resvg/resvg-js'
import type { ReactElement } from 'react'
import type { SatoriOptions } from 'satori'
import satori from 'satori'

import fonts from './fonts'

export async function renderToImage(
  node: ReactElement,
  options: {
    width?: number
    height: number
    debug?: boolean
    fonts?: SatoriOptions['fonts']
  },
) {
  const svg = await satori(node, {
    ...options,
    fonts: options.fonts || fonts,
  })

  const w = new Resvg(svg)
  const image = w.render().asPng()

  return {
    image,
    contentType: 'image/png',
  }
}

npm i react

import { FastifyInstance } from 'fastify'

import { renderToImage } from '../lib/og/render-to-image'

export const ogRoute = (app: FastifyInstance) => {
  app.get('/og', async (req, reply) => {
    const imageRes = await renderToImage(
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          width: '100%',
          height: '100%',
        }}
      >
        <h1>你好，世界</h1>
      </div>,
      {
        width: 1200,
        height: 600,
      },
    )

    const stream = new Readable({
      read() {
        this.push(imageRes.image)
        this.push(null)
      },
    })

    reply.type(imageRes.contentType).headers({
      // 设置 CDN 缓存以减少计算资源的开销
      'Cache-Control':
        'max-age=3600, s-maxage=3600, stale-while-revalidate=600',
      'Cloudflare-CDN-Cache-Control':
        'max-age=3600, s-maxage=3600, stale-while-revalidate=600',
      'CDN-Cache-Control':
        'max-age=3600, s-maxage=3600, stale-while-revalidate=600',
    })
    return reply.send(stream)
  })
}

async function getImageBase64(image: string | null | undefined) {
  if (!image) {
    return null
  }

  const url = new URL(image)
  return await fetch(image, {
    headers: {
      'User-Agent':
        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36',
      Referer: url.origin,
    },
  }).then(async (res) => {
    const isImage = res.headers.get('content-type')?.startsWith('image/')
    if (isImage) {
      const arrayBuffer = await res.arrayBuffer()

      return `data:${res.headers.get('content-type')};base64,${Buffer.from(
        arrayBuffer,
      ).toString('base64')}`
    }
    return null
  })
}

const image = await getImageBase64('https://innei.in/innei.svg')

const FALLBACK_IMAGE_BASE64 = 'data:image/svg+xml;base64,...'

await renderToImage(
  <div
    style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: '100%',
      flexDirection: 'column',
      gap: '1rem',
      height: '100%',
    }}
  >
    <img
      src={image || FALLBACK_IMAGE_BASE64}
      style={{ width: 256, height: 256 }}
    />
    <h1>Innei</h1>
  </div>,
  {
    width: 1200,
    height: 600,
  },
)

const { createApp } = require('../dist/server/index.js') // 这里使用编译产物，防止 Vercel 编译 ts 文件时的错误

module.exports = async function handler(req: any, res: any) {
  const app = await createApp()
  await app.ready()
  app.server.emit('request', req, res)
}

npm i tsup

import { defineConfig } from 'tsup'

export default defineConfig(() => {
  return {
    entry: ['index.ts'],
    outDir: 'dist/server',
    splitting: false,
    clean: true,
    format: ['cjs'],
    treeshake: true,
  }
})

tsup

pnpm tsup

$ tree -L 2 .vercel
.vercel
├── README.txt
├── output
│   ├── builds.json
│   ├── config.json
│   ├── functions
│   └── static
└── project.json

$ tree -L 3
.
└── api
    └── index.func
        ├── apps
        └── node_modules

import { defineConfig } from 'tsup'

export default defineConfig(() => {
  return {
    entry: ['index.ts'],
    outDir: 'dist/server',
    splitting: false,
    clean: true,
    format: ['cjs'],
    treeshake: true,
    banner: { //  [!code ++]
      js: `try { require.resolve('kose-font') } catch {}`, // [!code ++]
    }, //  [!code ++]
  }
})

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/api"
    }
  ]
}