netlify 部署vue_如何构建和部署无服务器功能以进行Netlify

介绍 (Introduction)

It is a good software engineering practice to separate portions of your code function to work independently of other parts. Since your codes are made up of functions basically, serverless functions allow you to deploy those functions without the complexity of managing a server to run them.

将代码功能的各个部分分开以独立于其他部分工作是一种很好的软件工程实践。 由于代码基本上由功能组成，因此无服务器功能使您可以部署这些功能，而无需管理服务器来运行它们。

In this tutorial, we will be learning what serverless functions are, how to write them, and how to deploy them on Netlify in minutes. We will also touch up on other uses of serverless functions.

在本教程中，我们将在几分钟内学习什么是无服务器功能，如何编写它们以及如何在Netlify上部署它们。 我们还将探讨无服务器功能的其他用途。

什么是无服务器功能？ (What are Serverless Functions?)

A serverless function is a function hosted on a cloud infrastructure and performs a single purpose. It is very similar to every other function you write as long as it has its own dependencies and can run on its own. It is serverless because it takes off the stress of server maintenance and scaling the function from you.

无服务器功能是托管在云基础架构上的功能，可以执行一个目的。 它与您编写的所有其他函数非常相似，只要它具有自己的依赖关系并且可以自己运行即可。 它是无服务器的，因为它减轻了服务器维护和扩展功能的压力。

Netlify has made it very easy to write any backend task and deploy it independently or alongside your project in simple steps. Your functions can also be deployed by a simple git push command if linked with your GitHub repository. These functions are called Netlify Functions.

Netlify使编写任何后端任务并轻松地将其独立部署或与您的项目一起部署变得非常容易。 如果与GitHub存储库链接，还可以通过简单的git push命令部署您的功能。 这些功能称为Netlify功能 。

Serverless functions work just like your API endpoint

无服务器功能就像您的API终结点一样工作

让我们构建我们的无服务器功能 (Let’s Build our Serverless Function)

创建一个项目文件夹 (Create a project folder)

Create an empty folder either manually or by running mkdir custom-netlify-functions. Use any name you feel like. Here I'm using 'custom-netlify-functions'.

手动或通过运行mkdir custom-netlify-functions创建一个空文件夹。 使用您喜欢的任何名称。 在这里，我正在使用“ custom-netlify-functions”。

使用GitHub设置CI / CD (Setup CI/CD with GitHub)

用GitHub初始化仓库 (Initialize repo with GitHub)

• Change to the folder cd custom-netlify-functions

  转到文件夹cd custom-netlify-functions

• Create a readme.md file touch readme.md

  创建一个readme.md文件， touch readme.md

• Run git init to initialize folder with Git repository

  运行git init以使用Git存储库初始化文件夹

• Run git add . && git commit -m "initial commit" to add the file and commit changes.

  运行git add . && git commit -m "initial commit" git add . && git commit -m "initial commit"以添加文件并提交更改。

• Go to github.com/new, create a new repo — preferably with same name

  转到github.com/new ，创建一个新的仓库 (最好使用相同的名字)

• Link the local repository with your remote repo like so: git remote add origin git@github.com:YourGithubName/your-repo-slug.git

  像这样将本地存储库与远程仓库链接： git remote add origin git@github.com:YourGithubName/your-repo-slug.git

• Run git push -u origin master to push your files

  运行git push -u origin master来推送文件

安装Netlify CLI (Install Netlify CLI)

We will be using the Netlify CLI as it makes it super easy to get our project up and running Run npm install -g netlify-cli

我们将使用Netlify CLI，因为它使启动和运行项目变得非常容易运行npm install -g netlify-cli

在文件夹中初始化Netlify (Initialize Netlify in folder)

If you don’t have a netlify account, create one now

如果您没有netlify帐户，请立即创建一个

While inside the folder, run netlify init to initialize the folder with netlify.

在文件夹中，运行netlify init以使用netlify初始化文件夹。

The prompt will ask you “What would you like to do?”, select “Create and configure a new site”. This option creates a new site on your netlify account.

提示将询问您“您想做什么？”，选择“创建并配置新站点”。 此选项在您的netlify帐户上创建一个新站点。

If you are already authenticated, it will ask you to select your team (Netlify Account). If you aren’t authenticated on netlify.com yet, it will open a browser and request that you enter your login credentials.

如果您已经通过身份验证，它将要求您选择团队(Netlify帐户)。 如果尚未在netlify.com上进行身份验证，它将打开浏览器并要求您输入登录凭据。

The next prompt will ask your Site name and if you’ll like to authenticate with Github. For site name, retain the same name as ‘custom-netlify-functions’ and authenticate with Github

下一个提示将询问您的站点名称，以及是否要通过Github进行身份验证。 对于网站名称，请保留与“ custom-netlify-functions”相同的名称，并通过Github进行身份验证

This step connects your Netlify account and repo with the same one you just created on GitHub.

此步骤将您的Netlify帐户和存储库与您刚在GitHub上创建的帐户连接起来。

Next prompts. For “Your build command”, simply press Enter key. For Directory to deploy to, press Enter key too to use “.” (the current directory).

