普元部署包部署找不到构建_构建和部署无服务器功能以进行Netlify

普元部署包部署找不到构建

Recently, Netlify has become one of the most popular hosts in Web Development. Netlify offers an incredible variety of features like serverless (lambda) functions, free https certs, and more!

最近， Netlify已成为Web开发中最受欢迎的主机之一。 Netlify提供了令人难以置信的各种功能，例如无服务器（lambda）功能 ， 免费的https证书 等等 ！

Since Netlify is well known for hosting static sites that don't come with a backend, serverless functions help fill some of those gaps. In this article, we will walk through creating a serverless/lambda function, running and testing it locally, and deploying it to Netlify.

由于Netlify以托管不带后端的静态站点而闻名，因此无服务器功能有助于弥补其中的一些空白。 在本文中，我们将逐步创建无服务器/ lambda函数，在本地运行和测试它，并将其部署到Netlify。

Related Reading: Deploying Your First Gatsby Site to Netlify

相关阅读 ： 部署您的第一个盖茨比站点以进行Netlify

但首先...什么是Lambda函数 ( But First… What Are Lambda Functions )

Serverless functions is actually the more generic term. Serverless is a misnomer, however, as it doesn't mean there is no server at all.

无服务器功能实际上是更通用的术语。 但是，无服务器是一个错误的说法，因为这并不意味着根本就没有服务器。

It simply means you, the developer, don't have to worry about the server.
You don't have to create a Node server, for example, because the host takes care of all of that for you. All you have to worry about is writing the actual functionality with no regards for infrastructure, versioning, etc.

这只是意味着您（开发人员）不必担心服务器。
例如， 您不必创建节点服务器 ，因为主机可以为您完成所有这些工作 。 您只需要担心编写实际功能，而无需考虑基础结构，版本控制等问题。

The word Lambda is a proper noun referring to the type of serverless functions that are hosted on Amazon's AWS cloud platform. They were one of the very first ones to support/implement serverless functions, and this is the type of serverless functions that Netlify supports.

Lambda这个词是专有名词，指代托管在Amazon的AWS云平台上的无服务器功能的类型。 它们是最早支持/实现无服务器功能的功能之一，这是Netlify支持的无服务器功能的类型。

In this article serverless functions and Lambda Functions will refer to the functions that we create and host in Netlify.

在本文中，无服务器函数和Lambda函数将引用我们在Netlify中创建并托管的函数。

使用AWS Lambda创建无服务器功能 ( Create a Serverless Function with AWS Lambda )

For this demo, I am going to start with a basic Gatsby app. You don't have to use Gatsby yourself (it really doesn't matter what kind of site you us), but if you want to get caught up with the same starter, go back and check out Deploying Your First Gatsby Site to Netlify.

对于此演示，我将从基本的盖茨比应用程序开始 。 您不必自己使用Gatsby （我们使用哪种站点都没有关系），但是如果您想使用同一个入门者，请返回并查看“将第一个Gatsby站点部署到Netlify”。

For reference, when running mine, it just looks like this.

作为参考，在运行我的游戏时，它看起来像这样。

To get started, we need to create a folder that contains all of our Lambda Functions. It doesn't really matter where you put the folder or what you call it, but I'm going to put mine in the root of my app and call it functions.

首先，我们需要创建一个包含所有Lambda函数的文件夹。 放置文件夹或命名的位置并不重要，但是我将把我的文件夹放置在我的应用程序的根目录中，并称之为functions 。

For reference, there will be a 1:1 relationship between the files in this folder and the functions that get deployed. In other words, we will create a new JavaScript file for each function we host. So, let's create a "test.js" file inside of the functions directory and get started writing some code. Here's the basic boilerplate code for a Lambda Function.

作为参考，此文件夹中的文件与要部署的功能之间将存在1：1的关系。 换句话说，我们将为我们托管的每个函数创建一个新JavaScript文件。 因此，让我们在functions目录内创建一个“ test.js”文件，并开始编写一些代码。 这是Lambda函数的基本样板代码。

test.js (test.js)

exports . handler = function ( event , context , callback ) {
}

Each function takes in three parameters event, context, and callback.

每个函数接受三个参数：事件，上下文和回调。

• event : where we can retrieve post data, headers
  event ：我们可以在其中检索发布数据，标题
• context : information about the context in which the function was called, like certain user information
  context ：有关调用函数的上下文的信息，例如某些用户信息
• callback : a function that we call to return a response to the user
  callback ：我们调用此函数以将响应返回给用户的函数

The first parameter that the callback function takes is an error, which is null if there is no error. If the error is present, it will be respected and handled back to the user, but if is is null, the second parameter gets returned to the user.

