后端篇:手把手教你将 Node.js + Express 项目免费部署到 Render

5 阅读3分钟

前端部署到 Vercel 后,后端 API 怎么办?

Vercel 虽然也支持 Serverless Functions,但对于一个完整的 Express 应用来说,部署到专门的云平台更合适。

Render 是目前对个人开发者最友好的免费后端托管平台。本文将带你一步步把 Node.js + Express 项目部署到 Render,并涵盖所有生产环境必须注意的配置。

一、前置准备

准备项说明
Node.js 项目Express、Koa 或任何 Node.js 框架
package.json必须包含 start 脚本
代码已推送到 GitHubRender 通过 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 注册与登录

  1. 打开 render.com
  2. 点击右上角 "Sign Up"
  3. 选择 "GitHub" 授权登录
  4. 授权后跳转到 Dashboard

四、部署 Node.js 项目

方式一:通过 Dashboard 手动部署

步骤 1:创建 Web Service

  1. 在 Dashboard 点击 "New +""Web Service"
  2. 选择 "Build and deploy from a Git repository"
  3. 连接你的 GitHub 账号,选择要部署的仓库

步骤 2:配置服务

配置项填写内容说明
Nameyour-api服务名称,会生成 your-api.onrender.com
Root Directory留空 或 backend如果项目根目录就是后端代码,留空
EnvironmentNodeRender 会自动检测
Build Commandnpm install安装依赖
Start Commandnpm start启动服务

步骤 3:添加环境变量

Environment Variables 区域添加所有需要的环境变量:

变量名说明
NODE_ENVproduction生产环境标识
PORT3000备用端口(Render 会覆盖)
DATABASE_URLxxx数据库连接地址
JWT_SECRETxxxJWT 密钥
API_KEYxxx第三方 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 配置

进入服务页面 → EnvironmentEnvironment 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 数据库连接失败

原因:数据库地址配置错误,或数据库服务未启动。

解决

  1. 检查 DATABASE_URL 环境变量是否正确
  2. 确认数据库服务是否允许外部连接

十、总结

Render 部署 Node.js 项目的核心流程:

  1. 代码准备:添加 start 脚本 + 监听 process.env.PORT + 健康检查
  2. 代码推送到 GitHub
  3. Render 创建 Web Service → 连接 GitHub 仓库
  4. 配置构建命令 + 环境变量
  5. 点击 Deploy → 获得 onrender.com 域名

成本:完全免费(但有休眠限制)。

前后端配合

  • 前端(Vercel):https://your-frontend.vercel.app
  • 后端(Render):https://your-backend.onrender.com
  • 前端通过 VITE_API_URL 环境变量指向后端地址