petty09190/wish-pool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
wish-pool/VERCEL-DEPLOYMENT.md
吳佩庭 1bb7c67f7c 修改標籤樣式
2025-07-19 02:47:06 +08:00

4.9 KiB
Raw Permalink Blame History

心願星河 - Vercel 部署指南

📋 部署前检查清单

1. 数据库准备

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

2. 代码准备

  • ✅ 代码已推送到 GitHub
  • ✅ 项目可以在本地正常运行
  • ✅ 构建命令可以成功执行

🚀 Vercel 部署步骤

第一步：连接 GitHub

  1. 访问 Vercel 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 项目设置中添加以下环境变量：

必要的环境变量

# 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
  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 元标签

数据库连接测试

# 可以在本地测试生产环境的连接
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. 分析和监控

# 可选：添加分析工具
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 项目已配置
  • 环境变量已设置
  • 部署成功
  • 功能测试通过
  • 域名已配置