🐈

VPSで「認証つきDify環境」を作る①：全体像（Xサーバー＋ChatbotUI＋Supabase）

に公開
Supabase
XServer
chatbotui
Dify
tech

この記事はシリーズの導入編です。
本編は数日おきに公開予定です。

概論：Difyを“ちゃんと認証つき”で使いたい人へ

「Difyを試してみたいけど、無料クラウドだと認証が弱くて不安・・・」
「社内データを扱いたいけど、セキュリティが心配・・・」

そんな方に向けて、Xサーバー（VPS）にDifyを入れて、ChatbotUI＋Supabaseで認証を加える構成をご紹介します。
実際に動くところまで手を動かしながら、“現実的に使えるDify環境”を作っていきます。

🧭 この記事でやること

  • 目的：限られたユーザーだけがアクセスできる、安全なDify環境を構築
  • 最終ゴール：
    • Xserver VPS上でDifyを動かす
    • フロントエンドはChatbotUI
    • 認証とデータベースはSupabaseで管理
    • メールログインやOAuth対応のアカウント管理つきで運用
    • Difyの応答をリアルタイムにストリーミング表示（SSE対応）

👩‍💻 こんな人におすすめ

  • Difyのフローで社内データを参照させたい方
  • ベーシック認証だけだと不安な方
  • ちゃんとユーザー管理したい方
    ※中～上級者向け

⚙️ Difyをどうやって動かすか

Difyを使う方法はいくつかあります。

  1. クラウド版（有料プラン）を使う：すぐ動くけどコストはお高め
  2. GCPやAWSなどに構築する：自由度は高いがセットアップが重い
  3. VPSにセルフホストする：コスパがよく、完全に自分で管理できる ← 本記事はこちら！

今回は「3」をベースに、Supabase Authでログイン管理、ChatbotUIでUIを構築、Difyを裏側で動かすという構成です。

🏗️ システム構成（ざっくり図解）

【ユーザー】
　└─ Webブラウザから HTTPS でアクセス

【Xserver VPS】
　├─ Nginx（SSL終端・リバースプロキシ）
　│ ├─ ChatbotUI（Next.js / ポート3000）
　│ └─ Dify（セルフホスト / APIエンドポイント）

【ChatbotUI】
　├─ 認証：Supabase Auth（JWT）
　├─ モデル一覧・会話ID保存：Supabase DB
　└─ 会話送信：Dify API（SSEで応答）

【Dify】
　└─ 会話API /v1/chat-messages を受け取り、SSEで返答

【Supabase（マネージド）】
　├─ Auth：Email / OAuth / Magic Link
　├─ DB：PostgreSQL（RLSで保護）
　└─ Storage：必要に応じて添付ファイル保存

💡今回使うツールのご紹介

  • Difyとは？
    Dify は、OpenAIやAnthropicなどのLLM（大規模言語モデル）を活用したアプリケーションを、ノーコードで構築・運用できるオープンソースのプラットフォームです。チャットボットやドキュメントQA、フォーム入力支援など、さまざまなAIアプリをGUIベースで作成でき、API連携やユーザー管理、ログ収集などの機能も備えています。
    Docker対応でセルフホスティングも可能なため、クラウド版に頼らず自社環境で運用したい企業にも適しています。
    ※本記事ではDifyの説明はほぼしません。

  • ChatbotUIとは？
    ChatbotUIは、ChatGPT風のUIを持つオープンソースのチャットアプリです。OpenAIやGeminiなど複数のLLMに対応しており、APIキーを設定することで利用可能になります。ユーザー認証にはSupabaseを利用でき、メール認証やOAuthログイン、チャット履歴の個別管理にも対応しています。

  • Supabaseとは？
    Supabaseは、Firebaseの代替として注目されているBaaS（Backend as a Service）です。
    PostgreSQLベースのデータベースを中心に、認証・ストレージ・リアルタイム通信などを統合的に提供しており、開発者が迅速にバックエンドを構築できる環境を整えています。特に認証機能は強力で、メール・OAuth・Magic Linkなど多様なログイン方式に対応しており、ChatbotUIとの連携にも最適です。
    ※無料プランがあるので試しやすい！

📚 このあとやること

🚀 まとめ

「Difyを使いたいけど、認証がネックだった」という方へ。
このシリーズでは、安く・柔軟に・安全に運用できる構成として
Dify（バックエンド）× ChatbotUI（フロント）× Supabase（Auth/DB）
の組み合わせを解説します。

次回から、実際にVPSを使って動くDify環境を作っていきましょう！

Discussion