当前位置：首页 > news >正文

saas模板使用教程

news 2025/10/29 7:30:04

1.使用git clone 将项目下载到本地。

2.添加新分支并切换（也可将项目fork一份进行加工，根据自己的需要，下面以appeal分支名为例）

第一步：添加并切换到新的分支

您可以使用一个简单的命令来完成创建并切换到新分支的操作。假设您想创建并切换到名为 appeal 的新分支，请在您的项目根目录下打开终端或命令行工具，然后执行以下命令：

codeBash

git checkout -b appeal

这个命令是以下两个命令的简写：

git branch appeal (创建一个名为 appeal 的新分支)
git checkout appeal (切换到 appeal 分支)

执行该命令后，您本地的代码库就已经切换到了 appeal 分支上。您可以在这个分支上进行代码的修改、添加新功能或修复问题。

您可以通过以下命令来确认当前所在的分支：

codeBash

git branch

当前所在的分支名前会有一个星号 * 标记。

第二步：分支策略的可行性分析

您提到希望创建一个 appeal 分支，并将之后所有的修复、上传和最终部署都基于这个分支。这种做法在某些情况下是可行的，但它也存在一些潜在的问题，需要您根据项目的具体情况来权衡。

您的方案：单一特性长周期分支

您的方案类似于使用一个长期的特性分支。所有的开发工作都在这个 appeal 分支上进行，而 main 分支保持稳定，可能只用于发布。

优点:

隔离开发环境: 这种方式可以很好地将正在开发中的、可能不稳定的代码与 main 分支上稳定的、可随时部署的代码隔离开来。
简化流程: 对于个人开发者或小型团队来说，只维护 main 和 appeal 两个主要分支，流程相对简单直观。

第三步，提交一个“空变更”在 Git 中被称为创建一个 empty commit。

操作步骤：