回调函数采用的第一个参数是错误，如果没有错误，则为null。 如果存在错误，则将尊重并处理该错误，但如果为null，则将第二个参数返回给用户。

Here's a screenshot of my file structure, and a simple Hello World Lambda Function. In this example, I immediately call the callback function with no error and a return data with status of 200 and body of "Hello World".

这是我的文件结构的屏幕截图，以及一个简单的Hello World Lambda函数。 在此示例中，我立即无误调用回调函数，并返回状态为200且主体为“ Hello World”的返回数据。

在本地运行Lambda函数 ( Run a Lambda Function Locally )

Now that we've created a Hello World function, we need to be able to run it. To do this, we will use the "netlify-lambda" package. To install, run the following command.

现在我们已经创建了Hello World函数，我们需要能够运行它。 为此，我们将使用“ netlify-lambda”包。 要安装，请运行以下命令。

npm install netlify-lambda

安装该软件包后，文档告诉使用以下命令在本地运行我们的函数，其中<functions_directory>指的是我们编写源代码的目录。

netlify-lambda serve < functions_directory >

However, I wasn't able to run this command directly, so I created an alias in the package.json file, "start:lambda" to use NPM to run this command.

但是，我无法直接运行此命令，因此我在package.json文件“ start：lambda”中创建了一个别名，以使用NPM运行此命令。

The last thing we need to do before we can run locally is to create a configuration file that tells Netlify where to serve our functions from. I want to be specific here, this is not the directory where we write our source code. In fact, our source code will go through a build process, and the built assets will be put in the folder that we specify. So, create a Netlify.toml file in the root of your directory that looks like this.

在本地运行之前，我们要做的最后一件事是创建一个配置文件，该文件告诉Netlify从何处提供我们的功能。 我想在这里具体说明一下，这不是我们编写源代码的目录。 实际上，我们的源代码将经过构建过程，构建的资产将放入我们指定的文件夹中。 因此，在目录的根目录中创建一个Netlify.toml文件，如下所示。

这告诉Netlify，在构建函数时，将构建的资产放在一个名为“ lambda”的目录中。

Now, run the npm script we defined above. Notice in the screenshot that I tried to run this command once before creating the Netlify.toml and the command failed. You have to have your Netlify.toml file created before you can run locally.

现在，运行上面定义的npm脚本。 请注意，在屏幕快照中，我尝试在创建Netlify.toml之前运行一次此命令，但该命令失败。 您必须先创建Netlify.toml文件，然后才能在本地运行。

