最近Cloudflareを触ってみるのが楽しく、色々試しています。例えばこのサイトはCloudflare Pagesでホストし、記事の下にある絵文字スタンプもWorkers KVを使っています。また、最近Honoも熱く、Workersと一緒に使ってみようと思い、Cloudflare WorkersのHTMLRewriter + Honoで記事にあるリンクをカードにして表示できるものを作りました。
参考にしたもの
以下の記事を参考に一通り実装してみます。
HTMLRewriter自体はWorkers上で動くHTMLパーサーで、例えばサイトの古いリンクを新しいものへと動的に書き換えたりすることができるものです。
今回、リンクカードを作るのに必要なリンク先の情報は以下です。
- title
- favicon URL
- meta description
これらの情報を取得するために、本来の用途とは違いますがリンク先のHTMLを解析して該当のタグに対する情報を取得します。
Honoのインストール
Workersアプリケーションを作成するために、Honoというフレームワークを使用します。
上記に書いてある手順の通り以下を行います。
- プロジェクトのルートで
npm create hono@latest linkcard
のコマンドを実行
cd linkcard
でプロジェクトに移動
npm i
で依存関係をインストール
実装する
準備は整ったので、index.ts
ファイルを以下のようにして実装します。
一つずつ見ていきます。
まず、/api/linkCard
というルートを作成し、https://xxxxxxx.workers.dev/api/linkCard
でこのWorkerにアクセスできるようにルーティングを設定します。
特定のリンク先の情報を取得したいので、https://xxxxxxx.workers.dev/api/linkCard?url=https://yyyy.com/zzz
のようなリクエストを受け取るようにします。
urlの値をc.req.queryで取得し、そのURLをもとにURL型のインスタンスを作成します。
ここからHTMLRewriterを使っていきます。
基本的に1つのタグ要素に対して1つのHandlerを作成する必要があり、今回は title,favicon URL,meta description の3つ分作ります。
text
で受け取っているものはタグの中のテキストで、elementはタグ要素自体にアクセスし、属性を取得できたりします。
そして、それぞれのHandlerをタグに結びつけ、リンク先のResponseをtransformします。
ここで最後、await res.text()
しているのは、このHTMLRewriterはストリームベースなので欲しい情報を取得できないままレスポンスを返してしますからです。
今回は、ブログの記事はStatic Generationをしておりビルド時にレンダリングされるのであまり頻繁にアクセスされるものではないという想定で、許容しています。
あとはヘッダーにキャッシュをつけて、レスポンスを返すだけです。
faviconのURLがhttpやhttps,dataから始まる場合はそのまま返し、そうでない場合はoriginをつけて返します。
これで、APIの実装は完成です!
Workersにデプロイする
CLoudflareのアカウントの作成、wranglerでのログインを済ませます(以下を参考)
その後、以下のコマンドを実行すればデプロイ完了です!
これで、コマンドに記載されているURLを通してAPIにアクセスできます。
パフォーマンス
CloudflareのWorkersの詳細画面を見ると、CPU時間の中央値は5.1msなのでfreeプランの10ms以内をクリアしているので、ひとまずは大丈夫そうです
終わりに
かなり簡単にリンクカードの実装ができました!
リンクカードを実装する方法の1候補として参考にしていただけると幸いです🫡