解锁 1年EdgeOne + 1TB CDN: 加入我们的开发者之旅
立即开始!
使用 Supabase 和 Stripe 搭建 SaaS 站点
本文介绍了如何借助 Pages 的模板,系统性构建起 SaaS 独立站的核心功能矩阵,包含用户管理、订阅支付、播客内容等。
背景介绍
搭建一个功能完备、安全可靠且具备良好用户体验的 SaaS 站点并非易事,开发者需要处理用户认证、数据存储、支付处理等多个复杂环节。传统的开发方式往往需要投入大量的时间和资源,并且涉及多种技术栈和第三方服务的集成,这对于小型团队和个人开发者来说,面临着巨大的挑战。在这样的背景下,我们的 Pages SaaS 模板为 SaaS 站点的搭建提供了高效、便捷的解决方案。通过将 Supabase 和 Stripe 相结合,开发者可以充分利用两者的优势,快速搭建出功能强大的 SaaS 站点,无需从头开始构建复杂的后端和支付系统,从而将更多的精力集中在产品核心功能和用户体验的优化上。
模板特性与优势:
开发门槛低:深度整合 Supabase(用户认证与数据存储) 和 Stripe(订阅支付系统)
场景适配灵活:适用于工具类、内容订阅类等常规 SaaS 站点
成本与效率优势:无需自建服务器或维护复杂技术架构,减少初期资金与人力成本
适用场景
个人开发者
对于个人开发者来说,资源和时间有限,难以承担大规模技术团队和复杂开发流程的成本。使用我们的 Pages 模板结合 Supabase 和 Stripe 的组合能够显著降低开发门槛,快速实现 SaaS 站点的核心功能,帮助他们以较低的成本和较快的速度将产品推向市场,验证商业想法。
AI 创业公司和初创团队
对于 AI 创业公司和初创团队而言,初期往往面临资金和技术资源有限的问题。使用 我们的 SaaS 模板 并结合 AI 大模型,能够大幅降低开发成本和时间,快速将 AI 产品推向市场。例如,专注于自然语言处理的初创团队,可以利用该组合搭建一个提供智能文案生成服务的 SaaS AI 站点,以较低成本验证市场需求。
准备工作
Supabase
本模板的订单数据和用户管理采用 Supabase 的API。
1、准备 API Key
注册登录 Supabase 后,创建您自己的项目。
进入项目的 Prject Settings - Data API, 复制
Project Url
, Anon Public Key
, Service_role Secret Key
。


2、初始化数据库


3、关闭用户邮箱验证
本模板没有实现邮箱验证,需要在 Project Settings-Anthentication-Sign In / Up里关掉邮箱验证。
Contentful
1、准备 API Key
注册并登录 Contentful CMS 控制台,点击左上角 Settings - API keys,点击 Add API Key 创建一个新的API Key。
创建完成后,复制
Space ID
,Content Delivery API - access token
,Content Preview API - access token
。
2、创建博客数据模型
运行命令:
contentful space import --content-file contentful-export.json --space-id 你的空间id
也可以从控制台自行创建:


创建完数据模型之后可以自行编写对应的博客内容。
Stripe
1、准备 API Key
先给您的应用取一个名字,例如:my-saas-site。
注册 Stripe 账号(模板 Demo 采用的是 Stripe 的测试模式),进入控制台。
左下角 Developers - API Keys,复制
STRIPE_SECRET_KEY
。
2、创建 WebHook
再进入 Developers - WebHooks,点击
Add destination
创建一个 WebHook。

WebHooks 的 events 配置中,选择以下事件:

。

在
Endpoint URL
填入${您的应用名字}.edgeone.app/stripe/webhook
, 项目成功部署之后 Stripe 上创建的产品都会触发函数更新数据到 Supabase。创建完 Webhook 之后复制
Signing secret
备用。

创建应用
1、选择模板

。

点击开始部署。
2、创建项目并等待部署完成
项目部署完成后,可以点击预览链接查看效果。
3、在 Stripe 上配置商品
回到 Stripe 控制台,添加您的订阅商品。

。

这里添加商品会通过前面配置的 WebHooks 触发您部署的边缘函数,更新商品数据到 Supabase 数据库,方便您更加定制化地管理订单和商品。
4、在 Contentful 配置 WebHook
模板的博客采用 SSG 方案,在项目编译时就生成了静态页面。
在 Contentful 配置 EdgeOne Pages 提供的 Webhooks 可以在 Contentful 的内容发生变化时自动触发重新部署以更新博客内容。
在您的项目设置页中,创建一个新的 WebHook:


复制地址到 Contentful 的 WebHooks 中:




本地开发
执行
edgeone login
登录。然后执行
edgeone link ${您的项目名}
关联线上配置到本地,环境变量将会被自动写入本地的.env。1、配置开发环境变量
在
.env
文件中添加以下变量,方便 SDK 处理前后端跨域。FRONT_END_URL_DEV=http://localhost:4321/PUBLIC_API_URL_DEV=http://localhost:8088/DEV=true
2、启动前端服务
npm run dev
3、启动函数服务
edgeone pages dev