Supabase 部署指南

一步一步教你搭建后端，零基础也能看懂

目录

  1. 注册 Supabase 账号
  2. 创建 Supabase 项目
  3. 配置邮箱验证码发送
  4. 配置数据库表（执行 SQL）
  5. 获取 API 密钥并填入代码
  6. 配置账号注销功能
  7. 部署你的网页
  8. 数据分离方案说明
1

注册 Supabase 账号

1. 打开浏览器，访问 https://supabase.com

2. 点击右上角的 "Sign In"（登录）按钮

3. 选择 "Sign Up"（注册），用你的 GitHub 账号 登录（推荐，最简单）

4. 授权后，你会进入 Supabase 的控制台页面（Dashboard）

提示：Supabase 提供免费套餐，每月有 5 万月活用户额度，足够个人项目使用，完全不用担心费用问题。
2

创建 Supabase 项目

1. 在 Dashboard 页面，点击黄色的 "New project" 按钮

2. 填写以下信息：

  • Name（项目名称）：输入 sudongshi（或任意你喜欢的名字）
  • Database Password（数据库密码）：设置一个密码，请务必记住这个密码，后面会用到
  • Region（地区）：选择 Asia Pacific 中的任意地区（新加坡、东京等），离中国近，访问更快

3. 点击 "Create new project"，等待 1-2 分钟，项目创建完成

提示：创建完成后会自动跳转到项目仪表盘。如果没跳转，点击左侧你创建的项目名称即可进入。
3

配置邮箱验证码发送

1. 在项目左侧菜单中，点击 "Authentication"（认证）→ "Providers"

2. 找到 "Email" 这一项，确保它是开启状态（绿色开关）

3. 往下滚动，找到 "Email OTP" 部分，确认 "Enable Email OTP (One-Time Password)" 已开启

4. 继续往下，找到 "SMTP Settings"（邮件发送设置），这里需要配置以让 Supabase 能发送邮件到 QQ 邮箱：

重要：配置 SMTP 发送邮件

Supabase 默认使用自己的邮件服务，但免费额度有限。建议使用你自己的 QQ 邮箱来发送验证码邮件，步骤如下：

第一步：获取 QQ 邮箱授权码

1. 登录 QQ 邮箱网页版 → 点击"设置" → "账户"

2. 找到"POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务"，开启 "IMAP/SMTP服务"

3. 按提示发送短信验证后，会获得一个 16 位授权码（不是 QQ 密码！），复制保存好

第二步：在 Supabase 中配置 SMTP

在 Supabase SMTP Settings 中填写：

  • Sender name：诉冬时
  • Sender email：你的QQ邮箱地址（如 123456789@qq.com）
  • SMTP Host：smtp.qq.com
  • SMTP Port：465
  • Username：你的QQ邮箱地址（同上）
  • Password：刚才获取的 16 位授权码
  • Encryption：选择 SSL/TLS

填好后点击 Save 保存。

5. 接着点击左侧 "Authentication" → "Templates"（邮件模板），你可以自定义发给用户的验证码邮件内容，也可以保持默认。

6. 点击左侧 "Authentication" → "URL Configuration"，确保 Site URL 填写正确（部署时修改为你的网站地址）。

4

配置数据库表（执行 SQL）

1. 在项目左侧菜单中，点击 "SQL Editor"（SQL 编辑器）

2. 点击 "New query"（新建查询）

3. 打开项目中的 supabase-schema.sql 文件，复制全部内容

4. 粘贴到 SQL Editor 的输入框中

5. 点击右下角的绿色 "Run" 按钮执行

6. 看到 "Success. No rows returned" 提示说明执行成功

提示：这个 SQL 脚本会创建：
- public.profiles 表：存储用户资料
- forum.posts 表：论坛帖子（独立 schema）
- forum.comments 表：论坛评论（独立 schema）
- 自动触发器：新用户注册时自动创建 profile 记录
- RLS 安全策略：保护数据安全
5

获取 API 密钥并填入代码

1. 在项目左侧菜单中，点击 "Project Settings"（项目设置）→ "API"

2. 你会看到两个关键信息：

  • Project URL：类似 https://xxxxxxxxxxxx.supabase.co
  • anon public key：以 eyJ... 开头的一长串字符

