部署指南

本文档将指导您如何将 Codofly Template 部署到 Vercel 生产环境。

Vercel 部署

连接 GitHub 仓库

1

登录 Vercel

访问 vercel.com 并使用 GitHub 账号登录

2

导入项目

点击 “New Project” → “Import Git Repository” → 选择你的项目仓库

3

配置项目

  • Framework Preset: 选择 “Next.js”
  • Build Command: pnpm build
  • Install Command: pnpm install
4

部署

点击 “Deploy” 开始部署

环境变量配置

在 Vercel 项目设置中添加以下环境变量:

# 数据库
DATABASE_URL=your_production_database_url

# NextAuth
NEXTAUTH_URL=https://your-domain.vercel.app
NEXTAUTH_SECRET=your_production_secret

# OAuth 提供商
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

# Stripe
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret

# AI 服务
OPENAI_API_KEY=your_openai_api_key
ANTHROPIC_API_KEY=your_anthropic_api_key

自定义域名

1

添加域名

在 Vercel 项目设置 → Domains 中添加你的域名

2

配置 DNS

在域名提供商处添加 CNAME 记录指向 Vercel

3

验证

等待 DNS 生效并验证域名

数据库部署

Vercel Postgres

# 安装 Vercel Postgres
pnpm add @vercel/postgres

# 在 Vercel 控制台创建数据库
# 获取连接字符串并添加到环境变量
DATABASE_URL=postgres://user:pass@host:port/db?sslmode=require

Neon 数据库

# 1. 在 neon.tech 创建数据库
# 2. 获取连接字符串
DATABASE_URL=postgresql://user:pass@host/db?sslmode=require

# 3. 运行迁移
npx prisma migrate deploy

生产环境迁移

# 部署数据库迁移
npx prisma migrate deploy

# 生成 Prisma Client
npx prisma generate

# 添加种子数据(可选)
npx prisma db seed

必需环境变量

核心变量

DATABASE_URL=           # 数据库连接
NEXTAUTH_URL=          # 应用域名
NEXTAUTH_SECRET=       # JWT 签名密钥(随机字符串)

第三方服务

# OAuth
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

# 支付
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=

# AI 服务
OPENAI_API_KEY=
ANTHROPIC_API_KEY=

安全配置建议

  • 使用强随机密钥作为 NEXTAUTH_SECRET
  • 在生产环境中禁用调试模式
  • 定期轮换 API 密钥
  • 限制 OAuth 回调 URL

性能优化

构建优化

title="next.config.js"
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    ppr: true,
  },
  compress: true,
  poweredByHeader: false,
  images: {
    domains: ['your-image-domains.com'],
  },
}

module.exports = nextConfig

缓存策略

title="app/api/users/route.ts"
export async function GET() {
  const users = await prisma.user.findMany()
  
  return NextResponse.json(
    { data: users },
    {
      headers: {
        'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=300'
      }
    }
  )
}

常见问题

部署失败

# 检查构建日志
# 确保所有依赖已安装
# 检查环境变量配置

数据库连接失败

# 检查 DATABASE_URL 格式
# 确保数据库允许外部连接
# 运行数据库迁移

域名无法访问

# 检查 DNS 配置
# 确保 NEXTAUTH_URL 正确
# 清除浏览器缓存

部署完成后,建议进行完整的功能测试,确保所有功能正常工作。