fragmentary notesITエンジニアの気まぐれメモ

【備忘】Cloudflare Workers + KV にてコメントフォーム刷新

2025/05/062025/05/06
Jamstack
Cloudflare
一人語り
ブログ運営

はじめに、これまでのコメントフォーム

このブログ、静的なJamstackな構成で構築しているため、コメントフォームのような動的な部分はそのままでは実現できず、外だしして何か別のソリューションを用意する必要があります。

閲覧数が限られ、利用される機会も少ないコメントフォーム故にお金をかけず手軽に、ということでこれまでは、Google FormとGoogle Apps Scriptを組み合わせて実現していましたが。。。結構煩雑な仕組み故に色々と気になる 点もあり。代表的なものは下記の通り。

  1. Google Formを標準のFormページを使用せずAPI的に使用するため、それを実現する煩雑な呼び出し処理を、ブログコンポーネント上に直書きしている（ブログ本体とコメントフォームが蜜結合に）
  2. クライアント（WEBブラウザ）からGoogle FormをAPI的に叩いているが、その際 裏でCORSエラーが出ている
  3. コメントを投稿するAPI（Google Form）とコメントを取得するAPI（Google Apps Scriptにて構築）が全くの別物でエンドポイントや呼び出しのお作法も異なり、管理が煩雑
  4. コメントがPOSTされたことを知る術がない、push型で通知したい

これらを解消するために、CloudflareのFaaS Workersと、Key-Valueタイプのデータベースサービス KV を利用して、コメントフォーム用のAPIを構築しました。

システム構成

ざっくりとしたシステム構成は下記の通り。

クライアントからWorkers上のAPIが呼ばれると、WorkersからKVを参照し、コメントの追加・参照がされるという仕組み。コメント追加時は、WebHookでDiscordに通知を飛ばし、これにより管理者である私がコメント投稿に気づけるというもの。

実際には段階的導入で、第1段階として、Google FormとGoogle Apps ScriptのAPIは残し、クライアント側に直書きしていたこれらの煩雑なAPI call処理をWorkersで包み、クライアント側はWorkersのAPIをcallするだけの形にしました。これによりクライアント側の煩雑な処理をなくし、汎用的なAPI呼出処理だけが残る、ブログ本体とコメントフォームの疎結合化を実現。またPOST時のCORSエラーも解消できました。

第2段階として、データ保存場所として残っていたGoogle FormとGoogle Apps Script部分を完全に廃し、KVにデータを貯める形に移行しました。

KVでのコメントDBの実現

KVは、その名の通り、Key-ValueタイプのNoSQLなDBです。コメントデータを保持するにあたり、

  • Key：ブログPostのslug
  • Value：コメントの配列、JSON形式

としました。

例えば、Nuxt3 Jamstackブログ再構築時の躓きポイント忘備 には私がサンプルで3つほどコメントを残していますが、KV上にはこのように格納することで、1つのPostに対して複数コメントを実現しています。

  • Key：nuxt3weblog
  • Value：
    [
  {
    "name": "Shunya",
    "comment": "ページの読み込み速度があまり早くない点も、要改善事項ですね。",
    "tstmp": "2024-01-14T06:19:00.000Z"
  },
  {
    "name": "Shunya",
    "comment": "コメントフォームをCloudflare Workersに切り替えてみた。",
    "tstmp": "2025-04-20T06:53:00.000Z"
  },
  {
    "name": "Shunya",
    "comment": "コメントフォームのbackendをCloudflare KVに切り替えてみた。",
    "tstmp": "2025-05-05T08:36:06.934Z"
  }
]

コメント登録時は、該当のslugに関するコメントレコードが存在するかをKeyでチェックし、存在すればそのValueを取得し配列の末尾追加、存在しない場合は新しいレコードを登録するようにしています。

Cloud Flare Workers + KV 備忘録

以下、Cloud Flare Workers と KVをセットアップした際のコマンドと参考ページの備忘録。

まとめ

Cloudflare Workers + KVを利用することで、最初に挙げた懸念事項を解消したコメントフォームのバックエンドを構築することができました。CPU時間や呼び出し回数等、無料枠には制限があるものの、このページのような小規模個人ブログ程度であれば十分耐えきれるかなと。

FaaSとKey-ValueタイプのDB、今回初めて利用しましたが、 単一目的のサービスであれば、仰々しいフレームワークを用意しなくても、サクッとやりたいことを実現できる、気軽に試して動かせる環境として、非常に有用ですね、もっと早くから試してみればよかった。
（マイクロサービスかモノリスか、はたまたモジュラーモノリスか、といろいろな議論があり、一長一短な面もあるので、ケースバイケースですが）

ソースコード

今回作成したもののソースコードはこちらから。

  • Home
  • /
  • Posts
  • /
  • 【備忘】Cloudflare Workers + KV にてコメントフォーム刷新
Tech-TIPS

Comments

© 2025 shunya_wisteria