My MCP Test

多租户SaaS入门工具包

使用Next.js 15、TypeScript和Supabase构建的可在生产环境中使用的多租户SaaS框架模板

🚀 特点

• 支持多租户组织单位的数据完全隔离、行级安全性（RLS）
• 完善的认证系统注册、登录、密码重置、OAuth（谷歌）
• 组织与成员管理邀请、角色管理（所有者/管理员/成员）、权限控制
• 订阅已准备好计划管理、用量追踪以及Chargebee整合
• 多域四大领域（营销/应用/管理/运营）
• 七项外部服务整合Supabase、Cloudflare R2、Upstash Redis、Sentry、Logflare、Chargebee、Resend
• 审计日志所有操作的记录与可追溯性
• 生产环境应对安全性、可扩展性、错误监控

📋 技术栈

核心

• Next.js 15 - React框架
• TypeScript - 类型安全性
• Tailwind CSS - 搭配造型
• Turbopack（特尔波帕克，或根据具体语境可译为“涡轮打包器”、“涡轮压缩打包机”等，但通常直接使用原名以保持专业术语的准确性） - 快速构建

后端基础设施

• Supabase（注：Supabase是一个开源的后端服务，提供数据库、认证、实时功能等功能，类似于Firebase，但基于PostgreSQL。） - 认证，PostgreSQL + PostGIS
• Cloudflare R2 - 对象存储
• Upstash Redis（可直接作为译文，无需额外解释，因为“Upstash Redis”在中文中通常直接以原名使用，表示一个特定的Redis服务或解决方案） - 缓存会话（无服务器）

监控·分析

• 哨兵 - 错误监控
• Logflare（可译为“洛格弗莱”或根据具体语境保持原名不译，若需意译则可能为“日志监测平台”等，但通常保留原名以体现品牌特色） - 日志管理·审计日志

结算·通知

• Chargebee - 订阅支付
• 重新发送 - 事务性邮件

🏗️ 项目结构

my-mcp-test/
├── docs/                           # ドキュメント
│   ├── PROJECT_PROGRESS.md         # 進捗状況
│   ├── DATABASE_SCHEMA.md          # データベース設計
│   └── ...
├── src/
│   ├── app/
│   │   ├── (www)/                  # マーケティングサイト
│   │   ├── (app)/                  # ユーザーアプリケーション
│   │   ├── (admin)/                # 管理画面
│   │   ├── (ops)/                  # 運用画面
│   │   └── actions/                # Server Actions
│   ├── components/                 # 再利用可能なコンポーネント
│   ├── lib/                        # ライブラリ・ヘルパー
│   ├── types/                      # TypeScript型定義
│   └── middleware.ts               # ドメインルーティング、IP制限
├── supabase/
│   └── migrations/                 # データベースマイグレーション
└── .env.local                      # 環境変数

🚦 快速入门

1. 安装依赖项

npm install

2. 创建服务账户

创建7个外部服务的帐户，并获取API密钥。

详细步骤: docs/SERVICES_ACCOUNT_SETUP.md 请参考

必备服务：

• Supabase（认证·数据库）
• Cloudflare R2（存储）
• Upstash Redis（缓存）
• 重新发送（邮件）

推荐服务：

• Sentry（错误监控）
• Logflare（日志管理·审计日志）
• Chargebee（支付、选项）

3. 设置环境变量

设置开发环境的环境变量：

# 開発環境に切り替え
npm run env:dev

# .env.local を編集して実際の認証情報を設定
# SERVICES_ACCOUNT_SETUP.mdで取得したAPIキーを設定

环境详情 docs/ENVIRONMENT_SETUP.md 请参考。

4. 数据库迁移

在Supabase仪表板中按顺序执行以下SQL文件：

1. supabase/migrations/20250112000001_initial_schema.sql
2. supabase/migrations/20250112000002_rls_policies.sql

5. 启动开发服务器

npm run dev

通过以下URL访问：

• http://localhost:3000 - 营销网站
• http://app.localhost:3000 - 用户应用程序
• http://admin.localhost:3000 - 管理界面
• http://ops.localhost:3000 - 运营界面

📚 主要功能

认证系统

• 邮箱地址+密码注册
• Google OAuth
• 重置密码
• 邮件确认流程

组织管理

• 组织的创建、编辑、删除
• 组织切换（对应多个组织所属）
• 14天免费试用
• 订阅计划管理

成员管理

• 邀请成员（发送邮件）
• 角色管理（所有者/管理员/成员）
• 基于权限的访问控制
• 成员删除·退出

订阅

