Supabase安装与配置 #

必备工具
├── Node.js 18+
├── npm / yarn / pnpm
├── Git
└── Docker (本地开发需要)

# 检查Node.js版本
node --version
# 应该显示 v18.x.x 或更高

# 检查npm版本
npm --version

# 检查Git
git --version

# 检查Docker (可选)
docker --version

# 使用Homebrew安装
brew install supabase/tap/supabase

# 验证安装
supabase --version

# 使用Scoop安装
scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase

# 或使用Chocolatey
choco install supabase

# 验证安装
supabase --version

# 使用安装脚本
curl -fsSL https://sup.supabase.com/install.sh | bash

# 或使用npm
npm install -g supabase

# 验证安装
supabase --version

# 适用于所有平台
npm install -g supabase

# 验证安装
supabase --version

supabase --help

# 主要命令
├── init          # 初始化项目
├── start         # 启动本地服务
├── stop          # 停止本地服务
├── db            # 数据库操作
├── migration     # 迁移管理
├── functions     # Edge Functions
├── gen           # 生成类型定义
└── login         # 登录Supabase

# 登录Supabase账号
supabase login

# 按提示完成浏览器授权
# 登录成功后会保存凭证

# 查看当前登录状态
supabase projects list

# 链接到远程Supabase项目
supabase link --project-ref <project-ref>

# project-ref 可以在项目设置中找到
# 格式类似: abcdefghijklmnop

# 创建项目目录
mkdir my-supabase-app
cd my-supabase-app

# 初始化Supabase
supabase init

# 生成的目录结构
├── supabase/
│   ├── config.toml      # 配置文件
│   ├── migrations/      # 迁移文件
│   ├── functions/       # Edge Functions
│   └── seed.sql         # 种子数据
└── .gitignore

# supabase/config.toml

# 项目配置
[project]
name = "my-supabase-app"

# API配置
[api]
port = 54321
schemas = ["public", "storage", "graphql_public"]
extra_search_path = ["public", "extensions"]
max_rows = 1000

# 数据库配置
[db]
port = 54322
shadow_port = 54320
major_version = 15

# 认证配置
[auth]
site_url = "http://localhost:3000"
additional_redirect_urls = ["http://localhost:3000/auth/callback"]
jwt_expiry = 3600
enable_signup = true

# 存储配置
[storage]
file_size_limit = "50MiB"

# Edge Functions配置
[edge_runtime]
enabled = true

# 启动所有服务
supabase start

# 首次启动会拉取Docker镜像，需要等待

# 启动成功后显示
Started supabase local development setup.

         API URL: http://localhost:54321
          DB URL: postgresql://postgres:postgres@localhost:54322/postgres
      Studio URL: http://localhost:54323
    Inbucket URL: http://localhost:54324
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
service_role key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

# 停止服务
supabase stop

# 停止并删除数据
supabase stop --no-backup

# 查看服务状态
supabase status

推荐扩展
├── Supabase - 官方扩展
├── PostgreSQL - 数据库支持
├── Deno - Edge Functions开发
└── Thunder Client - API测试

// VS Code settings.json
{
  "postgres.credentials": [
    {
      "host": "localhost",
      "port": 54322,
      "user": "postgres",
      "password": "postgres",
      "database": "postgres"
    }
  ]
}

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

# 创建项目
npm init -y

# 安装Supabase客户端
npm install @supabase/supabase-js

# 安装开发依赖
npm install -D typescript @types/node

# 创建React项目
npx create-react-app my-app --template typescript
cd my-app

# 安装Supabase
npm install @supabase/supabase-js @supabase/auth-helpers-react

# 创建Next.js项目
npx create-next-app@latest my-app --typescript
cd my-app

# 安装Supabase
npm install @supabase/supabase-js @supabase/auth-helpers-nextjs

# 创建Vue项目
npm create vue@latest my-app
cd my-app

# 安装Supabase
npm install @supabase/supabase-js

# .env.local (Next.js) 或 .env (其他项目)

# Supabase配置
NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

# 本地开发使用本地服务
SUPABASE_URL=http://localhost:54321
SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# 从本地服务获取
supabase status

# 或从Supabase Dashboard获取
# Settings > API > Project API keys

# .gitignore 添加
.env
.env.local
.env.*.local

# 永远不要提交密钥到代码仓库

// test-connection.ts
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.SUPABASE_URL!
const supabaseKey = process.env.SUPABASE_ANON_KEY!

const supabase = createClient(supabaseUrl, supabaseKey)

async function testConnection() {
  try {
    const { data, error } = await supabase.from('_test').select('*').limit(1)
    
    if (error && error.code === '42P01') {
      console.log('✅ 连接成功！测试表不存在是正常的。')
    } else if (error) {
      console.error('❌ 连接失败:', error.message)
    } else {
      console.log('✅ 连接成功！')
    }
  } catch (err) {
    console.error('❌ 连接异常:', err)
  }
}

testConnection()

# 使用ts-node运行
npx ts-node test-connection.ts

# 或编译后运行
npx tsc test-connection.ts
node test-connection.js

# 确保Docker正在运行
docker ps

# 如果Docker未运行
# macOS: 打开Docker Desktop
# Linux: sudo systemctl start docker

# 重置本地环境
supabase stop --no-backup
supabase start

# 检查端口占用
lsof -i :54321
lsof -i :54322
lsof -i :54323

# 修改config.toml中的端口配置

# 更新CLI
npm update -g supabase

# 或使用Homebrew
brew upgrade supabase