无服务器架构（Serverless）网站实战，AWS Lambda Vercel 部署指南
本文目录导读：
随着云计算技术的快速发展,无服务器架构（Serverless）已成为现代应用开发的重要趋势，它允许开发者专注于业务逻辑，而无需管理底层服务器资源，本文将介绍如何利用 AWS Lambda 和 Vercel 构建并部署一个无服务器网站，涵盖从开发到上线的完整流程。
什么是无服务器架构（Serverless）？
无服务器架构（Serverless）并不是指没有服务器，而是指开发者无需关心服务器的运维工作，云服务提供商（如 AWS、Vercel）负责自动扩展、负载均衡和资源管理，开发者只需编写代码并按需付费。
Serverless 的核心优势
- 自动扩展：根据流量自动调整计算资源。
- 按需计费：仅支付实际使用的计算时间。
- 降低运维成本：无需管理服务器，减少维护负担。
- 快速部署：代码更新后立即生效。
为什么选择 AWS Lambda + Vercel？
- AWS Lambda：AWS 提供的 Serverless 计算服务，支持多种编程语言（Node.js、Python、Go 等），适合构建后端 API 和数据处理任务。
- Vercel：专注于前端和全栈应用的 Serverless 部署平台，提供全球 CDN、自动 HTTPS 和 Git 集成，适合托管静态网站和 SSR（服务端渲染）应用。
结合两者,我们可以：
- 使用 AWS Lambda 处理动态 API 请求（如用户认证、数据库操作）。
- 使用 Vercel 托管前端页面，并利用其 Serverless Functions 增强动态功能。
实战：构建一个 Serverless 网站
项目结构
我们构建一个简单的博客网站：
- 前端：Next.js（React 框架，支持 SSR 和静态生成）。
- 后端：AWS Lambda 处理 API 请求（如获取博客文章）。
- 部署：前端部署到 Vercel，API 部署到 AWS Lambda。
my-blog/
├── frontend/ # Next.js 前端
│ ├── pages/
│ │ ├── index.js
│ │ └── api/ # Vercel Serverless Functions
├── backend/ # AWS Lambda 函数
│ ├── getPosts.js # 获取博客文章的 Lambda 函数前端开发（Next.js）
(1) 初始化 Next.js 项目
npx create-next-app frontend cd frontend
(2) 创建首页（pages/index.js）
import { useState, useEffect } from 'react';
export default function Home() {
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch('/api/posts') // 调用 Vercel Serverless Function
.then(res => res.json())
.then(data => setPosts(data));
}, []);
return (
<div>
<h1>我的博客</h1>
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
(3) 创建 Vercel Serverless Function（pages/api/posts.js）
export default async function handler(req, res) {
// 调用 AWS Lambda 获取数据
const response = await fetch('YOUR_AWS_LAMBDA_ENDPOINT');
const data = await response.json();
res.status(200).json(data);
}
后端开发（AWS Lambda）
(1) 创建 Lambda 函数（Node.js）
在 AWS 控制台创建 Lambda 函数 getPosts：
exports.handler = async (event) => {
const posts = [
{ id: 1, title: "Serverless 入门" },
{ id: 2, title: "AWS Lambda 实战" },
];
return {
statusCode: 200,
body: JSON.stringify(posts),
};
};
(2) 配置 API Gateway
- 在 AWS API Gateway 中创建 REST API，并关联 Lambda 函数。
- 部署 API 并获取调用 URL（如
https://xxx.execute-api.us-east-1.amazonaws.com/prod/getPosts）。
部署到 Vercel
(1) 连接 Git 仓库
Vercel 支持 GitHub/GitLab 自动部署，只需推送代码即可触发构建。
(2) 配置环境变量
在 Vercel 项目设置中添加 AWS_LAMBDA_ENDPOINT，指向你的 AWS Lambda API。
(3) 部署
git push origin main
Vercel 会自动构建并部署前端和 Serverless Functions。
优化与进阶
使用 AWS SDK 优化 Lambda 调用
Vercel 可以直接调用 AWS Lambda，无需经过 API Gateway：
import { Lambda } from 'aws-sdk';
export default async function handler(req, res) {
const lambda = new Lambda({
region: 'us-east-1',
credentials: {
accessKeyId: process.env.AWS_ACCESS_KEY,
secretAccessKey: process.env.AWS_SECRET_KEY,
},
});
const data = await lambda.invoke({
FunctionName: 'getPosts',
}).promise();
res.status(200).json(JSON.parse(data.Payload));
}
数据库集成
- 使用 AWS DynamoDB（Serverless NoSQL 数据库）存储博客数据。
- 在 Lambda 中查询 DynamoDB：
const AWS = require('aws-sdk'); const dynamoDb = new AWS.DynamoDB.DocumentClient();
exports.handler = async (event) => { const params = { TableName: 'Posts', }; const data = await dynamoDb.scan(params).promise(); return { statusCode: 200, body: JSON.stringify(data.Items) }; };
### **3. 静态优化（ISR）**
Next.js 支持 **Incremental Static Regeneration (ISR)**，可在 Vercel 上实现动态静态页面：
```js
export async function getStaticProps() {
const res = await fetch('YOUR_AWS_LAMBDA_ENDPOINT');
const posts = await res.json();
return {
props: { posts },
revalidate: 60, // 每 60 秒重新生成页面
};
}通过 AWS Lambda + Vercel，我们构建了一个高性能、低成本的无服务器网站：
- 前端托管：Vercel 提供全球 CDN 和自动 HTTPS。
- 动态 API：AWS Lambda 处理后端逻辑。
- 自动化部署：Git 提交后自动构建和发布。
无服务器架构大幅降低了运维成本,适合个人开发者和小型团队快速构建现代 Web 应用，Serverless 将进一步结合边缘计算（如 Cloudflare Workers），提供更快的全球访问体验。
下一步
- 尝试 AWS API Gateway + Lambda 构建 RESTful API。
- 探索 Vercel Edge Functions 实现更快的动态渲染。
- 结合 Auth0 或 Cognito 实现用户认证。
希望这篇指南能帮助你快速上手 Serverless 开发！🚀
