vercel 配置小记

January 5, 2024

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.5.2"
        },
        "api/**/*.[jt]s": {
            "runtime": "vercel-deno@3.0.4"
        }
    }
}

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

修改 builds 字段可以自定义此行为（尽管 vercel 文档不推荐）

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

可以本地使用 esbuild 编译

 esbuild index.ts --outfile=index.js --platform=node --packages=external

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

json

{
    "builds": [{ "src": "index.js", "use": "@vercel/node" }],
    "rewrites": [{ "source": "/(.*)", "destination": "index.js" }]
}

根目录的 index.js 如下

/**
 * @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 default async function handler(req: Request) {
    return Response.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" });
}