Serverless Functions 入门

🎯 引言

前端项目里经常需要调用后端接口，难道还要买台服务器、学一门后端语言？学完这篇文章，你将学会用 Serverless Function，在同一个项目里、用熟悉的 JavaScript 写出能上线的后端接口。

🧱 什么是 Serverless Function

Serverless Function（无服务器函数）就是一段运行在云端的函数，每个函数对应一个接口地址。

你不需要买服务器、不需要装环境、不需要管运维——写好一个函数文件，Vercel 自动把它变成一个可以访问的 API。

打个比方：传统后端是开一家餐厅，要租店面、装修、雇人全天守着；Serverless Function 是共享厨房，有订单才开工，没订单零成本。

🛠 第一个接口

在项目根目录新建 api 文件夹，里面每个文件会自动变成一个接口。创建 api/hello.js：

export default function handler(request, response) {
    response.status(200).json({
        message: 'Hello from Serverless!',
        time: new Date().toLocaleString()
    });
}

规则很简单：

• 文件路径 api/hello.js → 接口地址 /api/hello；
• 必须 export default 一个函数，接收 request 和 response；
• 用 response.status(200).json(...) 返回 JSON 数据。

部署后访问 https://你的域名/api/hello，就能看到接口返回的 JSON 了。

💻 本地调试：vercel dev

直接 npm run dev 启动的 Vite 服务器不认识 api 目录，本地调试接口要用 Vercel CLI 提供的命令：

vercel dev

它会同时启动前端项目和 Serverless Functions，并模拟线上环境。打开 http://localhost:3000/api/hello 就能在本地测试接口了。

💡 常见用途：隐藏密钥

第三篇说过，VITE_ 开头的变量会暴露在前端代码里，不能放密钥。正确做法是把请求第三方 API 的逻辑挪进 Serverless Function：

export default async function handler(request, response) {
    // 密钥放在 Vercel 环境变量里，只在服务端运行，不会暴露
    const key = process.env.WEATHER_API_KEY;
    const res = await fetch(`https://api.example.com/weather?key=${key}&city=beijing`);
    const data = await res.json();

    response.status(200).json(data);
}

前端只需要请求自己的 /api/weather，密钥全程不出服务器，安全了。这个"接口转发"模式是 Serverless Function 在前端项目里最高频的用法。

🧾 小节总结

• Serverless Function 是运行在云端的函数，一个文件就是一个 API 接口。
• api/hello.js 对应接口 /api/hello，导出默认函数处理请求。
• 本地用 vercel dev 同时调试前端和接口。
• 经典用途：转发第三方 API、隐藏密钥、处理表单提交。
• 密钥用 process.env.XXX 读取，只存在于服务端，不会泄露。

❓ 知识问答

Q1：Serverless Function 可以用 TypeScript 写吗？

A：可以，把文件改成 api/hello.ts 并给参数加上类型即可，Vercel 会自动编译。

Q2：函数里的代码会打包进前端产物吗？

A：不会。api 目录的代码只运行在 Vercel 的服务端，用户无法直接看到源码。

Q3：接口可以接收 POST 请求吗？

A：可以。通过 request.method 判断请求方式，用 request.body 读取提交的数据。

Q4：Serverless Function 能连接数据库吗？

A：能，函数运行在普通的 Node.js 环境，可以安装数据库客户端连接 MySQL、MongoDB 等。数据库属于 Stage7 的知识，这里先了解概念即可。

🧪 小练习

1. 在项目中创建 api/time.js，返回服务器当前时间和一个随机幸运数字。
2. 用 vercel dev 本地验证接口，再部署到线上访问确认。
3. 在首页用 fetch('/api/time') 调用接口，把结果显示在页面上。

// 请在这里编写代码

🎉 恭喜你已经掌握了 Serverless Functions，也完成了整个 Vercel 课程！现在的你，已经能从零开始把一个前端项目真正送上线了。