第 15 篇：部署方案选择：Vercel、Railway、Render、国内轻量服务器怎么选？

前端AI充电站
0 阅读10分钟

项目地址

说明：当前在线版本部署在 Vercel，国内网络访问可能不稳定。如果打不开，可以直接查看 GitHub 源码并在本地启动。

前言

上一篇我们给项目加上了质量门禁：

ESLint
Prettier
TypeScript strict
Husky
lint-staged

到这里，项目已经比较完整了。

它不再只是一个能跑的 AI Demo，而是一个具备一定工程结构的 AI 知识库问答应用：

Dify RAG 知识库
DeepSeek 模型
Vite React 前端
Express BFF
SSE 流式输出
Markdown 渲染
引用来源展示
多会话管理
停止生成
自定义 Hook
服务端分层
质量门禁

接下来很自然会遇到一个问题：

项目要部署到哪里？

我们尝试和讨论过几个方案：

Vercel
Render
Railway
国内轻量应用服务器

这篇文章不急着写具体部署命令，而是先分析：

对这个项目来说，这几种部署方式分别适合什么场景？怎么选最划算？

先看项目的部署特点

在选平台之前，先看项目本身是什么结构。

当前项目是：

Vite React 前端
+ Express BFF 后端
+ Dify streaming 代理

本地开发时是：

Browser
  ↓
Vite Dev Server
  ↓
Express /api/chat/stream
  ↓
Dify API
  ↓
DeepSeek + Knowledge Base

生产部署时，理想结构是：

用户浏览器
  ↓
Node / Express 服务
  ├─ 返回 React dist 静态文件
  └─ /api/chat/stream 代理 Dify SSE

也就是说，这个项目并不是一个纯静态前端项目。

它有几个关键要求：

1. 需要服务端保存 Dify API Key
2. 需要后端代理 Dify API
3. 最好支持 SSE 流式响应
4. 最好不要把前后端拆得太复杂
5. 如果面向国内用户，访问稳定性要考虑

所以它和普通 Vite 静态站不完全一样。

方案一：Vercel

Vercel 对前端开发者非常友好。

尤其是 Vite / React / Next.js 这类项目，部署体验很好。

优点

1. 上手非常简单
2. GitHub 连接方便
3. 免费 Hobby 计划适合个人项目
4. Vite 静态前端部署体验好
5. 自动生成线上预览地址
6. 适合作品展示

如果项目是纯前端，比如：

Vite React 静态页面
调用公开 API
无自定义 Node 服务

Vercel 非常合适。

缺点

但我们的项目有 Express BFF 和 SSE streaming。

Vercel 更适合 Serverless / Edge Functions，而不是长期运行的完整 Express 服务。

所以如果直接用 Vercel，需要做一些改造：

1. 把 Express 接口改成 Vercel API Route
2. 或者把线上版本降级成 blocking 模式
3. SSE 流式代理需要额外适配
4. 本地 Express 结构和线上 Serverless 结构不完全一致

另外，Vercel 默认的 *.vercel.app 域名在国内访问经常不稳定。

可能出现：

页面打不开
加载很慢
API 请求超时
流式响应不稳定

所以如果你的主要用户在国内，不能完全依赖 Vercel 默认域名。

当前项目怎么用 Vercel？

我最终的做法是：

Vercel 用作作品展示
线上版本可以先使用 blocking API
本地保留完整 Express streaming 版本

也就是说，Vercel 适合：

给面试官看项目链接
放 README 在线预览
快速验证前端页面

但不一定适合：

国内用户长期稳定访问
完整保留 Express streaming 生产能力

方案二：Render

Render 更像传统 PaaS。

它适合部署一个完整的 Node / Express Web Service。

对当前项目来说，Render 的结构非常匹配：

Express 服务
  ├─ 托管 Vite dist
  └─ 提供 /api/chat/stream

优点

1. 适合完整 Node / Express 服务
2. 可以保留 SSE streaming
3. 前后端可以合并成一个服务
4. 不用改成 Serverless
5. 配置 Build Command / Start Command 很直观

如果能顺利创建服务，Render 部署方式很清晰：

Build Command: npm install && npm run build
Start Command: npm run start

然后配置环境变量：

DIFY_API_KEY=xxx
DIFY_API_URL=https://api.dify.ai/v1/chat-messages
DIFY_USER=frontend-ai-assistant-prod

缺点

我们实际尝试时遇到一个问题：Render 要求绑定银行卡/信用卡。

页面提示会做 1 美元临时验证授权。

如果你不想绑卡，Render 就不太适合继续。

另外，Render 免费服务也可能有冷启动问题。

所以 Render 更适合：

可以接受绑卡验证
想部署完整 Node 服务
不想自己买服务器
项目只是个人作品或小型服务

方案三：Railway

Railway 和 Render 类似，也适合部署完整 Node 服务。

相比 Vercel，它更适合当前项目的 Express streaming 结构。

优点

1. 适合完整 Express 服务
2. 可以保留 streaming 版本
3. GitHub 导入比较方便
4. 环境变量配置简单
5. 比 Vercel 更接近本地运行方式

部署后结构仍然可以是：

Node Express
  ├─ 静态托管 dist
  └─ /api/chat/stream

不需要把 Express 改成 Vercel API Route。

缺点

Railway 不是永久免费。

它可能有试用额度，但长期使用要考虑费用。

另外，它在国内访问也不一定稳定，只是比 vercel.app 的问题稍微不同。

所以 Railway 适合：

想保留 Express streaming
不想自己维护服务器
接受平台用量计费
先试部署流程

方案四：国内轻量应用服务器

如果主要考虑国内访问稳定性，国内轻量服务器是最稳的方案。

比如：

腾讯云轻量应用服务器
阿里云轻量应用服务器
华为云云耀服务器

部署结构是：

用户浏览器
  ↓
Nginx :80 / :443
  ↓
Express :3001
  ├─ React dist
  └─ Dify streaming proxy

优点

1. 国内访问稳定
2. 可以完整保留 Express streaming
3. 可以自己控制 Nginx / PM2 / Node
4. 更接近真实生产部署
5. 可以学习 Linux、Nginx、PM2、CI/CD

如果你想继续提升全栈工程能力，服务器非常有学习价值。

你会接触到：

SSH 登录
Linux 命令
Node 运行环境
Nginx 反向代理
PM2 进程守护
防火墙端口
域名解析
HTTPS 证书
部署脚本
自动化发布
日志排查

这些都是前端往全栈 / 架构方向成长很有用的能力。

缺点

但如果只是为了部署这个 Demo，买服务器可能不划算。

它会带来额外成本：

服务器费用
时间成本
运维成本
安全配置
域名备案

如果只用 IP 访问，可以暂时不用备案。

但如果绑定国内域名正式对外访问，通常需要备案。

所以国内服务器更适合：

项目已经比较完整
想长期运行
想练 Linux / Nginx / PM2 / CI/CD
主要用户在国内
接受一定费用和运维成本

不太适合：

只是想临时展示一下 Demo
还不确定项目要不要继续做
不想花钱和维护服务器

为什么最后没有马上买服务器？

一开始我们确实准备买腾讯云轻量应用服务器。

推荐配置大概是：

Ubuntu 22.04
2 核 2G
40G SSD
3Mbps 带宽

这对当前项目完全够用，因为模型计算不在服务器上，服务器只负责：

静态页面
Express API
Dify SSE 转发

但后来重新判断了一下：

如果只是为了部署这个 Demo，暂时买服务器不划算。

因为后续学习还有很多内容可以先在本地完成：

数据库
用户系统
服务端会话存储
文件上传
知识库管理
监控
日志
Docker
CI/CD

等项目进一步完善后，再买服务器统一部署，性价比更高。

所以当前阶段更合理的选择是：

短期：Vercel 做作品展示
本地：继续完整开发 Express streaming 版本
后续：数据库、登录、文件上传完成后，再考虑国内服务器部署

这几个方案怎么选？

可以按目标来选。

