OGPプロキシをCloudflare Workersで自作してみた

ブログにリンクカードを表示するためにこれまで外部API（microlink.io）を使っていたのですが、外部サービスへの依存を減らしたかったので、Cloudflare Workersで自前のOGPプロキシを作ってみました。

なぜ自作したのか#

外部APIへの依存を減らしたい - microlink.ioは便利ですが、サービスの継続性やレート制限が気になっていました
Cloudflare Workersの無料枠で十分 - 1日10万リクエストまで無料なので、個人ブログには余裕すぎます
KVキャッシュで高速化 - 一度取得したOGP情報は24時間キャッシュするので、同じURLへの再リクエストは爆速です

アーキテクチャ#

シンプルな構成です。

1
ブラウザ → Cloudflare Workers → 対象サイト
2
                ↓
3
           KVキャッシュ（24時間）
4
                ↓
5
           OGP情報をJSON返却

ブラウザからOGPプロキシAPIにリクエスト
KVにキャッシュがあればそれを返却
なければ対象サイトにfetchしてOGPを解析
結果をKVに保存してJSON返却

実装#

Workers + KVの設定#

wrangler.tomlでKV Namespaceをバインドします。

1
name = "ogp-proxy"
2
main = "src/index.ts"
3
compatibility_date = "2024-01-01"
4

5
# KV Namespace binding
6
[[kv_namespaces]]
7
binding = "OGP_CACHE"
8
id = "your-kv-namespace-id"
9

10
[vars]
11
ALLOWED_ORIGINS = "https://your-site.com,http://localhost:4321"
12
CACHE_TTL_SECONDS = "86400"  # 24時間

KV Namespaceはwrangler kv namespace create OGP_CACHEで事前に作成しておきます。

メインのfetchハンドラ#

リクエストを受けてOGP情報を返す部分です。

1
export default {
2
  async fetch(request: Request, env: Env): Promise<Response> {
3
    const url = new URL(request.url);
4

5
    // CORS preflight
6
    if (request.method === "OPTIONS") {
7
      return handleCORS(request, env);
8
    }
9

10
    // /ogp エンドポイントのみ処理
11
    if (url.pathname !== "/ogp") {
12
      return new Response("Not Found", { status: 404 });
13
    }
14

15
    const targetUrl = url.searchParams.get("url");
16
    if (!targetUrl) {
17
      return jsonResponse({ error: "url parameter is required" }, 400, request, env);
18
    }
19

20
    try {
21
      // キャッシュ確認
22
      const cacheKey = `ogp:${targetUrl}`;
23
      const cached = await env.OGP_CACHE.get<CacheEntry>(cacheKey, "json");
24
      const ttl = parseInt(env.CACHE_TTL_SECONDS, 10) || 86400;
25

26
      if (cached && Date.now() - cached.timestamp < ttl * 1000) {
27
        return jsonResponse(cached.data, 200, request, env);
28
      }
29

30
      // OGP情報を取得
31
      const ogpData = await fetchOGP(targetUrl);
32

33
      // キャッシュに保存
34
      await env.OGP_CACHE.put(cacheKey, JSON.stringify({
35
        data: ogpData,
36
        timestamp: Date.now(),
37
      }), { expirationTtl: ttl });
38

39
      return jsonResponse(ogpData, 200, request, env);
40
    } catch (error) {
41
      return jsonResponse({ error: "Failed to fetch OGP data" }, 500, request, env);
42
    }
43
  },
44
};

OGP取得ロジック#

対象サイトにfetchしてHTMLを取得し、正規表現でOGPメタタグを解析します。

1
async function fetchOGP(targetUrl: string): Promise<OGPData> {
2
  const response = await fetch(targetUrl, {
3
    headers: {
4
      "User-Agent": "Mozilla/5.0 (compatible; OGPBot/1.0; +https://p4ni.com)",
5
      Accept: "text/html,application/xhtml+xml",
6
      "Accept-Language": "ja,en;q=0.9",
7
    },
8
    redirect: "follow",
9
  });
10

11
  if (!response.ok) {
12
    throw new Error(`HTTP ${response.status}`);
13
  }
14

15
  const html = await response.text();
16
  return parseOGP(html, targetUrl);
17
}

User-Agentはちゃんとボットだと明示しておくのが礼儀かなと思います。

HTMLパース（正規表現でmetaタグ抽出）#

正規表現でog、og、ogなどを取得します。DOMパーサーを使わずに正規表現でやっているのは、Workersの軽量さを維持するためです。

1
function parseOGP(html: string, targetUrl: string): OGPData {
2
  const url = new URL(targetUrl);
3

4
  const getMetaContent = (patterns: RegExp[]): string => {
5
    for (const pattern of patterns) {
6
      const match = html.match(pattern);
7
      if (match?.[1]) {
8
        return decodeHTMLEntities(match[1].trim());
9
      }
10
    }
11
    return "";
12
  };
13

14
  // title: og:title → twitter:title → <title>タグの順でフォールバック
15
  const title = getMetaContent([
16
    /<meta[^>]+property=["']og:title["'][^>]+content=["']([^"']+)["']/i,
17
    /<meta[^>]+name=["']twitter:title["'][^>]+content=["']([^"']+)["']/i,
18
    /<title[^>]*>([^<]+)<\/title>/i,
19
  ]) || url.hostname;
20

21
  // description, image, favicon, siteName も同様にパース...
22

23
  return { title, description, image, favicon, siteName };
24
}

ogがなければtwitter、それもなければ<title>タグ、最終的にはホスト名をフォールバックにしています。

デプロイ#

デプロイはwrangler deploy一発です。

1
wrangler deploy

カスタムドメインを設定したい場合は、Cloudflareダッシュボードの「Workers & Pages」→ 対象のWorker → 「Settings」→「Triggers」からカスタムドメインを追加できます。私はogp.p4ni.comで運用しています。

Astro側の連携#

Astroのrehypeプラグインで、リンクカードコンポーネントからAPIを呼び出すようにしています。

1
// OGPプロキシAPIのベースURL
2
const OGP_API_BASE = "https://ogp.p4ni.com";
3

4
// コンポーネント内でfetch
5
const apiUrl = `${OGP_API_BASE}/ogp?url=${encodeURIComponent(url)}`;
6
fetch(apiUrl)
7
  .then(response => response.json())
8
  .then(data => {
9
    // title, description, image, favicon, siteNameを表示
10
  });

Markdown側では::linkcard{url="https://example.com"}という記法でリンクカードを埋め込めるようにしています。

まとめ#

外部サービスに依存せず、自前でOGP取得→リンクカード表示ができるようになりました
Cloudflare Workersの無料枠（10万req/日）で十分運用可能
KVキャッシュで同一URLへの再リクエストは高速
正規表現パースなのでエッジケースはあるかもしれませんが、個人ブログ用途では十分です

なぜ自作したのか#

アーキテクチャ#

実装#

Workers + KVの設定#

メインのfetchハンドラ#

OGP取得ロジック#

HTMLパース（正規表現でmetaタグ抽出）#

デプロイ#

Astro側の連携#

まとめ#

参考#

関連記事

【個人開発】VSCodeで作業時間を見える化する拡張機能を作ってみた

【VSCode】ファイルの最終更新をカレンダーで確認できる拡張機能のご紹介

【React】Typographyプロパティのcolor部分で暗黙的に 'any' ってエラーが出た