前端部署到 Vercel 后,后端 API 怎么办?
Vercel 虽然也支持 Serverless Functions,但对于一个完整的 Express 应用来说,部署到专门的云平台更合适。
Render 是目前对个人开发者最友好的免费后端托管平台。本文将带你一步步把 Node.js + Express 项目部署到 Render,并涵盖所有生产环境必须注意的配置。
一、前置准备
| 准备项 | 说明 |
|---|---|
| Node.js 项目 | Express、Koa 或任何 Node.js 框架 |
| package.json | 必须包含 start 脚本 |
| 代码已推送到 GitHub | Render 通过 GitHub 仓库部署 |
| Render 账号 | 用 GitHub 账号注册即可 |
二、代码层面的准备工作
在部署之前,确保你的代码做了以下三件事。这三件事不做,部署大概率失败。
2.1 添加 start 脚本
Render 需要通过 package.json 中的 start 命令来启动应用:
{
"scripts": {
"start": "node index.js"
}
}
如果你的入口文件是 src/index.js:
{
"scripts": {
"start": "node src/index.js"
}
}
如果使用 TypeScript 编译到 dist/:
{
"scripts": {
"build": "tsc",
"start": "node dist/index.js"
}
}
2.2 监听动态端口(最关键!)
Render 会动态分配端口,你的应用必须从 process.env.PORT 读取端口号:
// ❌ 错误写法(硬编码端口)
app.listen(3000)
// ✅ 正确写法(读取动态端口)
const PORT = process.env.PORT || 3000
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`)
})
如果不改,部署后会出现 502 错误,因为 Render 无法将外部流量路由到你的应用。
2.3 添加健康检查接口(强烈推荐)
Render 可以通过健康检查判断服务是否正常运行:
// index.js
app.get('/health', (req, res) => {
res.json({ status: 'ok', timestamp: new Date().toISOString() })
})
部署后在 Render Dashboard 的 Settings 中配置 Health Check Path 为 /health。
三、Render 注册与登录
- 打开 render.com
- 点击右上角 "Sign Up"
- 选择 "GitHub" 授权登录
- 授权后跳转到 Dashboard
四、部署 Node.js 项目
方式一:通过 Dashboard 手动部署
步骤 1:创建 Web Service
- 在 Dashboard 点击 "New +" → "Web Service"
- 选择 "Build and deploy from a Git repository"
- 连接你的 GitHub 账号,选择要部署的仓库
步骤 2:配置服务
| 配置项 | 填写内容 | 说明 |
|---|---|---|
| Name | your-api | 服务名称,会生成 your-api.onrender.com |
| Root Directory | 留空 或 backend | 如果项目根目录就是后端代码,留空 |
| Environment | Node | Render 会自动检测 |
| Build Command | npm install | 安装依赖 |
| Start Command | npm start | 启动服务 |
步骤 3:添加环境变量
在 Environment Variables 区域添加所有需要的环境变量:
| 变量名 | 值 | 说明 |
|---|---|---|
NODE_ENV | production | 生产环境标识 |
PORT | 3000 | 备用端口(Render 会覆盖) |
DATABASE_URL | xxx | 数据库连接地址 |
JWT_SECRET | xxx | JWT 密钥 |
API_KEY | xxx | 第三方 API Key |
步骤 4:点击 Deploy
点击 "Create Web Service",Render 开始构建和部署。
方式二:通过 render.yaml 自动部署(推荐)
在项目根目录创建 render.yaml,实现基础设施即代码(IaC):
services:
- type: web
name: review-backend
runtime: node
plan: free
buildCommand: npm install
startCommand: node src/index.js
healthCheckPath: /health
envVars:
- key: NODE_ENV
value: production
- key: PORT
value: 3000
- key: DATABASE_URL
sync: false
- key: JWT_SECRET
sync: false
- key: API_KEY
sync: false
sync: false表示该变量需要在 Render Dashboard 中手动填写,不提交到仓库。
提交代码后,在 Render 选择 "Blueprint" 方式部署,Render 会自动读取 render.yaml 并创建服务。
五、环境变量配置详解
5.1 在 Dashboard 配置
进入服务页面 → Environment → Environment Variables → + Add Environment Variable
5.2 敏感变量不要提交到仓库
# .gitignore
.env
.env.production
.env.local
所有敏感信息(API Key、数据库密码、JWT 密钥)都通过 Render Dashboard 配置,绝对不要提交到 GitHub。
5.3 指定 Node.js 版本
Render 默认使用特定 Node 版本,如果需要指定版本:
方式一:在项目根目录创建 .node-version 文件:
20.18.0
方式二:在 Dashboard 添加环境变量 NODE_VERSION=20.18.0
六、数据库配置(以 Supabase 为例)
如果项目使用 Supabase 作为数据库:
# Render 环境变量
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_KEY=your-supabase-anon-key
注意:Supabase 的 anon key 可以暴露在前端(有 RLS 保护),但 service_role key 绝对不能泄露,只能在服务端使用。
七、⚠️ Render 免费套餐的坑(必看!)
Render 免费套餐有几个重要限制,上线前必须了解:
7.1 服务休眠(Cold Start)
问题:免费套餐的 Web Service 在 15 分钟无请求后会自动休眠。
影响:休眠后第一次访问需要 30-60 秒 的冷启动时间。
解决方案:
- 使用第三方服务(如 UptimeRobot、cron-job.org)每 10 分钟 ping 一次
/health接口 - 或升级到付费套餐($7/月起,无休眠)
7.2 数据库限制
问题:Render 的免费 PostgreSQL 数据库在 第 91 天会被永久删除。
解决方案:
- 使用 Supabase 免费数据库(更稳定)
- 定期备份数据
7.3 文件存储限制
问题:免费套餐不支持持久化文件存储,每次重新部署文件都会丢失。
解决方案:使用云存储服务(如 AWS S3、Cloudinary、Supabase Storage)。
7.4 无法调试
问题:免费套餐无法通过 SSH 进入容器调试。
解决方案:在代码中增加详细的日志输出,通过 Render 的 Logs 面板查看。
八、前后端联调
8.1 获取 Render 后端地址
部署成功后,Render 会分配一个 onrender.com 域名,例如:
https://review-backend.onrender.com
8.2 配置前端环境变量
在 Vercel 的项目设置中,添加环境变量:
VITE_API_URL=https://review-backend.onrender.com/api
然后重新部署前端(因为 Vite 在构建时注入环境变量)。
九、常见问题与踩坑
9.1 部署成功但访问返回 502
原因:应用没有监听 process.env.PORT。
解决:参考 2.2 节修改代码。
9.2 部署后一直显示 "Building"
原因:package.json 中缺少 start 脚本。
解决:添加 "start": "node index.js"。
9.3 环境变量在代码中取不到
原因:变量名写错,或在 Dashboard 配置后没有重新部署。
解决:检查变量名是否一致,配置后点击 "Manual Deploy" → "Deploy latest commit"。
9.4 跨域问题
前端请求后端 API 时出现 CORS 错误。
解决:在后端配置 CORS:
npm install cors
const cors = require('cors')
app.use(cors())
9.5 数据库连接失败
原因:数据库地址配置错误,或数据库服务未启动。
解决:
- 检查
DATABASE_URL环境变量是否正确 - 确认数据库服务是否允许外部连接
十、总结
Render 部署 Node.js 项目的核心流程:
- 代码准备:添加
start脚本 + 监听process.env.PORT+ 健康检查 - 代码推送到 GitHub
- Render 创建 Web Service → 连接 GitHub 仓库
- 配置构建命令 + 环境变量
- 点击 Deploy → 获得
onrender.com域名
成本:完全免费(但有休眠限制)。
前后端配合:
- 前端(Vercel):
https://your-frontend.vercel.app - 后端(Render):
https://your-backend.onrender.com - 前端通过
VITE_API_URL环境变量指向后端地址