只是想快速有个在线地址

选：

Vercel

适合：

作品展示
README 放链接
快速上线前端页面

但要接受：

国内访问不稳定
Express streaming 需要改造

想部署完整 Express 服务，又不想买服务器

选：

Railway 或 Render

适合：

保留 Express BFF
保留 streaming
不用自己运维 Linux

但要接受：

平台费用或绑卡验证
国内访问不一定稳定

想让国内稳定访问，并练部署运维

选：

国内轻量服务器

适合：

长期运行
完整部署链路
学习 Linux / Nginx / PM2
后续做 CI/CD

但要接受：

服务器费用
运维成本
域名备案问题

当前项目的推荐策略

我对这个项目的推荐策略是：

第一阶段：Vercel 展示 + 本地开发
第二阶段：本地接入 SQLite / Prisma
第三阶段：加入登录和服务端会话存储
第四阶段：再考虑国内轻量服务器
第五阶段：做 Docker + CI/CD 自动部署

这样学习路径更自然。

不要为了“部署”过早买服务器。

更合理的是：等项目真正需要长期运行、需要数据库、需要用户系统时，再把服务器当成完整工程能力的一部分来学。

不同平台对当前项目的适配总结

可以简单总结成一张表：

Vercel
- 优点：免费、简单、适合作品展示
- 缺点：国内访问不稳，Express streaming 需要改造
- 适合：展示版、前端页面、临时预览

Render
- 优点：适合完整 Node 服务，能保留 Express streaming
- 缺点：可能要求绑卡，免费服务有冷启动
- 适合：能接受绑卡的小型 Node 服务

Railway
- 优点：适合完整 Express 服务，部署体验简单
- 缺点：不是永久免费，国内访问不一定稳定
- 适合：想快速部署完整后端服务

国内轻量服务器
- 优点：国内访问稳定，完整可控，适合学习部署运维
- 缺点：要花钱，要维护，绑定域名需备案
- 适合：长期运行、完整生产化练习

如果用国内服务器，部署链路大概是什么？

虽然当前阶段先不买服务器，但可以先了解完整链路。

服务器上一般会安装：

Node.js
Git
Nginx
PM2

部署流程大概是：

# 拉代码
git clone https://github.com/hewq/dify-chat-demo.git

# 安装依赖
npm install

# 配置环境变量
nano .env

# 构建前端
npm run build

# 用 PM2 启动服务
pm2 start npm --name frontend-ai-assistant -- run start

# 配置 Nginx 反向代理
# 80 -> 127.0.0.1:3001

Nginx 里还要注意 SSE：

proxy_buffering off;
proxy_cache off;

否则流式输出可能被缓冲成一次性返回。

这部分可以等真正部署时单独写一篇。

当前线上版本为什么放 Vercel？

当前项目的在线地址是：

https://frontend-ai-assistant-two.vercel.app/

这是为了方便展示项目效果。

但需要说明：

1. Vercel 国内访问可能不稳定
2. 在线版本不一定完全等同本地完整 Express streaming 版本
3. 更推荐通过 GitHub 源码本地运行体验完整功能

所以 README 和文章开头都加了说明：

当前在线版本部署在 Vercel，国内网络访问可能不稳定。如果打不开，可以直接查看 GitHub 源码并在本地启动。

本篇总结

这一篇主要分析了当前项目的部署方案选择。

结论是：

Vercel：适合作品展示，但国内访问不稳定，Express streaming 要改造
Render：适合完整 Node 服务，但可能要求绑卡
Railway：适合完整 Express 服务，但不是永久免费
国内轻量服务器：最稳定、最可控，但有费用和运维成本

对当前阶段来说，最合理的选择是：

先不急着买服务器
继续用 Vercel 做展示
本地保留完整开发环境
先把数据库、用户系统等核心能力补上
等项目更完整后，再统一做国内服务器部署

下一篇我们回到功能开发主线：

从 localStorage 迁移到数据库，用 SQLite + Prisma 保存会话和消息。

avatar
文章
阅读
粉丝