通过React web app点击事件触发AWS Lambda函数的方案咨询

API Gateway必要性说明 #

你当前场景下API Gateway是最适配的方案，除非是极简测试场景否则不建议跳过，原因如下：

• Lambda本身没有公网访问端点，公网环境下的React应用无法直接发送请求触发Lambda，必须有一个公网入口承接前端HTTP请求，API Gateway就是AWS原生提供的轻量化入口，哪怕你仅需要触发Lambda不需要返回业务数据，也可以配置它仅返回202状态码，额外开销极低
• 后续你需要基于登录用户身份做分支逻辑，API Gateway原生支持对接Cognito等授权器，可以自动把用户身份信息透传到Lambda，不需要你手动实现全链路鉴权逻辑，能节省大量开发成本
• 如果你只是做临时测试不想配置API Gateway，也可以直接开启Lambda的函数URL功能，开启后会自动生成公网可访问的HTTP端点，React侧可以直接请求该端点触发Lambda。但该能力缺少原生的限流、跨域配置、授权校验能力，生产环境不推荐使用

具体对接步骤 #

• 第一步：创建HTTP API类型的API Gateway（比REST API成本低、配置更简单），新增一个POST路由，集成目标选择你的Lambda函数，开启Lambda代理集成
• 第二步：在API Gateway的跨域配置里，添加你的React应用域名作为允许的源，允许POST请求即可
• 第三步：React侧的按钮点击事件处理函数中，发送POST请求到API Gateway的端点，示例代码如下：

const handleButtonClick = async () => {
  try {
    // 把<API_GATEWAY_ENDPOINT>替换为你实际的端点地址
    await fetch("<API_GATEWAY_ENDPOINT>", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        // 如果有登录态token，放在这里传递
        "Authorization": `Bearer ${userToken}`
      },
      // 不需要传业务数据的话body可以留空
      body: JSON.stringify({})
    })
    // 请求成功即代表Lambda触发成功
    alert("触发成功")
  } catch (err) {
    console.error("触发失败", err)
  }
}

• 第四步：Lambda侧可以直接从event对象里取用户身份信息做分支逻辑，如果你用Cognito做登录鉴权，身份信息在event.requestContext.authorizer.jwt.claims字段中；如果用其他登录体系，从请求头里取Authorization字段自行解析token即可
• 后续如果需要接入Step Functions做流程编排，直接在Lambda中调用StepFunctions.Client.start_execution()接口触发流程即可

补充说明 #

如果你的Step Functions流程不需要Lambda做额外的前置处理，也可以直接把API Gateway的集成目标设置为Step Functions，跳过Lambda中间层，进一步减少链路复杂度。

内容的提问来源于stack exchange，提问作者kelsey-debug