【前端】使用Vercel部署前端项目，api转发到后端服务器
文章目录
- Vercel是什么
- 概要
- Vercel部署分为两种方案：
- 一、使用GitHub构建部署
- 二、通过 Vercel CLI 上传本地构建资源
- 注意事项
- 转发API到后端
- 小结
Vercel是什么
Vercel是一款专为前端开发者打造的云部署平台，它支持一键部署静态网站、AI工具和现代Web应用。Vercel的设计哲学是让开发者能更专注于代码本身，而不是繁琐的服务器配置。无论你是构建个人博客、AI项目演示平台，还是全栈Web应用，Vercel都能提供高效的部署体验。
Vercel由Next.js的团队开发，因此它对React生态尤其友好。平台支持自动构建和部署，CI/CD流程一站集成，适用于开发者、AI项目团队、产品经理等多个群体。目前，越来越多的AI工具也选择通过Vercel部署前端页面，实现快速访问和分发。
Vercel非常适合开发者、AI创作者、自由职业者等人群部署博客、文档站、教程类网站。
概要
本文介绍前端通过Vercel部署，后端服务在阿里云上，所以需要通过nginx来解决跨域和转发等问题。
Vercel部署分为两种方案：
- 已将代码推送到 GitHub、GitLab 或 Bitbucket 仓库
- 本地代码不准备开源，在本地构建好通过Vercel Cli来上传部署
一、使用GitHub构建部署
- 准备项目
确保你的 Next.js 项目中有正确的配置：- package.json 中包含 next 依赖
- 有正确的启动脚本（通常 Next.js 项目默认已配置）
- 登录 Vercel
访问 Vercel 官网 并使用你的 GitHub 账号登录。 - 导入项目
点击 dashboard 上的 “New Project” 按钮
选择你存放 Next.js 项目的 Git 仓库
点击 “Import” 导入项目 - 配置部署选项
Vercel 会自动检测 Next.js 项目并配置默认设置，通常无需修改：- Framework Preset: 自动选择 “Next.js”
- Build Command: 默认为 next build
- Output Directory: 自动配置
- 可以根据需要添加环境变量（如 API 密钥等）
- 部署项目
点击 “Deploy” 按钮开始部署过程，Vercel 会：- 克隆你的代码仓库
- 安装依赖
- 构建项目
- 部署应用
部署完成后，你会获得一个自动生成的 URL（格式为 your-project-name.vercel.app），通过该 URL 可以访问你的应用。
二、通过 Vercel CLI 上传本地构建资源
- 安装 Vercel CLI
npm install -g vercel
- 部署构建目录
进入项目根目录，直接部署构建好的文件夹（如 dist）：
vercel dist
注意事项
- 构建产物的兼容性
确保构建产物是静态资源（HTML、CSS、JS、图片等），且路径引用正确（避免绝对路径导致的 404 问题）。 - 缓存与更新
部署后，Vercel 会自动缓存静态资源。若需强制更新，可通过 CLI 重新上传部署。
转发API到后端
部署到 Vercel 后，请求转发由 vercel.json 配置文件控制，需同步更新后端地址和端口。
- 在根目录下创建vercel.json文件。（与src同级）
{"rewrites": [{"source": "/api/:path*", // 匹配所有以 /api 开头的请求// 替换为新的后端服务器地址和端口（需与开发环境保持一致的路径规则）"destination": "http://新的IP地址:新的端口/:path*" // 例如: https://api.new-domain.com/:path*}]
}
- 重新部署到 Vercel（若用 CLI：vercel dist --prod；若用 Git：推送 vercel.json 变更）。
注意最后一行，将静态资源转发到入口文件index.html
小结
需要注意的是，vercel分配的域名，有可能国内正常访问不了，需要通过科学上网等方案。通过绑定你自己的国内可正常解析的域名（如从阿里云、腾讯云等国内服务商购买的域名），绕开 Vercel 默认域名的访问限制，这是目前最稳定的解决方式。
- 确保新的后端服务器允许公网访问（需配置防火墙、端口映射，或使用域名）。
- 若后端有跨域限制，需在后端服务器（如 Nginx）的 CORS 配置中添加新的 Vercel 域名（例如 https://your-project.vercel.app）。
- 若需临时切换后端地址（如测试环境 / 生产环境），可通过环境变量动态配置（推荐用于多环境管理）：
- 在 vite.config.js 中使用 process.env.VITE_API_TARGET 作为代理目标。
- 在 vercel.json 中通过 Vercel 控制台的「环境变量」配置后端地址，再通过模板语法引用。