3. 打开 index.html 文件，找到这两行代码（在文件底部）：

const SUPABASE_URL = 'https://your-project-id.supabase.co';
const SUPABASE_ANON_KEY = 'your-anon-key-here';

4. 把它们替换成你自己的值：

const SUPABASE_URL = 'https://xxxxxxxxxxxx.supabase.co';
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...';
注意：一定要替换这两个值，否则代码无法连接到你的数据库！原样复制粘贴，不要有多余的空格或换行。
6

配置账号注销功能

注销账号需要 Supabase 的 Admin API 权限，有两种方式实现：

方式一：使用 Supabase Edge Function（推荐）

1. 在本地安装 Supabase CLI：打开终端，输入 npm install -g supabase

2. 登录：supabase login

3. 初始化：supabase init

4. 链接项目：supabase link --project-ref 你的项目ID（项目ID 在 Project Settings 中查看）

5. 创建 Edge Function：supabase functions new delete-user

6. 编辑 supabase/functions/delete-user/index.ts，写入以下代码：

import { serve } from "https://deno.land/std@0.168.0/http/server.ts"
import { createClient } from "https://esm.sh/@supabase/supabase-js@2"

serve(async (req) => {
  const { user_id } = await req.json()
  const supabaseAdmin = createClient(
    Deno.env.get("SUPABASE_URL")!,
    Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!
  )
  const { error } = await supabaseAdmin.auth.admin.deleteUser(user_id)
  if (error) return new Response(JSON.stringify({ error: error.message }), { status: 400 })
  return new Response(JSON.stringify({ success: true }), { status: 200 })
})

7. 部署：supabase functions deploy delete-user

方式二：直接在 Supabase Dashboard 手动删除（简单但需手动操作）

在 Supabase Dashboard → Authentication → Users 中，找到对应用户，点击右侧的删除按钮即可。此方式不需要额外配置。

当前代码的处理方式：如果 Edge Function 未部署，点击注销后会提示用户联系管理员，并自动清除本地登录状态。你也可以暂时使用方式二手动处理注销请求。
7

部署你的网页

你有多种免费部署方式可选：

方式一：GitHub Pages（免费，推荐新手）

1. 注册 GitHub 账号：https://github.com

2. 创建一个新仓库（New Repository），命名为 sudongshi

3. 上传 index.html 文件到仓库

4. 进入仓库 → Settings → Pages → Source 选择 "main" 分支 → Save

5. 等待几分钟，你的网站就部署好了，访问地址是 https://你的用户名.github.io/sudongshi

方式二：Netlify（免费，拖拽上传）

1. 打开 https://netlify.com，注册账号

2. 直接将 index.html 文件拖入页面

3. 自动部署完成，获得一个网址

部署后别忘了：回到 Supabase → Authentication → URL Configuration，把 Site URL 改成你的网站地址（如 https://你的用户名.github.io/sudongshi），否则验证码可能无法正常发送。
8

数据分离方案说明

你担心的问题："论坛数据太多会导致卡顿，或者数据清除影响账号"，解决方案如下：

数据库架构设计：

auth.users（Supabase 内置）→ 存储邮箱、密码哈希等认证核心数据

public.profiles → 存储用户公开资料，与 auth.users 一对一关联

forum.posts → 论坛帖子数据（独立 schema）

forum.comments → 论坛评论数据（独立 schema）

这样做的好处：

  • 论坛数据放在 forum schema 中，与账号系统完全隔离
  • 即使清空论坛数据，用户的登录账号不受任何影响
  • 论坛数据再多也不会拖慢登录速度，因为用的是不同的表
  • 用户在论坛注册和登录用的是同一套账号系统（通过 user_id 关联）
  • 如果想要单独备份论坛数据，只需备份 forum schema 即可
简单来说：账号是一把钥匙，论坛是房间里的东西。换锁不会丢东西，清空房间不会丢钥匙。两者独立但通过同一把钥匙（user_id）连接。

快速检查清单

部署完成后，打开你的网站就能看到登录界面了。如果遇到问题，检查 Supabase Dashboard 的 Logs 页面查看错误信息。