部署指南

Hey，同学！代码写完了，想让全世界都能看到你的网站吗？这一篇教你一键部署到 Vercel～ ✨

🤔 为什么选择 Vercel？

📦 部署步骤

步骤 1：推送代码到 Git

# 初始化 git（如果还没有）
git init
git add .
git commit -m "feat: initial commit"

# 关联远程仓库
git remote add origin https://github.com/yourusername/iflux-art.git

# 推送
git push -u origin main

步骤 2：在 Vercel 导入项目

1. 打开 vercel.com
2. 点击 Add New → Project
3. 选择你的 Git 仓库
4. 配置项目：

Framework Preset: Next.js
Build Command: pnpm build
Output Directory: .next
Install Command: pnpm install

步骤 3：配置环境变量

在 Vercel 项目设置中添加环境变量：

NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_xxx
SUPABASE_SERVICE_KEY=xxx
# ... 其他变量

步骤 4：部署！

点击 Deploy，等待构建完成...

🎉 搞定！你有了线上站点！

🌐 域名配置

默认域名

Vercel 会给你一个免费子域名，比如：your-project.vercel.app

自定义域名（可选）

1. 购买域名（阿里云、腾讯云、Namecheap...）
2. 在 Vercel 项目设置 → Domains
3. 添加你的域名
4. 按照指引配置 DNS 记录

# 常见配置
Type: A
Name: @ (或 www)
Value: 76.76.21.21

配置子域名

Type: CNAME
Name: docs
Value: cname.vercel-dns.com

🔄 自动部署

每次你推送代码到 Git，Vercel 会自动：

1. 拉取最新代码
2. 安装依赖
3. 构建项目
4. 部署到全球 CDN

部署分支

• main → 生产环境
• 其他分支 → 预览环境

每个 Pull Request 都会自动创建一个预览链接，方便 review！

⚠️ 注意事项

1. 构建超时

如果项目比较大，可能超时。在 vercel.json 中配置：

{
  "buildCommand": "pnpm build",
  "installCommand": "pnpm install --frozen-lockfile"
}

2. 函数超时

Vercel Serverless 函数有 10 秒超时。如果有耗时操作，考虑：

• 拆分成小函数
• 使用 Edge Functions
• 迁移到其他服务

3. 带宽限制

免费版每月 100GB，够用但不宽裕。如果有大量图片/视频，考虑：

• 用 Cloudflare R2 作为图床
• 开启图片优化
• 使用 CDN 加速

🔧 多项目部署

iFluxArt 是 monorepo，每个 app 都要单独部署：

每个 app 在 Vercel 中是独立项目，独立配置、独立域名。

📊 监控和调试

查看部署日志

在 Vercel Dashboard → Deployments 可以看到每次部署的：

• 构建日志
• 警告和错误
• 构建时间

使用 Sentry 监控

项目已集成 Sentry，生产环境错误会自动收集：

SENTRY_DSN=https://xxx@sentry.io/xxx

💡 常见问题

Q: 构建失败怎么办？

1. 检查部署日志
2. 常见问题：依赖版本不对、环境变量缺失
3. 本地先 pnpm build 确认能跑通

Q: 访问很慢？

1. 检查是否有大型资源未优化
2. 考虑使用 Edge Functions
3. 开启 Vercel Analytics

Q: 想回滚到之前的版本？

在 Vercel 的 Deployments 列表中，点击之前的部署 → Promote to Production

🔗 下一步

• 监控告警 —— 设置 Sentry 监控
• CDN 配置 —— 优化访问速度
• SEO 优化 —— 让搜索引擎更好地收录