こんにちは、ピクシブでエンジニアをしているnamazuです。
ピクシブ株式会社ではpixivを始めとする複数のサービスにおいてDDoS防御やBotへの対処としてCloudflare CDNを利用しています。 この度Cloudflareの提供するCloudflare Workersをマンガ家デビューを目指すクリエイターと出版社の編集者が繋がるサービス pixivコミックインディーズ にて利用しました。
本inside記事ではコミックインディーズの開発チームが取り組んだCloudflare Workersの活用事例についてご紹介します。
課題
pixivコミックインディーズはReact (+ vite)を用いて作られたウェブアプリケーションです。
CSR(ClientSideRendering)のSPAであり、コンテンツ配信用のNginxサーバーからindex.htmlを静的コンテンツとして配信し、読み込まれるJSによってAPIコール等を行いコンテンツを描画しています。 これによりもしNext.jsなどでSSRをしていたら必要になるであろうウェブアプリケーションサーバが不要になっており、保守・運用が容易です。
しかしこの構造はJSを実行できるクローラにしか個別のOGPを提供できない問題があります。この問題自体は開発初期から把握していましたが、サービスのほぼすべてのページがログイン必須であり、ページ個別のOGPの提供等は基本的に必要なかったため、実際の問題は少ないとして進行していました。 しかしサービスの運用を行うにつれ未ログインでも閲覧可能なお知らせやコラム記事をHeadlessCMSとしてContentfulを利用しつつ提供するようになり、Facebook等のSNSで各記事毎に個別のOGP画像を表示したいといった要求が出てきました。
Facebook等のOGPクローラはJSを実行しないため、クローラに配信するHTMLにおいてOGPメタタグを含める必要があります。
Cloudflare Workersの利用
クローラに配信するHTMLに各URLに応じた個別のOGPメタタグを含める方法はいくつか存在します。
例えば
- Next.jsを用いてSSRを行う
- OGPメタタグを描画したい記事ページをSSGする
- PHP等でテンプレートからHTMLを組み立てて返す
- Nginxで色々と努力してHTMLを加工しメタタグを埋め込む
- Rendertron などを用いて、クローラのリクエストに対して事前にJSを実行した結果を返す
などです。
実現には様々な方法が考えられますが、今回はCloudflare WorkersのHTML Rewriterを用いて実現することにしました。以下のような形で実現します。
HTML RewriterはCloudflare Workersの処理の中でHTMLを簡易に書き換えることができ、今回のような要件においてOGPメタタグを都度Workerの処理内で書き換えることができます。 OGPメタタグの内容はContentfulより取得し、Contentfulから取得した内容はレスポンスタイム短縮のためにWorkers KVにキャッシュしています。
これにより特定パス（今回であればお知らせやコラム記事についてのURL）に対して個別のOGPメタタグが含まれたHTMLを返すことができました。
などのページにおいて実際にOGPを表示することができています。
利用してよかった点
今回Workersを実際に利用してみて以下のような点が魅力的でした。
動的なサーバサイド処理を行いつつ、保守するサーバが増えなかった
ピクシブではオンプレミスを活用しており、コミックインディーズも静的ファイルを配るだけだったのでオンプレミスのNginxから配信していたのですが、今回のような要件をオンプレミス内で実現するには、PHPにせよNodeにせよレンダリング用のサーバを用意する必要がありました。これらは運用にコストが掛かります。 Workersはサーバレスなため、このあたりの問題を抱えないことができたのは良い点でした。
レイテンシへの影響が小さく抑えられた
サーバレスに処理を行うため、様々なクラウドベンダの製品を使うことが考えられます。この場合オンプレミスにオリジンがある場合だと必ず経路が複雑化します。 しかしCloudflareCDNはすでにユーザーからのリクエスト経路に含まれているため、経路が長くなることがなく、レイテンシへの影響懸念を払拭することができます。 またWorkersKVにレンダリングに必要な情報をキャッシュすることが可能なため、キャッシュがある際はエッジのみで処理が可能であり、高速に置換処理を行えます。 レイテンシへの影響については今回重要視しているものではありませんでしたが、無駄が少ないのは良いことでした。
必要十分な機能をシンプルに実現できた
今回WorkersのHTML Rewriterを用いてコード量としても小さく、OGPタグを動的に書き換えるという要求に即した実装ができました。バックエンドでサーバを運用しテンプレートエンジンでHTMLを描画するようにリアーキテクチャするというのはOGPタグだけに関して言えば複雑なので避けたい選択肢でした。Workersを用いてリクエスト経路に汎用的なHTML書き換えを挟めるというのは魅力的でした。 統一性がなかったり、同種の課題に対して今後別のWorkerを増やさなければいけなくなる懸念はありますが、一旦今回の課題に関してはベストな対応だったのではないかなと思います。
おわりに
今回pixivコミックインディーズでのCloudflare Workersの活用事例についてご紹介させていただきました。Cloudflare CDNを多くのサービスで利用しているピクシブにとって、CDNエッジにてコンピューティングが行えるCloudflare Workersは選択肢を広げるサービスです。 今後必要に応じて利用し、よりよいサービスを開発していければと考えています。
ピクシブ株式会社ではCloudflare Workersを活用してみたいエンジニアを始め、「創作活動がもっと楽しくなる場所を創る」という理念を実現したいエンジニアを募集しています。
https://recruit.jobcan.jp/pixivrecruit.jobcan.jp
