修改標籤樣式

VERCEL-DEPLOYMENT.md

@@ -0,0 +1,185 @@
+# 心願星河 - 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 项目已配置
+- [ ] 环境变量已设置
+- [ ] 部署成功
+- [ ] 功能测试通过
+- [ ] 域名已配置