Supabaseとは?ローカルLLM対応AI Overview診断ツールのDB保存先をSQLiteからSupabaseに変更する

スポンサーリンク
この記事は約6分で読めます。

前回の記事では、ローカルLLM対応のAI Overview診断ツールに、SQLite + Prismaを使って診断履歴を保存する機能を追加しました。

SQLiteは、ローカル環境で使いやすい軽量データベースです。
一方で、今後この診断ツールを複数端末で使いたい、Web上に公開したい、ログイン機能を追加したい、SaaS化を考えたい場合は、ローカルファイルのSQLiteだけでは限界があります。

そこで今回は、DB保存先をSQLiteからSupabaseに変更することとしました。

Supabaseを使うと、診断履歴をローカルPC内の dev.db ではなく、クラウド上のPostgreSQLデータベースに保存できます。

PostgreSQL(ポストグレスキューエル):
オープンソースのリレーショナルデータベース管理システム(RDBMS)で、データの整合性を守る信頼性の高さと、多様なデータ型を扱える柔軟性を兼ね備えているのが大きな特徴です。

Supabaseとは?

Supabaseは、PostgreSQLをベースにしたバックエンドサービスです。

簡単にいうと、アプリ開発に必要な次のような機能をまとめて使えるサービスです。

機能内容
DatabasePostgreSQLデータベースを使える
Authログイン・ユーザー認証を追加できる
Storage画像やファイルを保存できる
Edge Functionsサーバー側の処理を実行できる
Realtimeデータ変更をリアルタイムに反映できる

今回使うのは、この中の Database 機能です。

つまり、Supabaseを使うと、ローカルのSQLiteファイルではなく、クラウド上のPostgreSQLに診断履歴を保存できます。

Supabaseへの保存の流れ

Supabaseへの移行の流れ

Supabase SDKを使わず、Next.jsのAPI RouteからSupabase REST APIに直接リクエストしています。

AI Overview診断ツール

Next.js API Route

Supabase REST API

Supabase PostgreSQL

Supabase側のテーブル

Supabaseには、次のテーブルを作成しました。

diagnosis_histories

作成したカラムは以下の通りです。

id
user_id
created_at
input_preview
source_url
total_score
summary
スーパーベースダッシュボードのテーブルカラム
Supabaseダッシュボード Table Editor

user_id は、将来ログイン機能を追加するために用意しています。

今回はログイン機能を実装しないため、user_id NULL のまま保存されます。

Supabase側のテーブル作成

  1. Supabase Dashboardを開く
    https://supabase.com/dashboard
  2. 対象プロジェクトを選択
  3. 左メニューの SQL Editor を開く
  4. New query を押す
  5. 以下のSQLを貼り付けて実行
  1. 左メニューの Table Editor を開く
  2. diagnosis_histories テーブルが作成されていることを確認
Supabase SQL Editor
SQL Editor

.env.local の設定

SUPABASE_SERVICE_ROLE_KEY は公開禁止なので、NEXT_PUBLIC_ はつけません。

Supabaseへの履歴書き出し処理

診断が完了すると、以下の流れで、画面側から履歴保存APIへ診断結果を送ります。

app/page.tsx

POST /api/history

app/api/history/route.ts

lib/supabaseAdmin.ts

Supabase REST API

diagnosis_histories

SaaS化に備えた設計

ログイン機能は実装しませんが、将来SaaS化しやすいように、user_id カラムだけ先に用意しました。

将来的には次のように拡張できます。

Supabase Auth

ログインユーザーIDを user_id に保存

ユーザーごとの診断履歴を表示

RLSで自分の履歴だけ見えるように制御

今は自分用MVPなので、RLSは有効にしていません。

RLS(Row Level Security):
行レベルセキュリティのことで、データベースの行(row)ごとにアクセス制限をかける仕組みです。
SupabaseはデフォルトでRLSが無効で、RLSを有効にしないと全ユーザーが全データを見れてしまいます。 フロントエンドから直接DBにアクセスする構成では必須のセキュリティ設定ですす。

現在の保存処理

現在、診断が完了すると次の流れで履歴が保存されます。

  1. ユーザーがURLまたは本文を入力
  2. 診断を実行
  3. ルールベース診断とOllama診断を実行
  4. 診断結果を画面に表示
  5. Next.js API Routeへ履歴保存リクエスト
  6. Supabase REST API経由でPostgreSQLへ保存
  7. 画面下部の診断履歴を再取得

現在の画面表示

画面下部では、Supabaseに保存された診断データを表示しています。

タブは診断履歴と高スコアサイト5選の2つです。

AI Overview診断ツール診断データ表示

診断履歴では、最新5件を表示します。

高スコアサイト5選では、URL診断された履歴の中からスコア上位5件を表示します。

SQLiteとの違い

  • SQLiteの場合:
    ローカルPC内のファイルに保存
  • Supabaseの場合:
    クラウド上のPostgreSQLに保存

そのため、Supabaseに変更したことで次のメリットがあります。

  • 履歴がクラウドDBに保存される
  • Supabaseダッシュボードから確認できる
  • 将来ログイン機能を追加しやすい
  • SaaS化しやすい
  • 他の端末や本番環境でも同じDBを使える

 現在の制限

以下はまだ未実装です。

  • ログイン機能
  • ユーザー別履歴
  • RLS
  • 課金機能
  • 管理画面

ただし、user_id カラムを用意しているため、将来追加しやすい構成になっています。

まとめ

Supabaseは、PostgreSQLをベースにしたクラウド型のバックエンドサービスです。

SQLiteはローカルMVPに向いていますが、Supabaseに変更すると、診断履歴をクラウドDBに保存できるようになります。
これにより、複数端末での利用、Web公開、ログイン機能、ユーザー別の履歴管理などに発展させやすくなります。

関連記事

SQLite + Prismaとは?ローカルLLM対応AI Overview診断ツールにDB保存機能を追加して分かったこと
SQLite + Prismaを使って、ローカルLLM対応AI Overview診断ツールに診断履歴のDB保存機能を追加する方法を初心者向けに解説。MVPから実用ツールへ拡張する考え方も紹介します。
Codex アプリで作る、ローカルLLM対応のAI Overview診断ツールMVP
Codex アプリを使って、ローカルLLMとルールベース診断で作るAI Overview診断ツールMVPの開発手順を解説。Next.js、TypeScript、Ollamaを使い、本文入力とURL診断に対応した実装内容を紹介します。