简单Web应用如何从AWS DynamoDB中读取存储的数据

三者联动逻辑梳理 #

你已经跑通的写数据链路是「前端POST请求→API Gateway→写Lambda→DynamoDB存数据」，读数据链路完全对称：

1. 前端发起GET请求到API Gateway的读接口
2. API Gateway触发关联的读数据Lambda函数
3. Lambda通过AWS SDK调用DynamoDB的读接口拉取数据
4. Lambda把查询结果封装成符合API Gateway要求的返回格式回传
5. API Gateway把数据返回给前端，前端渲染即可

分步实现代码&配置 #

• 步骤1：配置Lambda读权限 #

  找到你当前写数据Lambda关联的IAM执行角色，新增DynamoDB的读权限，根据你的需求选对应操作：

  • 按主键查单条数据：添加dynamodb:GetItem权限
  • 读全表所有数据：添加dynamodb:Scan权限
    权限的资源范围指定为你的DynamoDB表ARN即可。

• 步骤2：编写读数据Lambda函数 #

  参考官方教程用的Node.js运行时，示例代码如下：

  const AWS = require('aws-sdk');
  const dynamo = new AWS.DynamoDB.DocumentClient();
  // 建议把表名存在Lambda环境变量，避免硬编码
  const TABLE_NAME = process.env.YOUR_DYNAMO_TABLE_NAME;
  
  exports.handler = async (event) => {
    try {
      // 场景1：读全表所有数据
      const queryRes = await dynamo.scan({
        TableName: TABLE_NAME
      }).promise();
      const returnData = queryRes.Items;
  
      // 场景2：按主键查单条，需要前端传查询参数name
      // const targetName = event.queryStringParameters?.name;
      // const queryRes = await dynamo.get({
      //   TableName: TABLE_NAME,
      //   Key: { name: targetName } // 这里的name替换成你表的主键字段名
      // }).promise();
      // const returnData = queryRes.Item;
  
      return {
        statusCode: 200,
        headers: {
          // 测试阶段可以写*，生产环境替换为你的S3静态站点域名
          "Access-Control-Allow-Origin": "*",
          "Content-Type": "application/json"
        },
        body: JSON.stringify(returnData)
      }
    } catch (e) {
      return {
        statusCode: 500,
        headers: {
          "Access-Control-Allow-Origin": "*"
        },
        body: JSON.stringify({error: e.message})
      }
    }
  };
  

• 步骤3：配置API Gateway GET接口 #

  进入你之前创建的API Gateway实例：

  1. 新建GET方法，集成类型选择「Lambda函数」，关联上一步创建的读Lambda
  2. 开启该GET接口的CORS配置，规则和你之前的POST接口保持一致
  3. 重新部署API，拿到该GET接口的调用地址

• 步骤4：前端JS调用&渲染 #

  前端添加请求逻辑，示例代码如下：

  // 替换为你API Gateway的GET接口地址
  const READ_API_URL = "https://你的API ID.execute-api.区域.amazonaws.com/部署阶段/接口路径";
  
  async function fetchAndRenderNames() {
    try {
      const res = await fetch(READ_API_URL);
      const data = await res.json();
      // 假设页面上有id为nameList的DOM容器用于展示
      const listContainer = document.getElementById('nameList');
      listContainer.innerHTML = '';
      // 读全表的情况遍历渲染
      data.forEach(item => {
        const itemEl = document.createElement('p');
        itemEl.textContent = `存储的姓名：${item.name}`;
        listContainer.appendChild(itemEl);
      })
      // 读单条的情况直接渲染即可
      // listContainer.textContent = `查询到的姓名：${data.name}`;
    } catch (err) {
      console.error("请求失败：", err);
    }
  }
  
  // 页面加载完成后自动执行，也可以绑定到按钮点击事件触发
  document.addEventListener('DOMContentLoaded', fetchAndRenderNames);
  

常见问题排查 #

• CORS报错：检查API Gateway是否开启了CORS、Lambda返回头是否携带了正确的Access-Control-Allow-Origin字段
• 权限报错：检查Lambda执行角色的IAM策略是否包含了对应的DynamoDB读操作权限，资源ARN是否正确
• 空值返回：检查DynamoDB表中是否有数据，字段名是否和代码中读取的一致

内容的提问来源于stack exchange，提问作者Lukas