【前端】使用Vercel部署前端项目,api转发到后端服务器

文章目录

Vercel是什么

Vercel是一款专为前端开发者打造的云部署平台,它支持一键部署静态网站、AI工具和现代Web应用。Vercel的设计哲学是让开发者能更专注于代码本身,而不是繁琐的服务器配置。无论你是构建个人博客、AI项目演示平台,还是全栈Web应用,Vercel都能提供高效的部署体验。

Vercel由Next.js的团队开发,因此它对React生态尤其友好。平台支持自动构建和部署,CI/CD流程一站集成,适用于开发者、AI项目团队、产品经理等多个群体。目前,越来越多的AI工具也选择通过Vercel部署前端页面,实现快速访问和分发。

Vercel非常适合开发者、AI创作者、自由职业者等人群部署博客、文档站、教程类网站。

概要

本文介绍前端通过Vercel部署,后端服务在阿里云上,所以需要通过nginx来解决跨域和转发等问题。

Vercel部署分为两种方案:

  1. 已将代码推送到 GitHub、GitLab 或 Bitbucket 仓库
  2. 本地代码不准备开源,在本地构建好通过Vercel Cli来上传部署

一、使用GitHub构建部署

  1. 准备项目
    确保你的 Next.js 项目中有正确的配置:
    • package.json 中包含 next 依赖
    • 有正确的启动脚本(通常 Next.js 项目默认已配置)
  2. 登录 Vercel
    访问 Vercel 官网 并使用你的 GitHub 账号登录。
  3. 导入项目
    点击 dashboard 上的 "New Project" 按钮
    选择你存放 Next.js 项目的 Git 仓库
    点击 "Import" 导入项目
  4. 配置部署选项
    Vercel 会自动检测 Next.js 项目并配置默认设置,通常无需修改:
    • Framework Preset: 自动选择 "Next.js"
    • Build Command: 默认为 next build
    • Output Directory: 自动配置
    • 可以根据需要添加环境变量(如 API 密钥等)
  5. 部署项目
    点击 "Deploy" 按钮开始部署过程,Vercel 会:
    • 克隆你的代码仓库
    • 安装依赖
    • 构建项目
    • 部署应用

部署完成后,你会获得一个自动生成的 URL(格式为 your-project-name.vercel.app),通过该 URL 可以访问你的应用。

二、通过 Vercel CLI 上传本地构建资源

  1. 安装 Vercel CLI
bash 复制代码
npm install -g vercel
  1. 部署构建目录
    进入项目根目录,直接部署构建好的文件夹(如 dist):
bash 复制代码
vercel dist

注意事项

  1. 构建产物的兼容性
    确保构建产物是静态资源(HTML、CSS、JS、图片等),且路径引用正确(避免绝对路径导致的 404 问题)。
  2. 缓存与更新
    部署后,Vercel 会自动缓存静态资源。若需强制更新,可通过 CLI 重新上传部署。

转发API到后端

部署到 Vercel 后,请求转发由 vercel.json 配置文件控制,需同步更新后端地址和端口。

  1. 在根目录下创建vercel.json文件。(与src同级)
bash 复制代码
{
  "rewrites": [
    {
      "source": "/api/:path*",  // 匹配所有以 /api 开头的请求
      // 替换为新的后端服务器地址和端口(需与开发环境保持一致的路径规则)
      "destination": "http://新的IP地址:新的端口/:path*"  // 例如: https://api.new-domain.com/:path*
    }
  ]
}
  1. 重新部署到 Vercel(若用 CLI:vercel dist --prod;若用 Git:推送 vercel.json 变更)。


注意最后一行,将静态资源转发到入口文件index.html

小结

需要注意的是,vercel分配的域名,有可能国内正常访问不了,需要通过科学上网等方案。通过绑定你自己的国内可正常解析的域名(如从阿里云、腾讯云等国内服务商购买的域名),绕开 Vercel 默认域名的访问限制,这是目前最稳定的解决方式。

  1. 确保新的后端服务器允许公网访问(需配置防火墙、端口映射,或使用域名)。
  2. 若后端有跨域限制,需在后端服务器(如 Nginx)的 CORS 配置中添加新的 Vercel 域名(例如 https://your-project.vercel.app)。
  3. 若需临时切换后端地址(如测试环境 / 生产环境),可通过环境变量动态配置(推荐用于多环境管理):
    • 在 vite.config.js 中使用 process.env.VITE_API_TARGET 作为代理目标。
    • 在 vercel.json 中通过 Vercel 控制台的「环境变量」配置后端地址,再通过模板语法引用。
相关推荐
fendouweiqian2 小时前
nginx 反向代理使用变量的坑
运维·nginx
W-GEO2 小时前
Nginx 高性能调优指南:从配置到原理
运维·nginx
给月亮点灯|3 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
pound1273 小时前
Linux
linux·运维·服务器
张迅之3 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
@CLoudbays_Martin113 小时前
为什么动态视频业务内容不可以被CDN静态缓存?
java·运维·服务器·javascript·网络·python·php
蔗理苦4 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
盟接之桥5 小时前
盟接之桥说制造:在安全、确定与及时之间,构建品质、交期与反应速度的动态平衡
大数据·运维·安全·汽车·制造·devops
learning_tom5 小时前
HTML图片标签及路径详解
linux·服务器·php