# 心願星河 - Vercel 部署指南

## 📋 部署前检查清单

### 1. 数据库准备
- ✅ Supabase 项目已创建并配置
- ✅ 数据库表格已创建（运行过所有 SQL 脚本）
- ✅ Storage 桶已设置
- ✅ RLS 政策已配置

### 2. 代码准备
- ✅ 代码已推送到 GitHub
- ✅ 项目可以在本地正常运行
- ✅ 构建命令可以成功执行

## 🚀 Vercel 部署步骤

### 第一步：连接 GitHub
1. 访问 [Vercel Dashboard](https://vercel.com/dashboard)
2. 点击 "New Project"
3. 从 GitHub 选择 `wish-pool` 仓库
4. 点击 "Import"

### 第二步：项目配置
**Framework Preset**: Next.js
**Root Directory**: `./`
**Build Command**: `npm run build`
**Output Directory**: `.next`（默认，无需修改）

### 第三步：环境变量设置 ⚠️ 重要
在 Vercel 项目设置中添加以下环境变量：

#### 必要的环境变量
```env
# Supabase 配置 (必需)
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

# 生产环境 URL (必需修改)
NEXT_PUBLIC_APP_URL=https://your-app-name.vercel.app

# Supabase Service Role Key (可选，用于管理功能)
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
```

#### 🔧 如何获取 Supabase 配置
1. 访问 [Supabase Dashboard](https://app.supabase.com/)
2. 选择您的项目
3. 进入 Settings → API
4. 复制以下值：
   - **Project URL** → `NEXT_PUBLIC_SUPABASE_URL`
   - **Anon public** → `NEXT_PUBLIC_SUPABASE_ANON_KEY`
   - **Service role** → `SUPABASE_SERVICE_ROLE_KEY`

#### 🌐 设置生产环境 URL
部署完成后，Vercel 会给您一个域名，例如：
- 临时域名：`https://wish-pool-abcd1234.vercel.app`
- 自定义域名：`https://your-custom-domain.com`

将这个域名设置为 `NEXT_PUBLIC_APP_URL` 的值。

### 第四步：执行部署
1. 确认所有设置正确
2. 点击 "Deploy"
3. 等待部署完成（通常 2-5 分钟）

## 🎯 部署后配置

### 1. 更新环境变量
部署成功后，获取 Vercel 分配的域名，然后：
1. 进入 Vercel 项目设置
2. 找到 Environment Variables
3. 编辑 `NEXT_PUBLIC_APP_URL`
4. 设置为实际的生产域名
5. 重新部署（可选，如果应用需要这个变量）

### 2. Supabase 域名配置
在 Supabase Dashboard 中：
1. 进入 Authentication → Settings
2. 添加您的 Vercel 域名到 Site URL
3. 添加到 Redirect URLs（如果有登录功能）

## ✅ 部署后验证

### 功能测试
- [ ] 访问主页是否正常加载
- [ ] 提交困扰案例功能
- [ ] 查看公开困扰功能
- [ ] 点赞功能是否正常
- [ ] 图片上传功能
- [ ] 背景音乐控制
- [ ] 响应式设计在不同设备

### 性能检查
- [ ] 页面加载速度
- [ ] 图片显示正常
- [ ] API 调用响应时间
- [ ] SEO 元标签

### 数据库连接测试
```bash
# 可以在本地测试生产环境的连接
NEXT_PUBLIC_SUPABASE_URL=your_production_url \
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_production_key \
npm run dev
```

## 🔧 常见问题解决

### 1. 构建失败
**错误**: `Module not found` 或类型错误
**解决**: 检查所有依赖是否已安装，运行 `npm install`

### 2. Supabase 连接失败
**错误**: 401 Unauthorized 或连接超时
**解决**: 
- 检查环境变量是否正确设置
- 确认 Supabase 项目状态是否正常
- 验证 API 密钥是否有效

### 3. 图片上传失败
**错误**: Storage 相关错误
**解决**:
- 检查 Storage 桶是否已创建
- 确认 RLS 政策是否正确配置
- 验证 CORS 设置

### 4. 环境变量未生效
**错误**: 环境变量读取为 undefined
**解决**:
- 确保变量名以 `NEXT_PUBLIC_` 开头（客户端变量）
- 重新部署项目
- 检查变量值中没有多余的空格或引号

## 📈 生产环境优化

### 1. 自定义域名设置
1. 在 Vercel 项目设置中点击 "Domains"
2. 添加您的自定义域名
3. 配置 DNS 记录
4. 更新 `NEXT_PUBLIC_APP_URL` 环境变量

### 2. 分析和监控
```env
# 可选：添加分析工具
NEXT_PUBLIC_GOOGLE_ANALYTICS=GA_MEASUREMENT_ID
NEXT_PUBLIC_VERCEL_ANALYTICS=true
```

### 3. 安全配置
- 启用 HTTPS（Vercel 自动配置）
- 配置适当的 CORS 政策
- 设置合适的 CSP 标头

## 🚨 重要提醒

1. **环境变量安全**：
   - 不要在客户端代码中暴露 Service Role Key
   - 只有 `NEXT_PUBLIC_` 开头的变量可以在浏览器中访问

2. **数据备份**：
   - 部署前确保 Supabase 数据已备份
   - 保存环境变量配置的副本

3. **测试环境**：
   - 建议先在 Preview 环境测试
   - 确认所有功能正常后再推广到生产环境

## 📞 支持

如果遇到部署问题，请检查：
1. Vercel 部署日志
2. Supabase 项目状态
3. 浏览器控制台错误
4. 网络连接状况

---

**快速部署检查表**：
- [ ] GitHub 代码已推送
- [ ] Supabase 项目已配置
- [ ] 环境变量已设置
- [ ] 部署成功
- [ ] 功能测试通过
- [ ] 域名已配置