如何从我的 React 应用程序调用 netlify lambda 函数?

IT技术 reactjs function lambda aws-lambda netlify
2021-05-03 05:47:27

我是 netlify 和无服务器架构的新手。在react中,我通常会将一个动作导入到我的组件中,然后调用该动作来调用服务器。现在我只是想在本地测试我的函数,我不确定从哪里导入或如何调用我的函数以查看它是否有效。帮助将不胜感激。下面是一个非常基本的函数,我试图调用它来开始。

//in functions/test.js

import axios from 'axios'

exports.handler = function(event, context, callback) {
    axios.post('http://requestbin.fullcontact.com/1c50pcg1', {name: 'richard'}).then((response)=>{
      callback(null, {
        statusCode: 200,
        body: response.body
      })
    }).catch((err) => {
      console.log(err)
    })
}
1个回答

在react中,我通常会在我的组件中导入一个动作,然后调用该动作来调用服务器

这正是您在无服务器架构中所做的,其中您的“服务器”是API GatewayAPI Gateway 然后会将传入请求代理到您的 Lambda 函数。

您可以定义特定于 HTTP 的方法来调用您的 Lambda 函数,或者您还可以配置 API Gateway 以将任何 HTTP 方法代理给它们。然后需要自己处理路由。幸运的是,有一些包允许您在 Lambda 函数前包装一个 Web 框架(如 Express),因此您的路由可以由这些类型的框架处理。

另一种选择是使用JavaScript SDK调用您的函数并使用其名称直接从浏览器调用您的 Lambda。但是,这种方法不像您严重依赖函数名称/ARN 来调用它那样灵活,这意味着函数名称或 ARN 的任何更改(例如,考虑到您要迁移到生产环境)都会直接影响您的客户。Lambda 代码中的更改也可能意味着客户端需要更改其实现,这绝对不是一个好的做法。另一个缺点是,以这种方式处理操作要困难得多,因为单击一个按钮将决定要调用的 Lambda 函数。您的前端可能会很快变得混乱。当然,在某些用例中,您更喜欢这种方法而不是 API 网关的方法,但这需要经过深思熟虑。

另一方面,通过使用 API Gateway,您只需进行常规 REST 调用,然后触发您的 Lambda 函数。Lambda 函数中的任何更改都不会影响客户端与您的 REST API 之间的合同,因此最终会更加灵活。此外,依赖 HTTP 方法比依赖函数名称/ARN 容易得多

由于你已经习惯了 React -> Server 的方式,我建议你选择 API Gateway 这条路。

您可以在本教程中了解如何通过 API Gateway 触发 Lambda 函数

如果您想从浏览器调用 Lambda 函数,那么本教程可能会很方便。