vercel 配置小记

January 5, 2024

398

零配置

2025.9.5 开始，vercel 支持零配置部署后端框架。
自动识别 express 和 hono 框架，无需配置 vercel.json 和使用 /api 目录。

package.json

package.json 定义的 node 版本优先级高于 Project Settings。

json

{
    "engines": {
        "node": ">=18"
    },
    "packageManager": "pnpm"
}

vercel 会自动识别项目并构建，或者在 Build & Development Settings 手动配置。

vercel.json

默认情况下 vercel 匹配 /api 目录下以 .js .mjs .ts 为后缀的文件作为 Serverless Functions。

对于 node 以外的，官方支持的运行时，对应的后缀也会自动匹配。

对于其它运行时，需要在 vercel.json 中额外配置，例如：

json

{
    "functions": {
        "api/**/*.php": {
            "runtime": "vercel-php@0.7.3"
        },
        "api/**/*.[jt]s": {
            "runtime": "vercel-deno@3.1.0"
        }
    }
}

识别 /api 目录为 Serverless Functions 实际上是 vercel 的默认构建行为。

修改 builds 字段可以自定义此行为。（尽管 vercel 文档不推荐，不过这个比较方便，用 functions 字段定义则更细致一些）

但注意，配置 builds 字段后，Build & Development Settings 将被忽略，
也就是 vercel 不会执行其它配置的构建步骤，此时我们必须在手动构建后再推送到 vercel。
这对需要构建步骤的应用来说很不方便，特别是 typescript，因为本来 vercel 是会自动编译 /api 目录下的 .ts 文件的。

当使用 functions 配置而非 builds 字段配置时，也可以考虑使用 vercel-build 脚本构建。然而，使用 functions 配置时要求构建后存在 public 目录。

使用 esbuild 编译

sh
 esbuild index.ts --outfile=index.js --platform=node --packages=external --format=esm
注：无需使用 --bundle 构建，因为 vercel 会安装 package.json 的依赖。

例如，我们想部署一个纯 nodejs 的 http 应用（并且阻止文件式路由），则可以有如下 vercel.json。

json

{
    "$schema": "https://openapi.vercel.sh/vercel.json",
    "builds": [{ "src": "index.js", "use": "@vercel/node" }],
    "rewrites": [{ "source": "/(.*)", "destination": "index.js" }],
    "env": { "NODEJS_HELPERS": "0" }
}

根目录的 index.js 如下：（文档），支持的导出实际上就是 Next.js API 路由的 pages 风格和 app 风格

/**
 * @param {import('node:http').IncomingMessage} req
 * @param {import('node:http').ServerResponse} res
 */
export default async function handler(req, res) {
    res.write(`method: ${req.method}\n`);
    res.write(`url: ${req.url}\n`);
    res.write(`headers: ${JSON.stringify(req.headers, null, 4)}`);
    res.end();
}

可以将环境变量 NODEJS_HELPERS 设置为 0 以关闭 vercel 在 req 和 res 上添加的辅助方法，这样与标准的 nodejs 环境更一致。

要让 vercel 将文件识别为 Edge Function，需要在代码中多加几行：

Edge Function 的优点在于其支持流式传输，流式传输没有时长限制，而普通的 Serverless Function 必须在有限的时间内发送完所有响应。

export const config = {
    runtime: "edge",
};

export async function GET(req: Request) {
    return Response.json({ hello: "world" });
}

// 或导出
import type { VercelRequest, VercelResponse } from "@vercel/node";
export default function handler(request: VercelRequest, response: VercelResponse) {
    return response.status(200).json({ hello: "world" });
}

对于 next.js（app router）：

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export const runtime = "edge"; // 'nodejs' is the default

export function GET(request: NextRequest) {
    return NextResponse.json({ hello: "world" });
}

←Back to home

This work is licensed under CC BY-NC-SA 4.0

NickName

E-Mail

Website

Comments

Latest
Oldest
Hottest

No comment yet.

YieldRay

vercel 配置小记

Preview: