CMS開発進捗：Cloudflare KVでのデータ永続化に挑戦中
どーも、ちょりんだです。
現在、このブログにCMS機能を実装すべく開発を進めています。Astro + Cloudflare Pagesで構築されたこのサイトに、実用的なコンテンツ管理システムを追加し、Cloudflare KVによるデータ永続化を実現しようと挑戦しています。
なぜCMSが必要なのか
このブログはAstroフレームワークとCloudflare Pagesで構築されていますが、当初は静的サイトジェネレーターとしての機能のみでした。新しい記事を追加するたびに、ローカルでファイルを作成し、ビルドしてデプロイする必要がありました。
もっと手軽に記事を管理できるように、ブラウザから直接記事を作成・編集・削除できるCMS機能を実装することにしました。
技術選定
今回のCMS開発では、以下の技術スタックを選択しました。
- フロントエンド: Astro + TailwindCSS（既存技術を活用）
- バックエンド: Cloudflare Pages Functions
- データベース: Cloudflare KV
- 認証: Cookieベースのシンプル認証
現在の進捗状況
できていること
まず、基本的なCMS機能は実装できました。
- ✅ 記事の作成・編集・削除: ブラウザから直接操作可能
- ✅ 下書き/公開の切り替え: 記事の状態管理
- ✅ AIによる記事生成: ChatGPT連携で記事作成をサポート
- ✅ 認証機能: シンプルなログインシステム
- ✅ UIインターフェース: 直感的な管理画面
今の課題
一番の課題が、データの永続化です。
現状、記事データは一時的に保存されていますが、サーバーを再デプロイするとデータが消えてしまいます。これをCloudflare KVを使って永続化したいのですが、ここでつまづいています。
具体的な課題:
- KVにはデータは保存できている
- しかし、プログラムからそのデータをうまく読み込めない
- 結果として、メモリ上の一時保存に頼っている状態
技術的なつまづきと学び
KVの接続問題
最初の大きな壁が、Cloudflare KVとの接続でした。
エラーメッセージ Cannot read properties of undefined (reading 'POSTS') に苦しんだのですが、これはCloudflareのダッシュボードでKV namespaceを作成し、wrangler.tomlで正しく設定することで解決できました。
データ形式の違い
次に、KVに保存するデータ形式と、プログラムで扱うデータ形式の違いに悩みました。
KVは配列形式でデータを保存する必要がありますが、プログラム内ではMap形式で扱いたい。この変換処理が意外と複雑で、まだ完全には解決できていません。
UIの表示問題
CMS画面で「undefined」と表示されたり、日付が「Invalid Date」になったりする問題もありました。
これはKVから取得したデータの構造に合わせて、表示ロジックを調整することで改善できました。
今後の予定
短期的な目標
まずはKV永続化の課題を解決したいです。
- データアクセスロジックの改善
- KVからの正しいデータ読み込み
- 再デプロイ後もデータが保持される状態の実現
中長期的な目標
CMSが安定動作するようになったら、以下の機能も追加したいです。
- 画像アップロード機能
- タグ管理機能
- 記事のプレビュー機能
- 検索機能
まとめ
現在、CMS開発は80%くらい完成しています。
基本的な機能はすべて動作するし、UIも直感的に使える状態です。あとはKV永続化の課題を解決すれば、実用レベルのCMSが完成します。
この開発を通じて、CloudflareのエコシステムやモダンなWeb開発について多くを学ぶことができました。技術的な課題に直面するたびに、ドキュメントを読んだり、試行錯誤を繰り返したりすることで、着実にスキルアップできたと感じています。
KV永続化の課題を乗り越えたら、また進捗を報告したいと思います。
この記事は、進行中のCMS開発プロジェクトの現状を記録したものです。同じような開発に挑戦している方の参考になれば嬉しいです。