使用AWS Amplify、Lambda、API Gateway和DynamoDB部署静态Web应用

构建现代Web应用通常涉及复杂的设置和服务器管理，但其实不必如此。Amazon Web Services (AWS) 提供了一套强大的"无服务器"服务，让您无需担心底层基础设施即可构建和部署应用。本教程将带您逐步构建一个简单但功能完整的Web应用。

我们将构建什么：无服务器求和计算器

我们将创建一个简单的求和计算器Web应用，该应用允许用户输入两个数字，发送到AWS后端进行计算，存储结果，然后将求和结果显示给用户。

核心AWS服务

AWS Lambda：处理后端计算逻辑
Amazon API Gateway：作为前端与后端的通信接口
Amazon DynamoDB：存储计算历史记录
AWS Amplify：托管和部署前端应用

实施步骤

1. 使用Amazon DynamoDB设置数据库

导航到DynamoDB控制台
创建新表：
- 表名：myTable
- 分区键：ID
记录表ARN（后续步骤需要）

2. 使用AWS Lambda创建后端逻辑

创建Lambda函数：
- 运行时：Python 3.9
- 函数名：SumCalculatorFunction
编写处理代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45


import json
import boto3
import time
from botocore.exceptions import ClientError

dynamodb = boto3.resource('dynamodb')
table = dynamodb.Table('myTable')

def lambda_handler(event, context):
    num1 = event.get('num1')
    num2 = event.get('num2')
    
    if num1 is None or num2 is None:
        return {'statusCode': 400, 'body': json.dumps({'message': '需要提供num1和num2'})}
    
    sum_result = num1 + num2
    partition_key = str(int(time.time() * 1000))
    sort_key = str(int(time.time()))
    
    item = {
        'ID': partition_key,
        'Timestamp': sort_key,
        'num1': num1,
        'num2': num2,
        'sum': sum_result
    }
    
    try:
        table.put_item(Item=item)
    except ClientError as e:
        return {'statusCode': 500, 'body': json.dumps({'message': f'存储数据到DynamoDB时出错: {e.response["Error"]["Message"]}'})}
    
    return {
        'statusCode': 200,
        'body': json.dumps({
            'message': '计算和存储成功',
            'result': {
                'ID': partition_key,
                'Timestamp': sort_key,
                'num1': num1,
                'num2': num2,
                'sum': sum_result
            }
        })
    }

3. 使用Amazon API Gateway连接前端和后端

创建REST API
创建POST方法并连接到Lambda函数
启用CORS（跨源资源共享）
部署API并记录调用URL

4. 创建前端Web应用

创建三个文件：

index.html - 页面结构
app.js - 业务逻辑
style.css - 页面样式

关键JavaScript代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


const API_ENDPOINT = '您的API Gateway调用URL';

calculatorForm.addEventListener('submit', function(event) {
    event.preventDefault();
    
    const num1 = parseFloat(num1Input.value);
    const num2 = parseFloat(num2Input.value);
    
    fetch(API_ENDPOINT, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({num1: num1, num2: num2})
    })
    .then(response => response.json())
    .then(data => {
        // 处理响应数据
    })
    .catch(error => {
        // 处理错误
    });
});

5. 使用AWS Amplify部署前端

将前端文件压缩为ZIP包
在Amplify控制台选择"无Git提供商部署"
上传ZIP文件并部署

测试应用

打开Amplify提供的URL
输入两个数字并点击"计算"
验证结果是否正确显示
检查DynamoDB表中是否存储了计算记录

常见问题解决

CORS错误：确保API Gateway中正确配置了CORS
Lambda超时：增加Lambda函数的超时设置
DynamoDB权限错误：检查Lambda执行角色是否有正确的PutItem权限

进阶扩展

添加用户认证功能
实现计算历史查看
加强输入验证
添加实时更新功能

通过本教程，您已经成功构建并部署了一个完整的无服务器Web应用，了解了如何利用AWS各项服务创建可扩展、经济高效且低维护的应用架构。