边缘开发者平台
  • Pages
    • 产品简介
    • 快速开始
      • 导入 Git 仓库
      • 从模板开始
      • 直接上传
    • 框架指南
    • 项目指南
      • 项目管理
      • edgeone.json
      • 缓存配置
      • 错误码
    • 构建指南
    • 部署指南
      • 概览
      • 触发部署
      • 管理部署
      • 部署按钮
      • 使用 Github Action
    • 域名管理
      • 概览
      • 自定义域名
      • 配置 HTTPS 证书
      • 如何配置 DNS 的 CNAME 记录
    • Pages Functions
    • KV 存储
    • 边缘 AI
    • API Token
    • EdgeOne CLI
    • Pages MCP
    • 集成指南
      • 数据库
        • Supabase 集成
        • Pages KV 集成
      • 电商
        • Shopify 集成
        • WooCommerce 集成
      • 支付
        • Stripe 集成
        • Paddle 集成
      • CMS
        • WordPress 集成
        • Contentful 集成
        • Sanity 集成
      • 身份验证
        • Supabase 集成
        • Clerk 集成
    • 最佳实践
      • 使用 Deepseek-R1 模型快速搭建对话型AI站点
      • 使用 WordPress + WooCommerce 和 GatsbyJS 搭建电商平台
      • 使用 Supabase 和 Stripe 搭建 SaaS 站点
      • 如何快速搭建公司品牌站点
      • 如何快速搭建博客站点
    • 迁移指南
      • 从 Vercel 迁移至 EdgeOne Pages
      • 从 Cloudflare Pages 迁移至 EdgeOne Pages
      • 从 Netlify 迁移至 EdgeOne Pages
    • 排障指南
    • 常见问题
    • 联系我们
    • 产品动态
解锁 1年EdgeOne + 1TB CDN： 加入我们的开发者之旅
立即开始！
当前为国际站中文文档，如需访问中国站文档，请点击这里
文档概览/
边缘开发者平台/
Pages/
最佳实践/
使用 Supabase 和 Stripe 搭建 SaaS 站点/

使用 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、初始化数据库
注册后在 Supabase 创建一个新的项目，将 数据库初始化文件 的内容复制到Supabase 控制台的 SQL Editor 中运行，初始化所需的数据库。




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 Cli可以直接导入配置文件。
运行命令：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 Pages Cli。
执行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