• 套餐显示（免费/专业/企业）
• 用量可视化
• 用量限制的检查
• 已准备好集成Chargebee

管理界面（ADMIN）

• 用户列表·管理
• 组织一览·管理
• 系统统计仪表盘

操作界面（OPS）

• 系统状态监控
• 服务健康检查
• 部署历史
• 基于IP限制的访问控制

🔒 安全

• 行级安全性（Row Level Security，简称RLS）使用PostgreSQL的RLS实现租户间数据的完全隔离
• 审计日志记录所有重要操作
• IP限制限制访问OPS域的IP
• 环境变量管理机密信息通过环境变量进行管理
• Sentry集成自动监控和通知错误

📖 文件

详细的文档 docs/ 参见目录：

安装指南

• SERVICES_ACCOUNT_SETUP.md - 【首先阅读】创建7个服务账户的步骤
• ENVIRONMENT_SETUP.md - 环境设置指南（开发/预生产/生产）
• E2E_TESTING_GUIDE.md - E2E测试执行指南
• SUPABASE_SETUP.md - Supabase设置指南
• MULTI_DOMAIN_SETUP.md - 多域名设置

参考

• PROJECT_PROGRESS.md - 项目进展与完成功能一览
• DATABASE_SCHEMA.md - 数据库设计与表定义

🚀 部署

Vercel推荐

1. 环境准备

该项目支持三种环境：

• 发展开发环境（分支： develop）
• （医学或生物学中的）分期部署环境（分支： staging）
• 生产生产环境（分支： main）

2. 部署到Vercel

# Vercel CLIをインストール
npm i -g vercel

# デプロイ
vercel

3. 域名设置

为各环境设置域名：

生产

• www.yourdomain.com（注：在中文语境中，网址通常保持原样不翻译，但为符合中文表达习惯，可稍作说明，如“网址为 www.yourdomain.com”）
• app.您的域名.com
• admin.yourdomain.com 翻译为中文可以是：“您域名的管理后台（或管理员控制面板）”。不过，具体翻译可能会根据上下文和实际用途有所调整，但大意是表达这是一个用于管理或控制某个域名的网站或系统
• ops.yourdomain.com 翻译为中文是：“ops（运维）.您的域名.com”。不过，这里的“yourdomain.com”是一个占位符，实际翻译时应替换为具体的域名，但在这个语境下，我们通常保持其作为示例的形态，不具体翻译域名部分。所以，更自然的表达可能是“ops（运维）.您的域名（如example.com）”。但为了简洁明了，直接翻译为“ops.yourdomain.com”也是可以接受的，其中“yourdomain.com”在中文语境下通常理解为“您的域名”或保持原样作为示例

分期（或阶段划分）

• staging.yourdomain.com（可翻译为“您的域名的预发布环境”或根据具体语境简化为“您的域名预发布站点”，但通常直接保留原样以体现其技术含义）
• app.staging.yourdomain.com 翻译为中文是：“你的域名的预生产环境应用程序服务器”。不过，为了更简洁明了，通常我们会直接说成“你的域名的预生产环境App”，或者根据具体语境，可能还会翻译为“你的域名的测试阶段应用程序服务器”等。但核心意思是这个域名指向的是一个用于测试或预生产环境的应用程序服务器
• admin.staging.yourdomain.com 翻译为中文可以是：“你的域名的预生产环境管理站点”。不过，这里的“yourdomain.com”是一个占位符，实际翻译时应替换为具体的域名，但在这个语境下，我们通常保持这种表述方式以说明其用途。所以，简化后的翻译可以是：“预生产环境的管理站点（域名示例）”
• ops.staging.yourdomain.com 翻译为中文可以是：“ops（操作）预生产环境.yourdomain.com（您的域名）”。不过，具体翻译可能会根据上下文和实际使用场景有所调整，但核心意思是表达了这是一个用于操作（ops）的预生产（或测试）环境，属于某个特定域名下的一部分

4. 设置环境变量

在Vercel仪表板上设置各环境的环境变量。详情请参阅 docs/ENVIRONMENT_SETUP.md 请参考。

🎯 路线图

已实现功能：

• ✅ 认证·组织·成员管理
• ✅ 订阅服务基础
• ✅ 管理界面·操作界面
• ✅ 支持多域名
• ✅ 测试环境（Vitest + Playwright）
• ✅ 环境分离（开发/预生产/生产）

未来考虑追加的功能：

• \[ \] API密钥管理
• \[ \] Webhook集成
• \[ \] CI/CD（GitHub Actions）
• \[ \] 性能监控

______________________________________________________________________

创建日期：2025-01-12 Next.js 15 + TypeScript + Supabase + 多租户