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

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

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

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

  1. <span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// /pages/api/og.jsx</span>
  3. <span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">ImageResponse</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@vercel/og</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
  5. <span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">config</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">{</span>
  6.   <span style="color:var(--syntax-name-color)">runtime</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">experimental-edge</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  7. <span style="color:var(--syntax-text-color)">};</span>
  9. <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">font</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">fetch</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">URL</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">../../assets/Inter.ttf</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-declaration-color)">import</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">meta</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">url</span><span style="color:var(--syntax-text-color)">)).</span><span style="color:var(--syntax-name-color)">then</span><span style="color:var(--syntax-text-color)">(</span>
  10.   <span style="color:var(--syntax-name-color)">res</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">arrayBuffer</span><span style="color:var(--syntax-text-color)">()</span>
  11. <span style="color:var(--syntax-text-color)">);</span>
  13. <span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">handler</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
  14.   <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">fontData</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">font</span><span style="color:var(--syntax-text-color)">;</span>
  16.   <span style="color:var(--syntax-declaration-color)">try</span> <span style="color:var(--syntax-text-color)">{</span>
  17.     <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">searchParams</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">URL</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">url</span><span style="color:var(--syntax-text-color)">);</span>
  19.     <span style="color:var(--syntax-comment-color)">// ?title=<title></span>
  20.     <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">hasTitle</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">searchParams</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">has</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">title</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
  21.     <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">title</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">hasTitle</span>
  22.       <span style="color:var(--syntax-text-color)">?</span> <span style="color:var(--syntax-name-color)">searchParams</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-declaration-color)">get</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">title</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">)?.</span><span style="color:var(--syntax-name-color)">slice</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">200</span><span style="color:var(--syntax-text-color)">)</span>
  23.       <span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">My default title</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
  25.     <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">ImageResponse</span><span style="color:var(--syntax-text-color)">(</span>
  26.       <span style="color:var(--syntax-text-color)">(</span>
  27.         <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span>
  28.           <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">{</span>
  29.             <span style="color:var(--syntax-name-color)">background</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">white</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  30.             <span style="color:var(--syntax-name-color)">width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">100%</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  31.             <span style="color:var(--syntax-name-color)">height</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">100%</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  32.             <span style="color:var(--syntax-name-color)">display</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">flex</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  33.             <span style="color:var(--syntax-name-color)">textAlign</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">center</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  34.             <span style="color:var(--syntax-name-color)">alignItems</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">center</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  35.             <span style="color:var(--syntax-name-color)">justifyContent</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">center</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  36.             <span style="color:var(--syntax-name-color)">flexDirection</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">column</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  37.             <span style="color:var(--syntax-name-color)">fontFamily</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Inter</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  38.             <span style="color:var(--syntax-name-color)">backgroundImage</span><span style="color:var(--syntax-text-color)">:</span>
  39.               <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  40.             <span style="color:var(--syntax-name-color)">backgroundSize</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">100px 100px</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  41.           <span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">}</span>
  42.         <span style="color:var(--syntax-text-color)">></span>
  43.           <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span>
  44.             <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">{</span>
  45.               <span style="color:var(--syntax-name-color)">width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">80%</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  46.               <span style="color:var(--syntax-name-color)">display</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">flex</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  47.               <span style="color:var(--syntax-name-color)">flexDirection</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">column</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  48.               <span style="color:var(--syntax-name-color)">textAlign</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">center</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  49.               <span style="color:var(--syntax-name-color)">alignItems</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">center</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  50.             <span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">}</span>
  51.           <span style="color:var(--syntax-text-color)">></span>
  52.             <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">p</span> <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">fontSize</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">32</span> <span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>Thomas Ledoux<span style="color:var(--syntax-text-color)">'</span>s blog<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">p</span><span style="color:var(--syntax-text-color)">></span>
  53.             <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">p</span> <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">fontSize</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">64</span> <span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">p</span><span style="color:var(--syntax-text-color)">></span>
  54.           <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
  55.         <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
  56.       <span style="color:var(--syntax-text-color)">),</span>
  57.       <span style="color:var(--syntax-text-color)">{</span>
  58.         <span style="color:var(--syntax-name-color)">width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1200</span><span style="color:var(--syntax-text-color)">,</span>
  59.         <span style="color:var(--syntax-name-color)">height</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">600</span><span style="color:var(--syntax-text-color)">,</span>
  60.         <span style="color:var(--syntax-name-color)">fonts</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">[</span>
  61.           <span style="color:var(--syntax-text-color)">{</span>
  62.             <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Inter</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  63.             <span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">fontData</span><span style="color:var(--syntax-text-color)">,</span>
  64.             <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">normal</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  65.           <span style="color:var(--syntax-text-color)">},</span>
  66.         <span style="color:var(--syntax-text-color)">],</span>
  67.       <span style="color:var(--syntax-text-color)">}</span>
  68.     <span style="color:var(--syntax-text-color)">);</span>
  69.   <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">catch</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
  70.     <span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">);</span>
  71.     <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">Response</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">`Failed to generate the image`</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span>
  72.       <span style="color:var(--syntax-name-color)">status</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">500</span><span style="color:var(--syntax-text-color)">,</span>
  73.     <span style="color:var(--syntax-text-color)">});</span>
  74.   <span style="color:var(--syntax-text-color)">}</span>
  75. <span style="color:var(--syntax-text-color)">}</span>
  76. </code></span></span>

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

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

  1. <span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// /api/og.js</span>
  3. <span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">ImageResponse</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@vercel/og</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
  5. <span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">config</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">{</span>
  6.   <span style="color:var(--syntax-name-color)">runtime</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">experimental-edge</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  7. <span style="color:var(--syntax-text-color)">};</span>
  9. <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">font</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">fetch</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">URL</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">../assets/Inter.ttf</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-declaration-color)">import</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">meta</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">url</span><span style="color:var(--syntax-text-color)">)).</span><span style="color:var(--syntax-name-color)">then</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">res</span> <span style="color:var(--syntax-error-color)">=></span>
  10.   <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">arrayBuffer</span><span style="color:var(--syntax-text-color)">()</span>
  11. <span style="color:var(--syntax-text-color)">);</span>
  13. <span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">handler</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
  14.   <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">fontData</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">font</span><span style="color:var(--syntax-text-color)">;</span>
  16.   <span style="color:var(--syntax-declaration-color)">try</span> <span style="color:var(--syntax-text-color)">{</span>
  17.     <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">searchParams</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">URL</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">url</span><span style="color:var(--syntax-text-color)">);</span>
  19.     <span style="color:var(--syntax-comment-color)">// ?title=<title></span>
  20.     <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">hasTitle</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">searchParams</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">has</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">title</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
  21.     <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">title</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">hasTitle</span>
  22.       <span style="color:var(--syntax-text-color)">?</span> <span style="color:var(--syntax-name-color)">searchParams</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-declaration-color)">get</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">title</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">)?.</span><span style="color:var(--syntax-name-color)">slice</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">200</span><span style="color:var(--syntax-text-color)">)</span>
  23.       <span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">My default title</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
  25.     <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">html</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">{</span>
  26.       <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">div</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  27.       <span style="color:var(--syntax-name-color)">props</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
  28.         <span style="color:var(--syntax-name-color)">children</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">[</span>
  29.           <span style="color:var(--syntax-text-color)">{</span>
  30.             <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">div</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  31.             <span style="color:var(--syntax-name-color)">props</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
  32.               <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
  33.                 <span style="color:var(--syntax-name-color)">width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">80%</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  34.                 <span style="color:var(--syntax-name-color)">display</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">flex</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  35.                 <span style="color:var(--syntax-name-color)">flexDirection</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">column</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  36.                 <span style="color:var(--syntax-name-color)">textAlign</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">center</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  37.                 <span style="color:var(--syntax-name-color)">alignItems</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">center</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  38.               <span style="color:var(--syntax-text-color)">},</span>
  39.               <span style="color:var(--syntax-name-color)">children</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">[</span>
  40.                 <span style="color:var(--syntax-text-color)">{</span>
  41.                   <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">p</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  42.                   <span style="color:var(--syntax-name-color)">props</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
  43.                     <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">fontSize</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">32</span> <span style="color:var(--syntax-text-color)">},</span>
  44.                     <span style="color:var(--syntax-name-color)">children</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Blog by Thomas Ledoux</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  45.                   <span style="color:var(--syntax-text-color)">},</span>
  46.                 <span style="color:var(--syntax-text-color)">},</span>
  47.                 <span style="color:var(--syntax-text-color)">{</span>
  48.                   <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">p</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  49.                   <span style="color:var(--syntax-name-color)">props</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
  50.                     <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">fontSize</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">64</span> <span style="color:var(--syntax-text-color)">},</span>
  51.                     <span style="color:var(--syntax-name-color)">children</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-text-color)">,</span>
  52.                   <span style="color:var(--syntax-text-color)">},</span>
  53.                 <span style="color:var(--syntax-text-color)">},</span>
  54.               <span style="color:var(--syntax-text-color)">],</span>
  55.             <span style="color:var(--syntax-text-color)">},</span>
  56.           <span style="color:var(--syntax-text-color)">},</span>
  57.         <span style="color:var(--syntax-text-color)">],</span>
  58.         <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
  59.           <span style="color:var(--syntax-name-color)">background</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">white</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  60.           <span style="color:var(--syntax-name-color)">width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">100%</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  61.           <span style="color:var(--syntax-name-color)">height</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">100%</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  62.           <span style="color:var(--syntax-name-color)">display</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">flex</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  63.           <span style="color:var(--syntax-name-color)">textAlign</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">center</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  64.           <span style="color:var(--syntax-name-color)">alignItems</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">center</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  65.           <span style="color:var(--syntax-name-color)">justifyContent</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">center</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  66.           <span style="color:var(--syntax-name-color)">flexDirection</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">column</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  67.           <span style="color:var(--syntax-name-color)">fontFamily</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Inter</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  68.           <span style="color:var(--syntax-name-color)">backgroundImage</span><span style="color:var(--syntax-text-color)">:</span>
  69.             <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  70.           <span style="color:var(--syntax-name-color)">backgroundSize</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">100px 100px</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  71.         <span style="color:var(--syntax-text-color)">},</span>
  72.       <span style="color:var(--syntax-text-color)">},</span>
  73.     <span style="color:var(--syntax-text-color)">};</span>
  75.     <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">ImageResponse</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">html</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span>
  76.       <span style="color:var(--syntax-name-color)">width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1200</span><span style="color:var(--syntax-text-color)">,</span>
  77.       <span style="color:var(--syntax-name-color)">height</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">600</span><span style="color:var(--syntax-text-color)">,</span>
  78.       <span style="color:var(--syntax-name-color)">fonts</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">[</span>
  79.         <span style="color:var(--syntax-text-color)">{</span>
  80.           <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Inter</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  81.           <span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">fontData</span><span style="color:var(--syntax-text-color)">,</span>
  82.           <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">normal</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  83.         <span style="color:var(--syntax-text-color)">},</span>
  84.       <span style="color:var(--syntax-text-color)">],</span>
  85.     <span style="color:var(--syntax-text-color)">});</span>
  86.   <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">catch</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
  87.     <span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">);</span>
  88.     <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">Response</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">`Failed to generate the image`</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span>
  89.       <span style="color:var(--syntax-name-color)">status</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">500</span><span style="color:var(--syntax-text-color)">,</span>
  90.     <span style="color:var(--syntax-text-color)">});</span>
  91.   <span style="color:var(--syntax-text-color)">}</span>
  92. <span style="color:var(--syntax-text-color)">}</span>
  93. </code></span></span>

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

  1. <span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">{</span>
  2.   <span style="color:var(--syntax-text-color)">"git"</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
  3.     <span style="color:var(--syntax-text-color)">"deploymentEnabled"</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">false</span>
  4.   <span style="color:var(--syntax-text-color)">}</span>
  5. <span style="color:var(--syntax-text-color)">}</span>
  6. </code></span></span>

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

发表评论

表情：
评论列表 （有 0 条评论，64人围观）

还没有评论，来说两句吧...

相关阅读

    相关 将本地项目、代码添加到github上

    github一个面向开源及私有软件项目的托管平台，是每个程序员必须要掌握的，本文对将本地项目或者代码添加到Github上步骤进行了整理，方便自己查阅，希望对小伙伴有所帮助！

    墨蓝墨蓝/ 0 赞/ 69 阅读