giraphme/blog

supabase でこのブログにコメント機能を付けた

PV が超少ないブログではありますが、誤った情報を書いてしまった場合にご指摘を受ける方法がないのでコメント機能を付けました。

  • お金かけたくない

  • ログインは不要

  • ログイン不要で投稿できるため、スパム対策は必須

という要件でやっていたので、最初は AWS Lambda 経由で S3 にコメント情報をアップロードして Static hosting する雑仕様で作っていましたが、やっぱ最低限 anonymous 認証ぐらい欲しくなって supabase に方向転換して実装しました。
特に深い目的があって supabase を選択した訳ではなく、使ったことがないサービスの内 PostgreSQL を使えて無料枠がそこそこありドキュメントが整っているためぐらいの緩い理由です。

##どう作ったか

###DB スキーマ

超シンプルで、以下のスキーマだけです。

public.comments のスキーマ

返信を付けられるようにするため、in_reply_to_id を持っています。
DBスキーマ上は無限に再帰できてしまいますが、フロントエンドでは1階層しか持てないように制御しています。

また、スパム対策として publish_level カラムを定義しています。
このカラムには適当な数字を入れていて(デフォルト0)、これが一定の数値以上になると全ユーザーに見える仕組みです。
現在は運用でカバーしていますが、公開ブログのコメントなので comments テーブルへの INSERT をトリガーに Edge Functions を起動し、 適当な LLM ツールに食わせて判断する仕組みを検討しています。

###フロントエンド

前述の通り Anonymous 認証を使用していて、管理者(自分)のみあれやこれやして Email 認証してます。
アクセスする度に闇雲に Anonymous ユーザーを作られても困るので、初回コメントの時だけ実行するようにしました。

あとはもう普通に supabase からデータ取ってきて加工して色付けるだけですね。

###Row Level Security (RLS)

INSERT は Anonymous 認証をしていれば誰でも可能にしていますが、 user_id と publish_level の値には制限を与えています。

SELECT は投稿者自身の投稿と publish_level が一定以上の物としています。

##所感

これまで supabase を使う機会が無かったので初めてでしたが、この程度のライトな用途であればびっくりするぐらい簡単に作れました。 ただし supabase だけで運用していく場合、サービスのスケールに伴って RLS のメンテしなければならないため、私の場合は RLS に目が慣れるのに少し時間がかかりそうに感じています。

© giraph.me