Vercel News

Run multiple frameworks in one project with Vercel Services

8.5内容质量

TL;DR · AI 摘要

Vercel Services 允许在单个项目中部署多个前端和后端框架，通过 vercel.json 配置服务绑定和自动路由。

核心要点

  • 通过 vercel.json 可定义多个服务并指定框架（如 Next.js/Express）
  • 服务间通信使用 INTERNAL_URL 环境变量实现私有网络通信
  • 支持 Go/Rust 等语言的框架自动检测和基础设施配置

结构提纲

按章节快速跳转。

  1. §引言

    宣布 Vercel Services 支持多框架部署能力

  2. ·配置方式

    通过 vercel.json 定义服务结构和路由规则

  3. ›服务绑定

    使用 bindings 字段实现服务间私有通信

  4. ·基础设施

    自动检测框架并配置对应运行环境

  5. ›定价模式

    基于实际运行时间的 Active CPU 计费方式

思维导图

用一张图看清主题之间的关系。

查看大纲文本（无障碍 / 无 JS 友好）
  • Vercel 多框架部署
    • 配置方式
      • vercel.json 定义服务结构
      • rewrites 路由规则
    • 核心功能
      • 服务绑定通信
      • 自动框架检测
    • 技术细节
      • INTERNAL_URL 环境变量
      • Fluid compute 架构

金句 / Highlights

值得收藏与分享的关键句。

#Vercel#部署#多框架#前端#后端
打开原文

在 Vercel 项目中使用 Vercel Services 运行多个框架 - Vercel

现在你可以在单个 Vercel 项目中同时部署多个前端和后端。

Vercel Services 现已发布，允许你在共享域名下部署包含多个框架的全栈应用，服务之间可以私密通信，并且部署、预览和回滚操作会同步进行。

服务在 vercel.json 中定义：

vercel.json

code
1
{
2
"services"
:
{
3
"my_frontend"
:
{
4
"root"
:
"frontend/"
,
5
"framework"
:
"nextjs"
6
}
,
7
"my_backend"
:
{
8
"root"
:
"backend/"
,
9
"entrypoint"
:
"main:app"
10
}
11
}
,
12
// my_backend 没有公开路由
13
// 它只能通过 my_frontend 内部访问
14
"rewrites"
:
[
15
{
16
"source"
:
"/(.*)"
,
17
"destination"
:
{
"service"
:
"my_frontend"
}
18
}
19
]
20
}

Vercel 会自动处理路由、构建和环境变量。

从此，你的服务会显示在仪表板和 CLI 中：

  • 部署面板可视化服务图
  • 日志界面可按单个服务进行过滤
  • vercel dev 可本地运行所有服务以模拟生产环境

部署界面中服务图的可视化示例：

服务绑定

服务通过新的绑定键在内部通信，无需通过公共互联网路由：

code
1
{
2
"services"
:
{
3
"my_frontend"
:
{
4
"root"
:
"frontend/"
,
5
"framework"
:
"nextjs"
,
6
"bindings"
:
[
7
{
8
"type"
:
"service"
,
9
"service"
:
"my_backend"
,
10
"format"
:
"url"
,
11
"env"
:
"BACKEND_INTERNAL_URL"
12
}
13
]
14
}
,
15
"my_backend"
:
{
...
}
16
}
,
17
"rewrites"
:
[
...
]
18
}

该绑定将 my_backend 作为环境变量暴露给 my_frontend。

前端通过 BACKEND_INTERNAL_URL 中的 URL 私密访问后端：

app/api/users/route.ts

code
1
export
async
function
GET
(
)
{
2
const
url
=
new
URL
(
"/users"
,
process
.
env
.
BACKEND_INTERNAL_URL
)
;
3
const
res
=
await
fetch
(
url
)
;
4
const
users
=
await
res
.
json
(
)
;
5
return
Response
.
json
(
users
)
;
6
}

该路由使用该变量从 my_backend 获取数据并返回响应。

框架定义的基础设施

大多数框架无需任何配置即可运行。框架定义的基础设施意味着每个服务的框架会自动检测和自动配置，从 FastAPI 和 Flask 到 Express 和 Hono，Go 和 Rust 也得到原生支持。服务在 Fluid 计算上运行，采用 Active CPU 计费方式，你只需为代码实际运行的时间付费。

阅读文档以开始使用。