liveBlog
首页
架构2025-12-01
返回首页

Serverless 和边缘计算对前端的影响

Serverless 和边缘计算对前端的影响

Serverless 不是新概念了，但随着 Vercel、Cloudflare Workers、Deno Deploy 等平台的成熟，它在 2025 年和前端开发的关系越来越密切。

Serverless 的核心概念

Serverless 不是"没有服务器"，而是开发者不需要管理服务器。你只写函数，平台负责扩缩容、运维、计费。

传统部署：
  买服务器 → 配置环境 → 部署代码 → 监控运维 → 扩缩容

Serverless：
  写函数 → 部署 → 完事

前端相关的 Serverless 平台

Vercel

Next.js 的官方托管平台。Serverless Functions 是它的核心功能：

// app/api/hello/route.ts
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const name = searchParams.get('name') || 'World';

  return Response.json({ message: `Hello ${name}` });
}

部署后自动获得 CDN、HTTPS、边缘节点。

Cloudflare Workers

在 CDN 边缘节点运行代码，延迟极低：

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    if (url.pathname === '/api/data') {
      const data = await env.KV.get('key');
      return new Response(data);
    }

    return new Response('Not found', { status: 404 });
  },
};

Cold Start 时间极短（< 5ms），适合 API 和 SSR。

Deno Deploy

Deno 官方的托管平台，和 Cloudflare Workers 类似：

Deno.serve({ port: 8000 }, (req: Request) => {
  return new Response('Hello from Deno Deploy');
});

Serverless 的优势

1. 自动扩缩容

不需要预估流量。10 个用户和 10 万个用户用的是同一套代码，平台自动处理。

2. 按量计费

传统服务器：不管有没有流量，每个月固定费用。 Serverless：只有请求时才计费，空闲时不花钱。

3. 零运维

不需要管理服务器、操作系统、运行时。不用装 Nginx、配置 SSL、做安全更新。

4. 全球部署

Vercel 和 Cloudflare 在全球有几十个节点，代码部署后自动分发到所有节点。

Serverless 的限制

1. 冷启动

函数第一次调用时需要启动运行时环境，有延迟。不过现代平台（如 Vercel、Cloudflare Workers）的冷启动时间已经很短了。

2. 执行时间限制

每个函数有最大执行时间（通常 10-60 秒）。不适合长时间运行的任务。

3. 状态管理

Serverless 函数是无状态的，不能在内存里保存数据。需要外部存储（数据库、KV、Redis）。

4. 本地开发不一致

本地环境和 Serverless 环境可能有差异，调试困难。

边缘计算

边缘计算是 Serverless 的下一步。代码运行在离用户最近的 CDN 节点上。

传统 Serverless：
  用户 → 最近的数据中心（可能跨省）→ 函数执行 → 响应

边缘计算：
  用户 → 最近的 CDN 节点（可能在同市）→ 函数执行 → 响应

延迟可以从 100-200ms 降到 10-50ms。

边缘 SSR

Next.js 15 支持在边缘节点做 SSR：

// next.config.js
module.exports = {
  experimental: {
    serverActions: {
      bodySizeLimit: '2mb',
    },
  },
};

页面在离用户最近的节点渲染，首屏速度更快。

边缘中间件

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // A/B 测试
  const variant = Math.random() > 0.5 ? 'a' : 'b';
  const response = NextResponse.next();
  response.cookies.set('ab-variant', variant);
  return response;
}

什么时候用 Serverless

适合：

  • API 接口（CRUD、数据查询）
  • SSR/SSG 页面
  • Webhook 处理
  • 定时任务（Cron）
  • 图片处理

不适合：

  • 长时间运行的任务（视频转码、大数据处理）
  • 需要 WebSocket 长连接的场景
  • 对启动延迟极敏感的场景

成本估算

Serverless 的计费方式：

请求数 × 执行时间 × 内存大小 = 费用

Vercel 免费额度：
- Serverless Functions: 100GB-Hrs/月
- 请求: 100万次/月

Cloudflare Workers 免费额度：
- 10万次请求/天
- 10ms CPU 时间/请求

对于中小型前端项目，免费额度通常够用。超过后费用也远低于传统服务器。

总结

Serverless 和边缘计算正在改变前端部署的方式。如果你在做 Next.js 项目，Vercel 是最简单的选择。如果需要更细粒度的控制和更低的延迟，Cloudflare Workers 值得考虑。

但 Serverless 不是万能的。对于有大量后台处理、WebSocket 需求、或者需要持久化运行的项目，传统服务器（或容器化部署）仍然是更好的选择。

Next.jsTypeScript
返回首页