Netlify Edge Functions で Web ページの OGP データを取得する関数を作る

.
├── netlify
│   └── edge-functions
│       └── get-meta.ts
└─── netlify.toml

import { Context } from "https://edge.netlify.com";
import { DOMParser } from "https://deno.land/x/deno_dom/deno-dom-wasm.ts";

type Meta = Record<string, string>;

function extractOgp(metaElements: HTMLMetaElement[]): Meta {
  return metaElements
    .filter((element: HTMLMetaElement) => element.hasAttribute("property"))
    .reduce<Meta>((prev, element) => {
      const property = element.getAttribute("property")?.trim();
      if (!property) return { ...prev };
      const content = element.getAttribute("content") || "";
      return {
        ...prev,
        [property]: content,
      };
    }, {});
}

// eslint-disable-next-line import/no-anonymous-default-export
export default async (
  request: Request,
  context: Context
): Promise<Response> => {
  const url = new URL(request.url).searchParams.get("url"); // クエリ文字列を受け取る
  if (!url) {
    return context.json({ error: "The query parameter of url is required." });
  }
  const resp = await fetch(url);
  const html = await resp.text();
  const document = new DOMParser().parseFromString(html, "text/html");
  const meta = document?.querySelectorAll("meta");
  if (!meta) {
    return context.json({ error: "Meta element are not found." });
  }
  const ogp = extractOgp([...meta]);
  const response = await context.json(ogp);
  // CORS 対策
  response.headers.set("Access-Control-Allow-Origin", "*");
  response.headers.set("Access-Control-Allow-Methods", "GET");
  return response;
};

[build]
  command = "echo No build for this site, we are living on the edge"
  publish = "."

[[edge_functions]]
  function = "get-meta"
  path = "/get-meta*"

$ npm install netlify-cli -g

$ netlify dev

◈ Netlify Dev ◈
◈ Ignored general context env var: LANG (defined in process)
◈ No app server detected. Using simple static server
◈ Running static server from "netlify-edge-function-ogp"
◈ Setting up local development server

────────────────────────────────────────────────────────────────
  Netlify Build
────────────────────────────────────────────────────────────────

❯ Version
  @netlify/build 27.16.1

❯ Flags
  {}

❯ Current directory
  /Users/chick-p/works/netlify-edge-function-ogp

❯ Config file
  /Users/chick-p/works/netlify-edge-function-ogp/netlify.toml

❯ Context
  dev

────────────────────────────────────────────────────────────────
  1. Run command for local development
────────────────────────────────────────────────────────────────


◈ Static server listening to 3999

(dev.command completed in 8ms)

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   ◈ Server now ready on http://localhost:8888   │
   │                                                 │
   └─────────────────────────────────────────────────┘

◈ Loaded edge function get-metas

# プレビュー環境の場合
$ netlify deploy --build

# プロダクション環境の場合
$ netlify deploy --build --prod

$ netlify deploy --build --prod

Packaging Edge Functions from netlify/edge-functions directory:
 - get-meta

(Edge Functions bundling completed in 2.4s)

────────────────────────────────────────────────────────────────
  Netlify Build Complete
────────────────────────────────────────────────────────────────

(Netlify Build completed in 2.5s)
Deploy path:        /Users/chick-p/works/netlify-edge-function-ogp
Configuration path: /Users/chick-p/works/netlify-edge-function-ogp/netlify.toml
Deploying to main site URL...
✔ Finished hashing 5 files and edge functions
✔ CDN requesting 0 files
✔ Finished uploading 0 assets
✔ Deploy is live!

Logs:              https://app.netlify.com/sites/foo/deploys/63145a19063a093f65a88c86
Unique Deploy URL: https://63145a19063a093f65a88c86--foo.netlify.app
Website URL:       https://foo.netlify.app