确保您在 appeal 分支上
如果不确定，可以先运行 git branch 查看当前分支。如果不在 appeal 分支，请先切换：
codeBash
```
git checkout appeal
```
创建空提交
执行以下命令：
codeBash
```
git commit --allow-empty -m "chore: test empty commit to verify workflow"
```
- --allow-empty: 这是关键参数，允许 Git 在没有文件变更的情况下创建一个新的提交。
- -m "...": 这是提交信息。这里使用 "chore: ..." 是一种常见的规范，表示这是一次与功能、修复无关的日常维护性提交。您也可以写成任何您能看懂的信息，比如 "Test commit"。
推送到远程仓库
现在，这个空的提交已经存在于您的本地 appeal 分支上了。接下来，将它推送到远程仓库进行验证：
codeBash
```
git push
```    *   如果您之前没有推送过 `appeal` 分支，请使用 `git push -u origin appeal`。
```

本次用到的示例：

Administrator@User-2025SOLYHK MINGW64 /d/react/appeal.tools__ (main)
$ git checkout -b appeal
Switched to a new branch 'appeal'Administrator@User-2025SOLYHK MINGW64 /d/react/appeal.tools__ (appeal)
$ git checkout appeal
Already on 'appeal'Administrator@User-2025SOLYHK MINGW64 /d/react/appeal.tools__ (appeal)
$ git commit --allow-empty -m "chore: test empty commit to verify workflow"
[appeal d1b496b] chore: test empty commit to verify workflowAdministrator@User-2025SOLYHK MINGW64 /d/react/appeal.tools__ (appeal)
$ git push
fatal: The current branch appeal has no upstream branch.
To push the current branch and set the remote as upstream, usegit push --set-upstream origin appealTo have this happen automatically for branches without a tracking
upstream, see 'push.autoSetupRemote' in 'git help config'.Administrator@User-2025SOLYHK MINGW64 /d/react/appeal.tools__ (appeal)
$ git push -u origin appeal
Enumerating objects: 1, done.
Counting objects: 100% (1/1), done.
Writing objects: 100% (1/1), 203 bytes | 203.00 KiB/s, done.
Total 1 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)
remote:
remote: Create a pull request for 'appeal' on GitHub by visiting:
remote:      https://github.com/mysaas-all/appeal.tools__/pull/new/appeal
remote:
To https://github.com/mysaas-all/appeal.tools__.git* [new branch]      appeal -> appeal
branch 'appeal' set up to track 'origin/appeal'.Administrator@User-2025SOLYHK MINGW64 /d/react/appeal.tools__ (appeal)
$

3.本地初始化（参考readme）

pnpm install
cp .env.example .env

修改.env上的参数

在引之前请在supabase上获取数据库地址如
过程如下。

分步指南：获取 Supabase 数据库连接字符串

登录 Supabase
前往 supabase.com 并登录到您的仪表盘 (Dashboard)。
选择您的项目
在主页上，点击您想要连接的项目卡片。
进入数据库设置
- 在左侧的菜单栏中，找到并点击 齿轮图标 (⚙️ Project Settings)。
- 在设置菜单中，选择 Database。
找到连接信息 (Connection Info)
在数据库设置页面中，向下滚动直到您看到 Connection info 这个部分。这里包含了构建 DATABASE_URL 所需的所有信息：
- Host (主机)
- Database name (数据库名，通常是 postgres)
- Port (端口)
- User (用户，通常是 postgres)
- Password (密码)
选择正确的连接字符串
您会看到 Supabase 已经为您准备好了完整的连接字符串。请注意，它会提供两种模式：

选项 A：使用连接池 (Connection Pooler) - 强烈推荐

这是 Supabase 推荐的最佳实践，尤其适合您的 Next.js/SaaS 应用。
- 适用场景：部署在 Vercel, Netlify 等 Serverless 平台，或者任何需要高效处理大量连接的应用。
- 端口：通常是 6543。
- 格式：
  codeCode
```
postgresql://postgres.[your-project-ref]:[YOUR-PASSWORD]@[cloud-provider].[region].supabase.co:6543/postgres
```
- 操作：直接复制 Supabase 提供的 URI 字段下的这个字符串。
选项 B：使用直接连接 (Direct Connection)
- 适用场景：用于需要长期、稳定连接的场景，或者某些不支持连接池的数据库管理工具。
- 端口：通常是 5432。
- 格式：
  codeCode
```
postgresql://postgres:[YOUR-PASSWORD]@[cloud-provider].[region].supabase.co:5432/postgres
```

如何填写到您的 .env 文件中

复制连接字符串：从 Supabase 仪表盘中，复制选项 A (Connection Pooler) 的连接字符串。
替换密码：将字符串中的 [YOUR-PASSWORD] 部分替换为您在创建 Supabase 项目时设置的数据库密码。
- 忘记密码了？ 如果您忘记了密码，可以在同一个数据库设置页面重置它 (Reset database password)。
粘贴到 .env 文件：将完整的、包含真实密码的字符串粘贴到您的 .env 文件中。

最终示例：

您的 .env 文件中的 DATABASE_URL 应该看起来像这样 (这是一个示例，请使用您自己的信息)：

codeDotenv

# .env# ... 其他变量# 使用 Supabase 的连接池 URL
DATABASE_URL="postgresql://postgres.abdcdefg1234567890:[YOUR_REAL_PASSWORD]@aws-0-ap-southeast-1.pooler.supabase.com:6543/postgres"# ... 其他变量

重要提示

密码安全：[YOUR-PASSWORD] 是您在创建项目时设置的那个密码。请务必妥善保管，不要将包含真实密码的 .env 文件提交到公共 Git 仓库。
优先使用连接池：除非您有特殊理由，否则始终优先选择使用端口为 6543 的连接池 URL。这可以提高您应用的性能和稳定性。
本地开发：这个连接字符串在本地开发 (npm run dev) 和生产部署时都可以使用。

直接从地址栏上复制项目的编号就行了。

结果如：

由于我电脑上不支持Ip6,所以我手动了。

Manual Workflow

Generate SQL: pnpm prisma migrate diff --from-empty --to-schema-datamodel prisma/schema.prisma --script > migration.sql 在本地生成最新模型与已应用迁移之间的 SQL，不需连接数据库。
审查内容: 打开 migration.sql 确认变更是否符合预期；若使用 SuperJSON 等扩展，确保语句包含所需的 CREATE EXTENSION。
Supabase 执行: 登录 Supabase → Database → SQL Editor，粘贴 migration.sql，点击 “Run” 执行迁移；如需要可分多段执行并检查每段结果。
记录迁移: 进入 Supabase → Database → Migration history，新建记录或在 prisma/migrations 目录下创建同名文件夹存放同样 SQL，保持团队同步。
验证结构: 运行 Supabase Table Editor 或 SQL 查询（例如 select column_name, data_type from information_schema.columns where table_name='your_table';）确认变更已经生效。
更新状态: 在本地执行 pnpm prisma generate，保持 Prisma Client 更新；若以后可连主库，再运行 pnpm prisma migrate resolve --applied <migration-name> 标记迁移已应用，避免重复。

设置

# A long, random string used to sign session cookies and JWTs.

# Generate one using: `openssl rand -base64 32` in your terminal.

AUTH_SECRET="gfgswRxojs28NMezkNFLy5W2HFb2o8NJzbh7x2zBZEo="

4.pnpm dev 本地测试是否正常启动

解决提示的错误：

需要一个rensentkey : 到resent注册一下。https://resend.com/

正常启动了。现在需要git和gg的第三方登录凭证了。多语言多色调已经实现，预置了5种主题色

# ----------------------------------

# Theme Preset Configuration

# ----------------------------------

# Uncomment one of the following lines to set the color theme for the application.

# NEXT_PUBLIC_THEME_PRESET=modern-blue

# NEXT_PUBLIC_THEME_PRESET=elegant-purple

NEXT_PUBLIC_THEME_PRESET=professional-slate

# NEXT_PUBLIC_THEME_PRESET=vibrant-emerald

# NEXT_PUBLIC_THEME_PRESET=premium-amber

不设置的话，不显示。可能这个需要修改成supabase登录使用。有点麻烦。这个站只能绑定一个域名。

修复代码不再使用resend,直接使用supabase发信。

在 Supabase 网站上进行配置

你需要登录你的 Supabase 项目后台，进行以下设置：

启用 Email 提供商
- 在 Supabase 项目仪表盘中，点击左侧菜单的 Authentication（认证）图标。
- 在子菜单中，选择 Providers（提供商）。
- 找到并点击 Email 提供商，然后打开 Enable Email provider（启用 Email 提供商）的开关。
- 重要： 默认情况下，魔法链接是开启的。你可以在这个页面下方的 Magic Link (one-time password) 选项中确认它是启用的。
配置站点 URL 和重定向 URL
- 这是在本地测试最关键的一步，你需要告诉 Supabase 当用户点击邮件中的链接后，应该重定向到你的本地开发服务器地址。
- 点击左侧菜单的 Authentication（认证）图标。
- 在子菜单中，选择 URL Configuration（URL 配置）。
- 在 Site URL（站点 URL）字段中，填入你的本地开发环境地址。对于大多数前端框架（如 React, Vue, Next.js）来说，这个地址通常是 http://localhost:3000。请根据你的实际端口号进行修改。
- 在 Redirect URLs（重定向 URL）部分，添加额外的重定向地址。同样，这里也应该填入你的本地开发服务器地址，例如 http://localhost:3000/**。使用通配符 ** 可以允许重定向到任何子路径。
（可选）禁用邮件确认
- 为了在本地快速测试登录流程，你可以暂时禁用新用户注册时的邮件确认。这样，用户第一次通过魔法链接登录时就会被直接标记为已验证。
- 在 Authentication > Providers > Email 设置页面中，找到并关闭 Confirm email（确认邮件）的开关。
- 注意： 在生产环境中，强烈建议开启此功能以验证用户邮箱的真实性。
- 在环境变量中设置。
  
  NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
  
  NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
- SUPABASE_SERVICE_ROLE_KEY=""
- 在如图的位置找。