下一个提示。 对于“您的构建命令”，只需按Enter键。 对于要部署到的目录，也请按Enter键以使用“。” (当前目录)。

让我们编码 (Let’s Code)

Create a netlify.toml file for our configuration and write the following code in it:

为我们的配置创建一个netlify.toml文件，并在其中写入以下代码：

[build]    functions = "functions"

This code tells Netlify that it can find our functions in the “functions” folder

此代码告诉Netlify，它可以在“ functions”文件夹中找到我们的功能

Create a functions folder where we will write our functions

创建一个functions文件夹，我们将在其中编写函数

Inside the functions folder, create a file called hello.js

在functions文件夹中，创建一个名为hello.js的文件

You access your serverless function by using a provided URL with your filename at the end. So, every function ends with <name-of-file> (without the .js)

您可以通过使用提供的URL(末尾带有文件名)来访问无服务器功能。 因此，每个函数都以<文件名>结尾(不带.js)

Your serverless function that will be called must be named handler and it takes 3 parameters in this format:

您将要调用的无服务器函数必须命名为handler ，它采用以下格式的3个参数：

//hello.jsexports.handler = function (event, context, callback) {}

• The event parameter contains all headers, query parameters and post data

  event参数包含所有标题，查询参数和发布数据

• The context parameter provides information about the context in which the serverless function was called, like certain user information.

  context参数提供有关在其中调用无服务器功能的上下文的信息，例如某些用户信息。

• The callback (optional) parameter is called to return a response when this serverless function is called.

  当callback此无服务器功能时，将callback (可选)参数以返回响应。

The callback function can return either an error(first parameter) or a response object like so:

回调函数可以返回错误(第一个参数)或响应对象，如下所示：

callback(null, {    "isBase64Encoded": true|false,    "statusCode": httpStatusCode,    "headers": { "headerName": "headerValue", ... },    "body": "..."})

Back to our hello.js function, update it like so. Let’s just return an object with “Hello World”.

回到我们的hello.js函数，像这样更新它。 我们只用“ Hello World”返回一个对象。

exports.handler = function (event, context, handler) {    callback(null, {        statusCode: 200,         body: "Hello World"     });}

让我们在本地运行我们的功能 (Let’s run our function locally)

Run netlify dev or ntl dev from your terminal.

从终端运行netlify dev或ntl dev 。

To access your serverless function in the browser, use the URL: <host_url>/.netlify/functions/<function_file_name>

要在浏览器中访问无服务器功能，请使用URL： <host_url>/.netlify/functions/<function_file_name>

Going by our hello.js app, visit: http://localhost:888/.netlify/functions/hello

通过我们的hello.js应用程序，访问： http://localhost:888/.netlify/functions/hello

…and that’s it. Our Netlify Function.

…就是这样。 我们的Netlify功能。

让我们将无服务器功能部署到生产中 (Let’s deploy our Serverless Function to production)

Netlify makes it super easy to deploy to production with just one command.

Netlify使仅需一个命令即可非常轻松地部署到生产环境。

Remember we had linked our local repo to our GitHub and also did CI/CD from GitHub to our Netlify account. Simply run the commands:

记住，我们已经将本地存储库链接到我们的GitHub，也将CI / CD从GitHub链接到了我们的Netlify帐户。 只需运行以下命令：

• git add . && git commit -m "created the first serverless function "

  git add . && git commit -m "created the first serverless function "

• git push This commits and pushes our code to GitHub which automatically gets picked up by Netlify and deploys it.

  git push这会提交我们的代码并将其推送到GitHub，该代码会自动由Netlify拾取并部署。

Alternatively, if you would like to push directly to Netlify. Or you didn’t set up CI/CD, use the commands below:

或者，如果您想直接推送到Netlify。 或者您没有设置CI / CD，请使用以下命令：

• Run netlify deploy to deploy to draft

  运行netlify deploy以部署到草稿

• Run netlify deploy --prod to deploy to production

  运行netlify deploy --prod以部署到生产

That’s it. Serverless Functions (Netlify Functions) can do everything and anything your backend API can.

而已。 无服务器功能(Netlify功能)可以完成您的后端API可以做的所有事情。

无服务器功能可以做什么的示例： (Examples of what a Serverless Function can do:)

• Perform authentication
  执行身份验证
• Send an email using any mail server API
  使用任何邮件服务器API发送电子邮件
• Process payment
  处理付款
• Upload files
  上传文件
• Connect to external APIs to perform other functions
  连接到外部API以执行其他功能
• Connect to database to perform CRUD operations
  连接到数据库以执行CRUD操作

… and so many more

……还有更多

资源资源 (Resources)

• Netlify Functions

  网络化功能

• Netlify

  Netlify

• Sample Codes of more Netlify Functions

  更多Netlify函数的示例代码

If you find this write up helpful, do drop a comment. Should you have any difficulty or issues or better ways of writing this or more insights, do reach out to me on Twitter, Github or Connect on LinkedIn

如果您发现这对您有帮助，请不要发表评论。 如果您有任何困难或问题，或者有更好的方法来编写此信息或更多见解，请在Twitter ， Github或LinkedIn上与我联系

Originally published at https://hellotunmbi.hashnode.dev.

最初发布在 https://hellotunmbi.hashnode.dev 。