netlify blobを使って保存

functions/src/ogp.js

@@ -3,6 +3,7 @@ import "@sentry/tracing";
 import { ProfilingIntegration } from "@sentry/profiling-node";
 import * as opentype from "opentype.js";
 import sharp from "sharp";
+import { getStore } from "@netlify/blobs";
 
 Sentry.init({
   dsn: "https://[email protected]/4506916048732160",
@@ -28,6 +29,23 @@ exports.handler = async (event, context) => {
   const user = `by ` + (queryStringParameters.user?.toString() || "tubone24");
 
   try {
+    const ogp = getStore("ogp");
+    const ogpArrayBuf = await ogp.get(`${encodeURIComponent(title)}`, {
+      type: "arrayBuffer",
+    });
+
+    if (ogpArrayBuf !== null) {
+      transaction.finish();
+      return {
+        statusCode: 200,
+        headers: {
+          "Content-Type": "image/png",
+        },
+        body: new Buffer(Buffer.from(ogpArrayBuf)).toString("base64"),
+        isBase64Encoded: true,
+      };
+    }
+
     // SVGを生成
     const svg = `
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${1200}" height="${630}">
@@ -90,6 +108,12 @@ exports.handler = async (event, context) => {
       .png()
       .toBuffer();
 
+    const arrayBuf = new Uint8Array(buffer).buffer;
+
+    await ogp.set(`${encodeURIComponent(title)}`, arrayBuf, {
+      createdAt: new Date(),
+    });
+
     transaction.finish();
 
     return {

package.json

@@ -5,6 +5,7 @@
   "author": "tubone <[email protected]>",
   "dependencies": {
     "@loadable/component": "5.15.3",
+    "@netlify/blobs": "7.0.1",
     "@popperjs/core": "2.11.8",
     "@raae/gatsby-remark-oembed": "0.3.3",
     "@sentry/browser": "7.31.1",
@@ -140,8 +141,8 @@
   "devDependencies": {
     "@babel/core": "7.23.7",
     "@babel/eslint-parser": "7.23.3",
-    "@babel/preset-typescript": "7.23.3",
     "@babel/plugin-syntax-typescript": "7.23.3",
+    "@babel/preset-typescript": "7.23.3",
     "@cypress/code-coverage": "3.12.18",
     "@storybook/addon-a11y": "6.5.16",
     "@storybook/addon-actions": "6.5.16",

src/components/SEO/index.spec.tsx

@@ -78,17 +78,13 @@ describe("SEO", () => {
     expect(ogType).toBe("article");
     expect(ogTitle).toBe("testTitle");
     expect(ogDescription).toBe("testDescription");
-    expect(ogImage).toBe(
-      "https://blog.tubone-project24.xyz/.netlify/functions/ogp?title=testTitle"
-    );
+    expect(ogImage).toBe("https://example.com/test.png");
     expect(fbAppId).toBe("280941406476272");
     expect(twitterCard).toBe("summary_large_image");
     expect(twitterCreator).toBe("@meitante1conan");
     expect(twitterTitle).toBe("testTitle");
     expect(twitterDescription).toBe("testDescription");
-    expect(twitterImage).toBe(
-      "https://blog.tubone-project24.xyz/.netlify/functions/ogp?title=testTitle"
-    );
+    expect(twitterImage).toBe("https://example.com/test.png");
   });
   it("should render metadata (not article)", () => {
     render(
@@ -164,16 +160,12 @@ describe("SEO", () => {
     expect(ogType).toBe("website");
     expect(ogTitle).toBe("testTitle");
     expect(ogDescription).toBe("testDescription");
-    expect(ogImage).toBe(
-      "https://blog.tubone-project24.xyz/.netlify/functions/ogp?title=testTitle"
-    );
+    expect(ogImage).toBe("https://example.com/test.png");
     expect(fbAppId).toBe("280941406476272");
     expect(twitterCard).toBe("summary_large_image");
     expect(twitterTitle).toBe("testTitle");
     expect(twitterCreator).toBe("@meitante1conan");
     expect(twitterDescription).toBe("testDescription");
-    expect(twitterImage).toBe(
-      "https://blog.tubone-project24.xyz/.netlify/functions/ogp?title=testTitle"
-    );
+    expect(twitterImage).toBe("https://example.com/test.png");
   });
 });

src/components/SEO/index.tsx

@@ -97,54 +97,48 @@ const SEO = ({
   siteTitleAlt,
   isPost,
   tag,
-}: Props) => {
-  const ogpImageLink = `https://blog.tubone-project24.xyz/.netlify/functions/ogp?title=${encodeURI(
-    title
-  )}`;
-  return (
-    <Helmet>
-      <title>{title}</title>
+}: Props) => (
+  <Helmet>
+    <title>{title}</title>
 
-      {/* General tags */}
-      <meta name="description" content={description} />
-      <meta name="image" content={image} />
+    {/* General tags */}
+    <meta name="description" content={description} />
+    <meta name="image" content={image} />
 
-      {/* Schema.org tags */}
-      <script type="application/ld+json">
-        {JSON.stringify(
-          schemaOrgJSONLD({
-            url,
-            title,
-            siteTitleAlt,
-            isPost,
-            image: ogpImageLink,
-            description,
-            tag,
-          })
-        )}
-      </script>
-
-      {/* OpenGraph tags */}
-      <meta property="og:url" content={url} />
-      {isPost ? (
-        <meta property="og:type" content="article" />
-      ) : (
-        <meta property="og:type" content="website" />
+    {/* Schema.org tags */}
+    <script type="application/ld+json">
+      {JSON.stringify(
+        schemaOrgJSONLD({
+          url,
+          title,
+          siteTitleAlt,
+          isPost,
+          image,
+          description,
+          tag,
+        })
       )}
-      <meta property="og:title" content={title} />
-      <meta property="og:description" content={description} />
-      <meta property="og:image" content={ogpImageLink} />
-      <meta property="og:locale" content="ja_JP" />
-      <meta property="fb:app_id" content="280941406476272" />
+    </script>
 
-      {/* Twitter Card tags */}
-      <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:creator" content="@meitante1conan" />
-      <meta name="twitter:title" content={title} />
-      <meta name="twitter:description" content={description} />
-      <meta name="twitter:image" content={ogpImageLink} />
-    </Helmet>
-  );
-};
+    {/* OpenGraph tags */}
+    <meta property="og:url" content={url} />
+    {isPost ? (
+      <meta property="og:type" content="article" />
+    ) : (
+      <meta property="og:type" content="website" />
+    )}
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:image" content={image} />
+    <meta property="fb:app_id" content="280941406476272" />
+
+    {/* Twitter Card tags */}
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:creator" content="@meitante1conan" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={image} />
+  </Helmet>
+);
 
 export default SEO;