Skip to main content

Vercel 部署指南

本项目已配置好 Vercel 部署，按照以下步骤即可完成部署。

一、准备工作​

1. 安装 Vercel CLI（可选）​

npm i -g vercel

2. 确保代码已推送到 Git 仓库​

确保您的代码已推送到 GitHub、GitLab 或 Bitbucket。

二、通过 Vercel 网站部署（推荐）​

1. 登录 Vercel​

访问 vercel.com 并登录（可以使用 GitHub 账号）。

2. 导入项目​

  1. 点击 "Add New..." → "Project"
  2. 选择您的 Git 仓库：difyz9/go-analysis-frontend
  3. Vercel 会自动检测到这是一个 Next.js 项目

3. 配置环境变量​

在项目设置页面，添加以下环境变量：

Environment Variables:

  • Name: NEXT_PUBLIC_API_URL
  • Value: http://124.222.202.16:8080（或您的实际生产环境 API 地址）
  • Environment: 选择 Production、Preview 和 Development（根据需要）

4. 部署设置​

Vercel 会自动识别以下配置（已在 vercel.json 中定义）：

  • Framework Preset: Next.js
  • Build Command: npm run build
  • Output Directory: .next
  • Install Command: npm install

5. 点击 "Deploy"​

等待几分钟，部署完成后会得到一个 .vercel.app 域名。

三、通过 CLI 部署（可选）​

1. 登录 Vercel​

vercel login

2. 部署到生产环境​

# 首次部署
vercel --prod

# 后续部署
vercel --prod

3. 设置环境变量​

vercel env add NEXT_PUBLIC_API_URL production
# 输入值: http://124.222.202.16:8080

四、自动部署配置​

连接 Git 仓库后，Vercel 会自动：

  • 主分支（main/master）推送 → 自动部署到生产环境
  • 其他分支推送 → 自动创建预览部署
  • Pull Request → 自动创建预览链接

五、环境变量说明​

本项目使用以下环境变量：

变量名说明示例值
NEXT_PUBLIC_API_URL后端 API 地址http://124.222.202.16:8080

注意：

  • 以 NEXT_PUBLIC_ 开头的变量会暴露到浏览器端
  • 在 Vercel 控制台中配置的环境变量会覆盖 .env 文件

六、自定义域名（可选）​

在 Vercel 控制台：​

  1. 进入项目设置
  2. 点击 "Domains"
  3. 添加您的自定义域名
  4. 按照提示配置 DNS 记录

七、常见问题​

1. 构建失败​

  • 检查 package.json 中的依赖是否正确
  • 查看构建日志，确认错误信息
  • 确保 TypeScript 和 ESLint 错误已处理（已在 next.config.ts 中配置忽略）

2. API 请求失败​

  • 检查环境变量 NEXT_PUBLIC_API_URL 是否正确配置
  • 确认后端 API 服务器允许来自 Vercel 域名的 CORS 请求
  • 可能需要在后端配置白名单：*.vercel.app

3. 环境变量不生效​

  • 确保变量名以 NEXT_PUBLIC_ 开头（客户端访问）
  • 修改环境变量后需要重新部署
  • 在 Vercel 控制台检查环境变量是否正确设置

八、性能优化建议​

1. 启用边缘缓存​

在 Vercel 控制台中启用边缘缓存以提高访问速度。

2. 配置 CDN​

静态资源会自动通过 Vercel 的全球 CDN 分发。

3. 设置区域​

默认部署到香港区域（hkg1），可在 vercel.json 中修改：

{
  "regions": ["hkg1", "sin1"]  // 香港、新加坡
}

九、监控和日志​

访问部署日志：​

  1. 在 Vercel 控制台选择项目
  2. 点击 "Deployments"
  3. 选择具体部署查看日志

运行时日志：​

  1. 在项目中点击 "Logs"
  2. 查看实时请求和错误日志

十、回滚部署​

如果新版本有问题：

  1. 在 Vercel 控制台点击 "Deployments"
  2. 找到之前的稳定版本
  3. 点击 "..." → "Promote to Production"

快速命令参考​

# 安装 Vercel CLI
npm i -g vercel

# 登录
vercel login

# 部署到生产环境
vercel --prod

# 查看部署信息
vercel inspect

# 查看日志
vercel logs

# 添加环境变量
vercel env add NEXT_PUBLIC_API_URL production

# 列出环境变量
vercel env ls

相关链接​