使用 Supabase 和 Stripe 搭建 SaaS 站点
本文介绍了如何借助 Pages 的模板，系统性构建起 SaaS 独立站的核心功能矩阵，包含用户管理、订阅支付、博客内容等。
背景介绍
搭建功能完备的 SaaS 站点需要处理用户认证、数据存储、支付处理等复杂环节，传统开发方式耗时耗力，对小团队和个人开发者挑战巨大。我们的 Pages SaaS模板结合 Supabase 和 Stripe，为开发者提供高效便捷的解决方案，无需从零构建复杂后端和支付系统，让您专注于产品核心功能和用户体验优化。
主要特性与优势：
开发门槛低：深度整合 Supabase（用户认证与数据存储） 和 Stripe（订阅支付系统）
场景适配灵活：适用于工具类、内容订阅类等常规 SaaS 站点
成本与效率优势：无需自建服务器或维护复杂技术架构，减少初期资金与人力成本
集成 AI 模块：配置 LLM Key 后可以快速接入，深度整合了多种大模型。
适用场景
个人开发者
个人开发者资源有限，难以承担复杂开发成本。我们的 Pages 模板结合 Supabase 和 Stripe，显著降低开发门槛，快速实现 SaaS 核心功能，帮助开发者低成本、高效率地推向市场，验证商业想法。
AI 创业公司和初创团队
对于 AI 创业公司和初创团队而言，初期往往面临资金和技术资源有限的问题。使用 我们的 SaaS 模板 并结合 AI 大模型，能够大幅降低开发成本和时间，快速将 AI 产品推向市场。同时，我们也在 SaaS 模板 中提供 AI 文生图模块，支持用户快速接入不同大模型。
准备工作
Supabase
Supabase 数据库将用于存储您应用的核心数据，包括用户信息、商品信息、价格信息等关键数据。Supabase 也提供用户认证，支持邮箱、Github、Google等登录方式来验证您的用户。
1、准备 API Key
进入项目的 Prject Settings， 找到
Project Url, Anon Public Key, Service_role Secret Key，项目后续需要这些环境变量。
2、初始化数据库
完成Supabase账户设置后，您需要初始化必要的数据库表结构：
下载提供的初始化 SQL 文件
在 Supabase 管理界面中，导航至SQL编辑器
将下载的初始化文件中的 SQL 代码完整复制到编辑器中
点击
Run按钮执行 SQL 命令
执行成功后，系统将创建所有必要的数据表和关系，为您的应用提供完整的数据存储基础。
3、关闭用户邮箱验证
本模板没有实现邮箱验证，需要在 Project Settings-Anthentication-Sign In / Up里关掉邮箱验证。
4、第三方登录
模板支持 Github 登录和 Google 登录。
进入 Supabase 配置网站 URL 和重定向 URL ，待配置身份验证时使用。在 Authenticatin-URL Configuration 中配置 Site URL 和 Redirect URLs。
GitHub 登录
准备
Client ID和Client Secret 。在 GitHub 任意页面的右上角，单击你的个人资料照片，然后选择 Settings-Developer settings-OAuth Apps 创建网站 OAuth 应用，设置用户授权 Github 登录时的信息，包括网站标志、名称、回调 URL 等。其中回调 URL 格式为:
https://${your-supabase-url}/auth/v1/callback
配置完成后将
Client ID和Client Secret妥善保存。进入 Supabase Authentication-Sign In/Providers-Auth Providers 选择 GitHub 填写
Client ID和Client Secret 并开启该身份验证，您的用户就能使用 Github 完成登录注册了。
Google 登录
准备
Client ID和Client Secret 。在 Google Auth Platform 中 创建客户端，设置用户授权 Google 登录时的信息，包括网站名称、网站 URL 、回调 URL 。其中回调 URL 格式为:
https://${your-supabase-url}/auth/v1/callback
配置完成后将
Client ID和Client Secret妥善保存。进入 Supabase Authentication-Sign In/Providers-Auth Providers 选择 Google 填写
Client ID和Client Secret 并开启该身份验证，您的用户就能使用 Google 完成登录注册。
Stripe
1、准备 API Key
在
Dashboard 界面中，导航至左侧菜单底部的Developers选项。点击进入后，选择API Keys标签页，您将看到您账户的 API 密钥信息。妥善复制并安全保存显示的
Secret key，该凭据将在后续配置过程中用于建立 EdgeOne Pages 与 Stripe 服务之间的连接。
2、创建 WebHook
点击左下角 Developer，然后进入 Webhooks，在这里需要配置触发器，用于产品和价格变化的时候触发 Supabase 的数据更新，保持您的应用数据始终同步。
WebHooks 的 events 配置中，选择以下事件:
在 Webhooks 配置页面中，您需要添加一个接收端 URL，格式为：
https://${your-app-name}.edgeone.run/api/webhook
注意： 此处的
${your-app-name}应替换为您在 EdgeOne Pages 部署后获得的实际项目名称。您可以暂时不填写此 URL，等 EdgeOne Pages 项目部署完成后再回来完成配置。
配置完成后，Stripe 将通过此 webhook 向 Supabase 发送产品和价格变更的通知，从而触发数据库的自动更新，确保您的应用数据保持最新状态。创建 webhook 后，复制
Signing secret记录下来用于后续的填写：
Contentful（可选）
AI 文生图模型配置（可选）
本模板在使用 AI 模块时会调用相应的大模型，您在给用户使用前需要预先配置 API Key，也可以自主增加其他需要的大模型。
使用前需要您配置相应的环境变量，格式如下：
# OpenAIOPENAI_API_KEY=your-openai-api-key# Stability AISTABILITY_API_KEY=your-stability-api-key# FAL AIFAL_API_KEY=your-fal-api-key# FIREWORKS AIFIREWORKS_API_KEY=your-fireworks-api-key....# 其他大模型配置也是同理，环境变量中加上对应的api-key即可
以 fal 为例，进入官网后找到 API Keys，Add Key 后就能得到相应的 API Key 了。在项目中配置环境变量后，您的用户就能使用该大模型选项下的文生图了。
// 配置环境变量 FAL_API_KEY 的api-key值// src/lib/ai-models-config.tsexport const modelProviderMap = {'fal-ai/flux/schnell': { provider: createFal, envKey: 'FAL_API_KEY', envName: 'FAL' },'dall-e-3': { provider: createOpenAI, envKey: 'OPENAI_API_KEY', envName: 'OpenAI' },'dall-e-2': { provider: createOpenAI, envKey: 'OPENAI_API_KEY', envName: 'OpenAI' },...}// src/app/api/ai/generate/route.tsfunction buildGenerationOptions(imageModel: any, prompt: string, size?: ImageSize) {const options: any = {model: imageModel,prompt,}if (size) {options.size = size}return options}const modelConfig = await resolveModelConfig(model, request) // 检查大模型是否在支持的模型列表中const imageModel = await buildImageModel(modelConfig, model, request) // 构建模型实例const generateOptions = buildGenerationOptions(imageModel, prompt, size) // 构建生成选项const imageResult = await generateImage(generateOptions) // 调用 AI SDK 生成图像(从 ai/ai-sdk 引用 generateImage ）
您也可以参考上述代码新增其他大模型。
部署到 EdgeOne Pages
完成 Supabase 和 Stripe 的配置后，您需要设置必要的开发环境变量，以便您的应用能够正确连接到这些服务。
1、填写环境变量
1. Project Name - 设置后，此名称将成为您应用的一部分URL。请将此URL添加到 Stripe Webhook 配置中的
Endpoint URL 字段(格式为: ${your-project-name}.edgeone.run/api/webhook。如果您配置了第三方登录，也需要您更新第三方中的网站 URL，以及 Supabase 中的网站 URL 和重定向 URL。2. Environment Variables - 添加所有必要的配置参数:
Supabase 连接参数 (之前步骤中获取的密钥）
Stripe 相关参数 (之前步骤中获取的密钥)
正确配置这些信息后，您的应用将能够与 Stripe 支付系统和 Supabase 数据库无缝集成。
填写好参数后，点击
立即创建开始部署，部署会花费 1-3 分钟。如果项目出现部署失败，可以根据 Build Logs 和 Build Summary 信息修改项目，或者联系工作人员解决。
2、在 Stripe 上配置商品
在 Stripe 控制面板 中，通过左侧导航栏访问
Product catalog，然后点击Create product按钮创建新产品。完成创建后，产品信息将自动同步至Supabase 数据库中的 products 表。由于价格页是服务端动态渲染的，此时去控制台重新部署一下就能在价格页看到价格等信息。注意：因为我们模板是按照订阅逻辑适配的，添加产品的时候，需要选择
Recurring
