Cloudflareで実装するSPA+CMS
タグ: Vue, Cloudflare
Cloudflare で実装する SPA + CMS はじめに 個人サイトやポートフォリオに、写真ギャラリーやブログ機能を付けたい。 しかし WordPress のようなサーバーサイド CMS を運用するのは大げさだし、たかだかCMSのためにSaaS製品を使うのも微妙。 そこで Cloudflare のエッジサービスだけで SPA（Single Page Application）とコンテンツ管理を一気に構築した。 (AWS で構築も考えたが、Cloudflare のサービスに対する知見が欲しかったので今回はあえて選ばなかった) 本記事では、筆者が実際に運用しているサイトの構成をもとに、Cloudflare Workers + R2 + KV の組み合わせで SPA 配信からコンテンツ管理 API、動的 OGP 書き換えまでを実現する方法をざっくり解説する。 --- 全体アーキテクチャ 4 つの Cloudflare サービスを利用して構築している。 | サービス | 用途 | |---------|------| | Workers | リクエストルーティング、API 処理、SPA フォールバック、OGP 書き換え | | R2 | SPA ビルド成果物（HTML/JS/CSS）と画像ファイルの静的ホスティング | | KV | 写真メタデータや記事データの JSON ストレージ
技術記事 一覧に戻る / トップへ