基于 Supabase 和 Stripe 的 Saas 独立站模板

模板介绍

该模板实现了一个 Saas 独立站几乎所有的常用功能，包含用户管理、订阅支付、播客内容等。后端: Supabase + Stripe 内容 CMS: Contentful 前端: AstroJS 模板代码是开源的，您可以自行修改，采用其中的某些模块或者实现。

1. 准备工作

Supabase

本模板的订单数据和用户管理采用 Supabase 的API。

准备 API Key

注册登录 Supabase 后，创建您自己的项目。

进入项目的 Prject Settings - Data API, 复制 Project Url, Anon Public Key, Service_role Secret Key。

初始化数据库

注册后在 Supabase 创建一个新的项目，将数据库初始化文件的内容复制到Supabase 控制台的 SQL Editor 中运行，初始化所需的数据库。

Contentful

准备 API Key

注册并登录 Contentful CMS 控制台，点击左上角 Settings - API keys，点击 Add API Key 创建一个新的API Key。创建完成后，复制Space ID,Content Delivery API - access token,Content Preview API - access token。

创建博客数据模型

安装Contentful Cli可以直接导入配置文件。

也可以从控制台自行创建：

创建完数据模型之后可以自行编写对应的博客内容。

Stripe

准备 API Key

先给您的应用取一个名字，例如：my-saas-site。

左下角 Developers - API Keys，复制 STRIPE_SECRET_KEY。

再进入 Developers - WebHooks，点击 Add destination 创建一个 WebHook。

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

。

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

创建完 Webhook 之后复制 Signing secret 备用。

2. 创建应用

选择模板

点击进入部署页面，填入前面准备好的所有环境变量。。点击开始部署。

创建项目并等待部署完成

项目部署完成后，可以点击预览链接查看效果。

在 Stripe 上配置商品

回到 Stripe 控制台，添加您的订阅商品。。这里添加商品会通过前面配置的 WebHooks 触发您部署的边缘函数，更新商品数据到 Supabase 数据库，方便您更加定制化地管理订单和商品。

在 Contentful 配置 WebHook

模板的博客采用 SSG 方案，在项目编译时就生成了静态页面。在 Contentful 配置 EdgeOne Pages 提供的 Webhooks 可以在 Contentful 的内容发生变化时自动触发重新部署以更新博客内容。在您的项目设置页中，创建一个新的 WebHook: 复制地址到 Contentful 的 WebHooks 中：

3. 本地开发

将您的项目拉到本地之后，在本地安装 Edgeone Pages Cli。执行edgeone login登录。然后执行 edgeone link ${您的项目名} 关联线上配置到本地，环境变量将会被自动写入本地的.env。

配置开发环境变量

在 .env 文件中添加以下变量，方便 SDK 处理前后端跨域。

FRONT_END_URL_DEV=http://localhost:4321/
PUBLIC_API_URL_DEV=http://localhost:8088/
DEV=true

启动前端服务

npm run dev

启动函数服务

edgeone pages dev

框架	Astro
支付系统	Stripe
数据库	Supabase
CMS	Contentful
应用场景	SaaS
认证系统	Supabase Auth