源码系统概览
文章正文
TL;DR 摘要:这是一套基于 React、Next.js 与 MongoDB 的 SaaS 全栈开发框架源码,自带登录、Stripe 支付订阅、团队协作、Markdown 讨论区等核心模块,拿到手就能用来搭建会员制订阅产品。
这套源码是 async-labs 团队开源的 React 全栈 SaaS 开发框架,官方名称为 SaaS Boilerplate,中文版本附带目录注释与配套教程。
项目把 SaaS 产品起步阶段最常用的模块全部收拢到一起,涵盖用户登录、支付订阅、团队管理、讨论区、文件上传、邮件发送和数据分析。
仓库主体位于 saas 目录,拆分为 app 前端与 api 后端两个服务,另附 lambda 目录演示无服务器部署方式。
By the numbers:仓库共 1347 个文件,核心模块 115 个,官方演示站 saas-app.async-await.com 可在线体验,项目在 GitHub 拥有 4.2k 星标与 700 多个 fork。
下表把本框架与常见的 SaaS 起步方案放在一起比较,方便判断哪种方式更适合你。
| 对比项 | 本源码 async-labs/saas | 自行从零搭建 | 付费 SaaS 模板 |
|---|---|---|---|
| 授权协议 | MIT 开源 | 代码自持 | 多为单项目授权 |
| 登录系统 | Google OAuth 与无密码邮箱登录 | 需自行接入 | 一般自带 |
| 支付订阅 | Stripe 订阅与 Webhook 校验 | 需自行开发 | 多数自带 |
| 团队协作 | 团队、邀请、成员设置齐全 | 需自行开发 | 部分提供 |
| 投入成本 | 免费且可商用 | 开发周期长 | 按年付费 |
对预算有限又要快速上线的团队,这套源码在开放性与完整性之间取到了平衡。
源码简介
本项目全部使用 TypeScript 编写,前端以 React 18 搭配 Next.js 14 做服务端渲染,后端使用 Express 提供 REST API。
数据层采用 Mongoose 连接 MongoDB,用户、团队、帖子、讨论等模型集中在 api/server/models 目录,每个模型一个文件。
根目录下的 book 文件夹存放配套教程各章节代码,从第 1 章到第 10 章按 begin 和 end 标注进度,方便对照学习。
saas/api 目录包含 OAuth 登录、无密码登录、Stripe、S3、SES、Mailchimp、WebSocket 等独立模块,每个功能一个文件,结构清晰。
saas/app 目录存放 Next.js 页面,登录、账单、创建团队、讨论、团队设置、个人设置等页面都位于 pages 目录。
适用场景
正在筹备会员制订阅产品的团队,可以把这套源码当作起点,把精力集中在核心业务功能上。
需要多租户能力的企业应用,团队模块天然支持成员邀请与权限管理。
做内部工具或行业垂直系统的开发团队,可以利用现成的登录、后台与支付模块快速出原型。
学习 React 全栈开发的个人开发者,可以通过 book 目录的章节代码完整了解一个生产级项目的搭建过程。
需要同时支持网页、API 与无服务器部署的项目,仓库中 app、api、lambda 三种形态都已备好。
功能亮点
用户系统支持 Google OAuth 与邮箱无密码登录,登录态用 Cookie 和会话管理,安全防护完整。
支付模块基于 Stripe,支持团队订阅、更换卡片信息、Webhook 验证失败扣款,并带有完整的支付历史记录。
团队功能包含创建团队、成员邀请、团队设置与个人设置,满足协作类产品的管理需求。
讨论与帖子功能支持 Markdown 编写,可切换 HTML 预览,适合产品内做内容沉淀与成员沟通。
集成 AWS S3 做文件上传与删除,集成 AWS SES 发送事务邮件,集成 Mailchimp 管理订阅用户列表。
使用 socket.io 提供实时通讯,接入 Google Analytics 做流量统计,生产部署有完整方案。
技术架构与部署指南
技术栈与运行环境
前端技术栈:React 18、Next.js 14、TypeScript、Material-UI 5、MobX 状态管理。
后端技术栈:Express、Mongoose 8、socket.io、Stripe、AWS SDK。
数据库使用 MongoDB,推荐搭配 MongoDB Atlas 云服务。
运行环境需要 Node.js 14 以上版本与 Yarn 包管理器。
主要依赖版本:next ^14.0.4、react ^18.2.0、mongoose ^8.0.3、stripe ^14.8.0、express ^4.18.2。
安装与部署提示
先在 api 目录复制 .env.example 为 .env,配置 MongoDB 地址、会话密钥、Google OAuth 凭证与 Stripe 密钥。
在项目根目录执行 yarn install 安装依赖,再进入 api 目录运行 yarn dev 启动后端服务。
另开一个终端进入 app 目录运行 yarn dev,前端默认监听 3000 端口,后端默认监听 8000 端口。
部署到生产环境可以参考 Heroku、AWS Elastic Beanstalk、API Gateway 与 Lambda 的组合方案。
不要把真实的 .env 提交到仓库,.gitignore 已排除该文件,生产环境的密钥要单独保管。
截图与演示说明
以下截图来自 GitHub 原版 async-labs/saas 仓库,均为无水印原图。
这是 Google 与无密码登录页面,用户可以通过 OAuth 或邮箱验证两种方式进入系统。
登录后的右上角下拉菜单集中了个人设置、团队设置与退出入口。
个人设置页面可以修改头像、昵称等账号资料,头像支持上传到 S3 存储。
团队设置页展示团队成员信息,管理员可以管理成员与团队资料。
创建讨论页支持选择讨论类型并填写标题与内容,用于团队内部沟通。
帖子编辑器提供 Markdown 视图,方便技术团队编写格式化内容。
同一篇帖子可以切换为 HTML 渲染视图,排版效果即时可见。
团队成员在讨论区的深色界面,阅读与回复操作都在同一页面完成。
账单设置页展示当前套餐与到期时间,支持管理订阅状态。
购买订阅套餐页调用 Stripe 收银台,支持填写卡片信息完成付费。
支付历史记录页列出历次扣款明细,方便对账与查询。
常见问题
问：这套源码能直接商用吗？
可以,项目采用 MIT 协议,允许免费使用、修改与商用。
问：一定要用 MongoDB 吗？
是的,数据层基于 Mongoose 编写,使用 MongoDB 才能获得最佳兼容性。
问：没有 Google OAuth 凭证能跑起来吗？
可以,先配置无密码邮箱登录即可,Google 凭证可后续补齐。
问：支付功能在本地能测试吗？
使用 Stripe 测试密钥即可在本地模拟订阅扣款,正式上线再替换为 live 密钥。
问：book 目录和 saas 目录有什么区别？
saas 是完整可运行的项目,book 是配套教程的分章节代码,用于逐步学习。
安全风险提示
本地开发与生产环境的密钥要严格隔离,.env 文件切勿提交到公开仓库。
Stripe 的 Webhook 端点密钥与支付回调需要做签名校验,防止伪造请求。
S3 存储桶需要正确配置 CORS 与访问权限,避免文件被越权读取或写入。
依赖组件存在版本升级需求,上线前建议执行 yarn audit 检查已知漏洞。
下载说明
源码已经打包在下载链接中,解压后按本文说明配置环境变量即可运行。
配套的 book 教程目录一并包含在内,学习时对照章节顺序使用。
遇到问题可查看官方文档 builderbook.org 或参考 GitHub 仓库的 issues 讨论。
GitHub项目开源地址:https://github.com/async-labs/saas。