使用 Edge 函数将 Vercel og:image 生成添加到 Astro 项目

傷城~ 2024-03-16 21:01 90阅读 0赞

在[之前的博客文章][Link 1]中，我提到我正在使用 Next.js 项目来运行`@vercel/og`为我的博客文章生成 og:images 的逻辑。  
现在不再需要它了，我想出了如何在我的 Astro 博客项目（本网站 ;-) 中运行它）。

为此需要进行一些更改。  
我的 Next.js 项目中的原始代码如下所示：

<code>// /pages/api/og.jsx
 
 import { ImageResponse } from '@vercel/og';
 
 export const config = {
 runtime: 'experimental-edge',
 };
 
 const font = fetch(new URL('../../assets/Inter.ttf', import.meta.url)).then(
 res => res.arrayBuffer()
 );
 
 export default async function handler(req) {
 const fontData = await font;
 
 try {
 const { searchParams } = new URL(req.url);
 
 // ?title=<title>
 const hasTitle = searchParams.has('title');
 const title = hasTitle
 ? searchParams.get('title')?.slice(0, 200)
 : 'My default title';
 
 return new ImageResponse(
 (
 <div
 style={{
 background: 'white',
 width: '100%',
 height: '100%',
 display: 'flex',
 textAlign: 'center',
 alignItems: 'center',
 justifyContent: 'center',
 flexDirection: 'column',
 fontFamily: 'Inter',
 backgroundImage:
 'radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)',
 backgroundSize: '100px 100px',
 }}
 >
 <div
 style={{
 width: '80%',
 display: 'flex',
 flexDirection: 'column',
 textAlign: 'center',
 alignItems: 'center',
 }}
 >
 <p style={{ fontSize: 32 }}>Thomas Ledoux's blog</p>
 <p style={{ fontSize: 64 }}>{title}</p>
 </div>
 </div>
 ),
 {
 width: 1200,
 height: 600,
 fonts: [
 {
 name: 'Inter',
 data: fontData,
 style: 'normal',
 },
 ],
 }
 );
 } catch (e) {
 console.log(`${e.message}`);
 return new Response(`Failed to generate the image`, {
 status: 500,
 });
 }
 }
 </code>

如您所见，JSX 代码用于构建我的 og:image 的输出。  
在无服务器/边缘 API 函数中使用 JSX 代码仅适用于`/api`部署到 Vercel 的 Next.js 项目中的文件夹。  
在部署到 Vercel 的其他框架（如 Astro）上，这是[不可能的][Link 1]。  
尝试此操作时，我收到如下错误消息：`vc-file-system:api/og.js:25:8: ERROR: The JSX syntax extension is not currently enabled`。

所以我必须找到一种在 API 函数中使用 JSX 的方法。  
幸运的是，该`ImageResponse`函数还允许使用[“React-elements-like”对象。][Link 1]  
使用上面链接中提供的示例，我在我的 Astro 项目中创建了以下 Edge API 路由：

<code>// /api/og.js
 
 import { ImageResponse } from '@vercel/og';
 
 export const config = {
 runtime: 'experimental-edge',
 };
 
 const font = fetch(new URL('../assets/Inter.ttf', import.meta.url)).then(res =>
 res.arrayBuffer()
 );
 
 export default async function handler(req) {
 const fontData = await font;
 
 try {
 const { searchParams } = new URL(req.url);
 
 // ?title=<title>
 const hasTitle = searchParams.has('title');
 const title = hasTitle
 ? searchParams.get('title')?.slice(0, 200)
 : 'My default title';
 
 const html = {
 type: 'div',
 props: {
 children: [
 {
 type: 'div',
 props: {
 style: {
 width: '80%',
 display: 'flex',
 flexDirection: 'column',
 textAlign: 'center',
 alignItems: 'center',
 },
 children: [
 {
 type: 'p',
 props: {
 style: { fontSize: 32 },
 children: 'Blog by Thomas Ledoux',
 },
 },
 {
 type: 'p',
 props: {
 style: { fontSize: 64 },
 children: title,
 },
 },
 ],
 },
 },
 ],
 style: {
 background: 'white',
 width: '100%',
 height: '100%',
 display: 'flex',
 textAlign: 'center',
 alignItems: 'center',
 justifyContent: 'center',
 flexDirection: 'column',
 fontFamily: 'Inter',
 backgroundImage:
 'radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)',
 backgroundSize: '100px 100px',
 },
 },
 };
 
 return new ImageResponse(html, {
 width: 1200,
 height: 600,
 fonts: [
 {
 name: 'Inter',
 data: fontData,
 style: 'normal',
 },
 ],
 });
 } catch (e) {
 console.log(`${e.message}`);
 return new Response(`Failed to generate the image`, {
 status: 500,
 });
 }
 }
 </code>

现在，我希望 Vercel 获取 API 路由。  
默认情况下，Astro build 命令不会在根目录中获取这些 API 路由（因为它们是（vercel build 命令）[zhifj.com][Link 1] 的一部分).  
因此，为了在我的用例中实现这一点，我转而使用 (Vercel CLI)\[ [Vercel CLI Overview | CLI Commands | Vercel Docs][Vercel CLI Overview _ CLI Commands _ Vercel Docs] \] 来构建和部署我的项目。  
使用 全局安装 cli 后`npm i -g vercel`，我可以运行`vercel build`以在本地构建我的项目，然后运行`vercel deploy --prebuilt`以将本地创建的构建直接部署到 Vercel。  
我还选择在推送到我的 git 存储库时禁用自动部署，因为我现在正在通过 CLI 进行部署。  
`vercel.json`通过在根目录中 添加一个文件来禁用自动部署，其中包含以下内容：

<code>{
 "git": {
 "deploymentEnabled": false
 }
 }
 </code>

希望这可以帮助其他想要在他们的 Astro 项目中使用无服务器/边缘 API 功能的人。[可以在此处][Vercel CLI Overview _ CLI Commands _ Vercel Docs]  
找到源代码。

[Link 1]: https://zhifj.com
[Vercel CLI Overview _ CLI Commands _ Vercel Docs]: http://telegeram1.com