🐈

VPSで「認証つきDify環境」を作る③：Supabaseの事前設定

に公開
2025/11/19
Supabase
chatbotui
Dify
tech

💡 この記事はシリーズ③です。

前回はXserver VPS上にDifyをセットアップし、動作確認まで行いました。
今回は、ChatbotUIの認証とDify設定を管理するための Supabase を整えます。

③Supabaseの事前設定

ChatbotUIの認証機能と、Difyアプリ設定の保管先として Supabase を使います。
ここでは以下の流れで進めます👇

  1. プロジェクト作成
  2. API情報の確認とメモ
  3. 認証（Auth）の設定とテストユーザー登録
  4. Dify接続情報テーブルの作成

1. プロジェクトを作成

まずは Supabase公式サイト にアクセスし、サインインします。

続いて、新しいプロジェクトを作成します。

項目 内容
プロジェクト名 任意（例：dify-chatbot）
データベースパスワード 強固なパスワードを設定（重要！）
地域 近いロケーションを選択（今回は Tokyo）

2. API情報をメモしておく

後ほどChatbotUI側の.env設定で使うので、SupabaseのAPI情報を控えておきましょう。
左下の歯車アイコン 「Project Settings」 をクリックします。

🔹 Project URL

「Project Settings → Data API」から
Project URL をコピーしてメモします。

🔹 API Keys

次に「Project Settings → API Keys」を開き、
以下の2つをコピーします。👇
※あとで貼りやすいように、テキストエディタにまとめておくと便利です。

キー名 用途 注意点
anon key クライアント用（公開OK） ChatbotUIのフロントで使用
service_role key サーバー専用（非公開） .env にのみ設定、絶対に漏らさない

3. 認証（Auth）の準備とユーザー登録

続いて、Supabaseの認証設定を有効化します。

🔸 サインアップ制御

左メニューから
Authentication → Sign In / Providers を開き、「User Signups」の項目にある 「Allow new users to sign up」 を 無効化（OFF） にします。

Difyを社内利用する前提なので、
招待制（管理者が作るユーザーのみ）とします。

🔸 Emailログイン設定

同じページ下部の Auth Providers → Email を開き、Enabled にチェックを入れます。

さらに、Email OTP Expiration を 900秒（15分） に設定します。

これで、メールリンクによるログイン認証が有効になります。

🔸 リダイレクトURL設定

次に左メニューから Authentication → URL Configuration を開きます。

「Site URL」に、ChatbotUIを公開する予定のサブドメインを入力します。
例：https://chat.example.com

ここで設定したURLがログイン後の遷移先になります。
あとでドメインを変更した場合は、この設定も必ず更新してください。

🔸 テストユーザーを作成

試験運用用にユーザーを1件登録しておきましょう。

左メニューから Authentication → Users → Create new user をクリックして作成します👇

これで、ChatbotUIからの認証テストができるようになります。

4. Dify接続情報テーブルを作成

DifyアプリのAPIキーや表示名、初期入力値などを管理するために、
public.dify_apps テーブルを作成します。

⚙️ このテーブルは「サーバー（service_role）」だけが参照する想定です。
作成後にRLSで**“全拒否”ポリシー**を適用し、ブラウザ側（anon key）からは読めないようにします。

🔹 テーブル作成SQL

Supabaseの左メニューから 「SQL Editor」 を開き、
以下のスクリプトを貼り付けて実行します。

create table public.dify_apps (
  id uuid primary key default gen_random_uuid(),
  slug text unique not null,             -- 例: 'support-bot'
  display_name text not null,            -- UIに表示する名前
  api_key text not null,                 -- DifyのApp APIキー（app-xxxx）
  base_url text not null default 'https://example.com',
  default_inputs jsonb not null default '{}'::jsonb, -- 初期inputs（UIで上書き可）
  is_active boolean not null default true,
  created_at timestamptz default now()
);

-- 行レベルセキュリティを有効化し、安全側に倒す
alter table public.dify_apps enable row level security;
create policy "deny all" on public.dify_apps for all using (false) with check (false);

これでテーブルは完成。
一応、動作確認用のレコードを1件入れておきましょう。下記をコピペして Run（Ctrl+Enter）します。

insert into public.dify_apps (slug, display_name, api_key, default_inputs)
values ('support-bot', 'Support Bot', 'app-ここにDifyのキー', '{"lang":"ja"}'::jsonb);

api_key には、前章で作ったDifyのテストフローのApp APIキー を入れます。
ここまで入っていれば、サーバー側（service_role）からSELECTできる状態です。
逆に、anonキーでは一切読めない（RLSの「deny all」）ので安全です。

🚀 まとめ

ここまでで、VPSの準備とDifyの初期動作確認が完了しました。
次回は、Supabaseで認証まわりを整えるパートに進みます。

🪄 次の記事：
VPSで「認証つきDify環境」を作る④：ChatbotUIをVPSで動かす

Discussion