Ok, now we've actually got something running. From here, I'm going to open up an app called Postman (go download and install it if you haven't already… trust me!!) to make test calls to the function (think a GUI for curl requests). With Postman open, I'll make a call to "localhost:9000", where lambda functions run by default locally. After making the request, I get a successful response.

好的，现在我们实际上正在运行某些东西。 从这里，我将打开一个名为Postman的应用程序（如果还没有下载，请下载并安装它……相信我！）来对该函数进行测试调用（想想curl请求的GUI）。 打开Postman后，我将调用“ localhost：9000”，其中lambda函数默认在本地运行。 提出请求后，我得到了成功的答复。

We've got Hello World working, so let's take it one step further. I want to give an example of extracting the post body, returning a JSON object instead of a string, and conditionally returning an error. So, I'm going to expect that calls to this function pass in an object with a name property like this.

我们已经在Hello World上工作了，所以让我们更进一步。 我想举一个提取帖子正文，返回JSON对象而不是字符串并有条件地返回错误的示例。 因此，我期望对该函数的调用传入具有这样名称属性的对象。

{ "name" : "James" }

To retrieve this data, originally, I thought I would just grab the body property off of the event parameter, and then the name parameter off of that...BUT, I was wrong. The body parameter is actually a string instead of an actual JSON object, so first I need to parse that JSON string into an object like this.

为了检索这些数据，最初，我以为我只是从事件参数中获取body属性，然后从该事件参数中获取name参数，但是，我错了。 body参数实际上是一个字符串，而不是一个实际的JSON对象，因此首先我需要将该JSON字符串解析为这样的对象。

const parsedBody = JSON . parse ( event . body ) ;

Using ES6, I can take this one step further and grab the name property off of the parsedBody by using destructuring.

使用ES6，我可以更进一步，并通过使用解构从parsedBody中获取name属性。

const { name } = JSON . parse ( event . body ) ;

For demo purposes, I'm going to say if the name is "James" it's a good request, otherwise, it's a bad request and return data or error appropriately. If the name is "James", I want to return a json object with a msg property. When we return JSON objects, they need to be "stringified" because the body parameter will always be a string that gets returned. Will look something like this.

出于演示目的，我要说的是如果名称是“ James”，这是一个好的请求，否则，这是一个错误的请求，并会适当地返回数据或错误。 如果名称是“ James”，我想返回一个带有msg属性的json对象。 当我们返回JSON对象时，需要对其进行“字符串化”，因为body参数始终是要返回的字符串。 看起来像这样。

callback ( null , {
    statusCode : 200 ,
    body : JSON . stringify ( { msg : "Thanks for visiting " + name } )
} ) ;

Otherwise, I'll return an error.

否则，我将返回错误。

callback ( new Error ( "You're not James" ) ) ;

The whole thing now looks like this.

现在整个事情看起来像这样。

Now, let's test in Postman again. First with the successful case.

现在，让我们再次在Postman中进行测试。 首先是成功的案例。

And the error case.

和错误的情况。

部署无服务器功能以Netlify ( Deploy Serverless Function to Netlify )

So far, we've just run our Lambda Function locally using the serve command. However, in production, we will need to run the build command, which will create the built assets that Netlify will serve up for. For this reason, I am going to create another script alias in the package.json file for building.

到目前为止，我们只是使用serve命令在本地运行Lambda函数。 但是，在生产中，我们将需要运行build命令，该命令将创建Netlify将为其服务的已构建资产。 因此，我将在package.json文件中创建另一个脚本别名以进行构建。

In Netlify, you only get one command to run when Continuous Deployment kicks in and grabs your latest code from Github. However, since I also need to build my Gatsby app, we will need two commands, one to build Gatsby and one to build your functions.

在Netlify中，只有启动“连续部署”并从Github中获取最新代码时，才能运行一个命令。 但是，由于我还需要构建我的Gatsby应用程序，因此我们将需要两个命令 ，一个用于构建Gatsby，一个用于构建函数。

To accomplish this, I also added a prod script which will allows me to run both of theses commands sequentially.

为此，我还添加了一个prod脚本，该脚本可让我依次运行这两个命令。

"prod" : "npm run build; npm run build:lambda" ,

Keep in mind, if you're not using Gatsby you may have an alternative build command or not need one at all.

请记住，如果您不使用Gatsby，则可能有另一种构建命令，或者根本不需要。

The last thing we need to do before deploying is update the Netlify.toml file. This configuration file is read by Netlify when Continuous Deployment is triggered. In this file, we can tell Netlify to run our newly created "prod" command. Configurations in this file will override existing configurations set in the Netlify UI.

部署之前，我们要做的最后一件事是更新Netlify.toml文件。 触发连续部署时，Netlify将读取此配置文件。 在此文件中，我们可以告诉Netlify运行我们新创建的“ prod”命令。 该文件中的配置将覆盖Netlify UI中设置的现有配置。

After checking these updates in and pushing to my Github repository, a new build will start that you can monitor in the Deployments tab. If you click on the deployment, you can view the logs. In the screenshot below, you can see our commands being run.

在检查了这些更新并推送到我的Github存储库后，将开始一个新的构建，您可以在“部署”选项卡中对其进行监视。 如果单击部署，则可以查看日志。 在下面的屏幕截图中，您可以看到我们的命令正在运行。

After the deployment has finished, you can navigate to the Functions tab. Since we actually deployed a function, you should notice your function listed in the dashboard (test.js below).

部署完成后，您可以导航到“功能”选项卡。 由于我们实际上已经部署了一个函数，因此您应该注意到仪表板上列出了您的函数（下面的test.js）。

回顾 ( Recap )

That's it, you should be ready to go. Keep in mind, you can be completely creative with your functions...they can do almost anything. Send an email, save data to a DB, make an API call… whatever you want. With functions under your belt, you can focus a lot on your front end (assuming you're using a static site generator like Gatsby), and fill in your backend needs using Lambda Functions or something like Firebase.

就是这样，您应该准备好了。 请记住，您可以完全发挥自己的功能……他们几乎可以做任何事情。 发送电子邮件，将数据保存到数据库，进行API调用……随您便。 借助功能，您可以将精力集中在前端上（假设您使用的是Gatsby之类的静态网站生成器），并使用Lambda Functions或Firebase之类满足后端需求。

Would love to hear in the comments about the projects you guys are working on and how working with Netlify has been for you. Feel free to comment below or reach out to me on twitter, @jamesQquick.

希望在评论中听到您正在从事的项目以及与Netlify的合作如何为您服务。 请在下面发表评论，或通过Twitter @jamesQquick与我联系。

资源资源 ( Resources )

• Netlify Functions
  网络化功能
• Source Code
  源代码
• Video Version
  影片版本

翻译自: https://scotch.io/tutorials/build-and-deploy-a-serverless-function-to-netlify

普元部署包部署找不到构建