如何在我的React应用程序中调用netlify lambda函数? [英] How do I call a netlify lambda function from my React app?

问题描述

我是netlify和无服务器架构的新手.在react中，我通常将一个动作导入到我的组件中，然后调用该动作以对服务器进行调用.现在，我只是想在本地测试我的函数，我不确定从哪里导入或如何精确调用我的函数以查看其是否有效.帮助将不胜感激.下面是一个非常基本的功能，我正在尝试调用以开始使用.

I am new to netlify and the serverless architecture. In react I would normally import an action into my component then call that action which would make a call to the server. Right now I am just trying to test my function locally and Im not sure where to import from or how exactly to call my function to see if it even works. Help would be greatly appreciated. Below is a very basic function Im trying to call to get started.

//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)
    })
}

推荐答案

在react中，我通常将一个动作导入到我的组件中，然后调用该动作以对服务器进行调用

In react I would normally import an action into my component then call that action which would make a call to the server

这正是您在服务器"为 API网关的无服务器架构中所做的事情一个>.然后，API Gateway会将传入的请求代理到您的Lambda函数.

This is exactly what you do in a Serverless architecture where your "Server" is API Gateway. API Gateway will then proxy incoming requests to your Lambda function.

您可以定义特定于HTTP的方法来调用Lambda函数，也可以将API Gateway配置为将任何HTTP方法代理给它们.然后需要您自己处理路由.幸运的是，有一些软件包可以让您在Lambda函数之前包装一个Web框架(例如Express)，因此可以通过这些类型的框架来处理您的路由.

You are able to define HTTP specific methods to invoke your Lambda functions or you can also configure API Gateway to proxy ANY HTTP method to them. The routing would then need to be handled by yourself. Luckily, there are some packages that allow you to wrap a web framework (like Express) in front of your Lambda functions, so your routes could be handled by these types of frameworks.

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

Another option is to invoke your functions by using the JavaScript SDK and invoke your Lambda directly from the browser using its name. This approach, however, is not as flexible as you heavily rely on the function's name / ARN to invoke it, meaning any changes in your function's name or ARN (considering you're moving to a prod environment, for example) would directly affect your clients. Changes in your Lambda code could also imply that clients would need to change its implementation, which is definitely not a good practice. One other drawback is that handling the actions this way is much harder, as one button click would dictate what Lambda function to call. Your frontend could become messy very fast. Of course, there are some use cases where you'd prefer this approach over API Gateway's, but that would need to be thought out.

另一方面，通过使用API​​ Gateway，您只是进行常规的REST调用，然后将触发您的Lambda函数. Lambda函数的任何更改都不会影响客户端与REST API之间的约定，因此最终变得更加灵活.而且，依赖HTTP方法比依赖函数名称/ARN要容易得多

By using API Gateway, on the other hand, you are just making regular REST calls that will then trigger your Lambda functions. Any change in the Lambda functions will not affect the contract between clients and your REST APIs, so it ends up being much more flexible. Also, relying on HTTP methods is much easier than relying on functions' names / ARNs

由于您已经习惯了React-> Server方法，因此建议您选择API网关之路.

Since you are already used to the React -> Server approach, I recommend you choose the API Gateway road.

您可以在如果要从浏览器调用Lambda函数，则此

If you want to invoke Lambda functions from the browser, then this tutorial may be handy.

这篇关于如何在我的React应用程序中调用netlify lambda函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！