20 分钟内使用 Netlify Functions 构建后端

2025-06-10

20 分钟内使用 Netlify Functions 构建后端

Netlify 使部署前端变得快速而简单，而 Netlify 功能使运行无服务器后端也变得同样简单。

在本指南中，我们将介绍如何使用 Netlify 函数。作为一名独立开发者，您应该选择无服务器产品，因为它们入门门槛低，并且提供丰富的免费套餐。而作为企业级商店，您应该认真考虑它们，因为它是一种极其经济、快速且可扩展的后端基础设施构建方式。

用例——您可以构建什么？

现代 JavaScript 框架允许我们在客户端构建大型复杂的应用程序，但它们偶尔会遇到一些限制。对于其他所有情况，有一个“后端”可以出色地处理以下一些用例：

  • 保护机密和凭证
  • 服务器端渲染
  • 发送电子邮件
  • 处理文件 IO
  • 运行集中式逻辑
  • 在主线程外执行任务
  • 绕过锁定 API 的 CORS 问题
  • 提供渐进式增强/NoScript 回退

函数的复合

Netlify Functions提供了一个AWS Lambdas 的包装器。虽然 Netlify 文档应该足够了，但如果您想在自己的 AWS 订阅上运行，最好知道有一个应急方案。不过，Netlify 会为您处理一些部署难题，所以让我们从这里开始吧。

以下是 JavaScript 中 Netlify 函数的基本框架：

exports.handler = async function(event, context) {
    return {
        statusCode: 200,
        body: JSON.stringify({message: "Hello World"})
    };
}
Enter fullscreen mode Exit fullscreen mode

如果你熟悉在 Node 上运行 JavaScript，那么这看起来应该很熟悉。每个函数都应该位于其自己的文件中，并将执行分配给 的任何内容exports.handler。我们可以访问event和context。我们可以在 Node 上运行任何我们需要的代码，并返回任何我们想要的响应类型。

为了完成设置，我们需要在 GitHub 上创建一个空仓库。我们需要将函数添加到一个文件夹中。虽然可以使用任何名称，但常见的做法是创建一个文件夹 name functions。让我们在其中添加一个名为hello.js

//functions/hello.js
exports.handler = async (event, context) => {
  const { name = "Anonymous" } = event.queryStringParameters;
  return {
    statusCode: 200,
    body: `Hello, ${name}`
  };
};
Enter fullscreen mode Exit fullscreen mode

在我们的函数中，我们可以从传入的查询字符串参数中获取信息。我们将解构这些参数（具有默认值）并寻找一个name参数。

为了实际连接我们的功能文件夹，我们需要netlify.toml在项目的根目录添加一个配置文件。

# netlify.toml
[build]
  functions = "functions/"
Enter fullscreen mode Exit fullscreen mode

先走后跑（本地）

此时我们的“repo”应该是这样的：

my-app
├── functions
│   └── hello.js
└── netlify.toml
Enter fullscreen mode Exit fullscreen mode

在本地运行 Netlify 网站并附带所有附加功能的最佳方式是使用可通过 npm 安装的Netlify Dev ：

npm install netlify-cli -g
Enter fullscreen mode Exit fullscreen mode

然后像这样启动你的开发服务器：

netlify dev
Enter fullscreen mode Exit fullscreen mode

Netlify 开发

您的“站点”现在应该在 上线了http://localhost:8888。默认情况下，Netlify 将函数托管在子路径下，/.netlify/functions/<fn-name>因此您可以在此处调用您的函数：

http://localhost:8888/.netlify/functions/hello?name=Beth

现在，让我们利用 Netlify 的另一个免费功能“重定向”/.netlify/functions ，让函数的地址更简洁一些。这样，我们就可以通过用 替换 ，在更简洁的 URL 中公开相同的函数/api。

从:<site>/.netlify/functions/hello
到:<site>/api/hello

为此，请将以下信息附加到您的netlify.toml配置中，然后重新启动 Netlify dev：

[[redirects]]
  from = '/api/*'
  to = '/.netlify/functions/:splat'
  status = 200
Enter fullscreen mode Exit fullscreen mode

这会将所有流量内部路由/api/*到相应的函数目录，通配符将捕获所有附加路径信息，并移动到:splat。通过设置HTTP 状态代码 =200，Netlify 将执行“重写”（而不是“重定向”），这将更改服务器响应，而不会更改浏览器地址栏中的 URL。

因此，让我们使用新的 URL 再试一次：

http://localhost:8888/api/hello?name=Beth

你好世界

👏 太棒了，你刚刚创建了一个函数！（你一直在实时关注，对吧？）

获取 CRUD 并提交数据

现在我们可以构建函数了，让我们为一个简单的待办事项应用程序创建我们自己的 API，其中包含一些基本的 CRUD 函数（创建、读取、更新和删除）。

无服务器计算的核心原则之一是它无状态。如果需要在函数调用之间存储任何状态，则应将其持久化到另一个层，例如数据库。本文将使用 DynamoDb 的免费版本，但您也可以使用 BYODB（自带数据库），尤其是在支持 Node SDK 的情况下。

在接下来的步骤中，我们将：

  1. 在 AWS 中的 DynamoDB 上设置表
  2. 将 npm 包安装到我们的项目中
  3. 在 AWS 中设置密钥，并添加到我们的环境变量中
  4. 为 NodeJs 初始化 aws-sdk 包
  5. 最后添加一个 Netlify 函数路由来在我们的数据库中创建一条记录

AWS——亚马逊网络服务

本指南假设您对 AWS 和 DynamoDB 有一定程度的熟悉，但如果您是 DynamoDB 新手，则可以从本指南《Node.js 和 DynamoDB 入门》开始。

在 AWS 上，创建一个名为 的表NetlifyTodos，其字符串分区键名为key。

NPM——节点包管理器

现在，让我们设置 npm 并安装aws-sdk、nanoid、 & dotenv。

在项目根目录的终端中，运行以下命令：

npm init -y
npm install aws-sdk nanoid dotenv --save
Enter fullscreen mode Exit fullscreen mode

ENV——环境变量

您需要为 IAM 用户预置一个访问密钥/机密，我们将使用它来验证 API 调用。在服务器上运行这些调用的好处之一是，您可以通过环境变量保护应用程序机密，而不必将它们发送到客户端（不建议这样做）。

有很多方法可以在您的本地计算机上登录 AWS，但为了将所有内容保留在我们的项目中，让我们.env在项目的根目录中创建一个文件，并使用您自己的值填写以下键：

# .env
MY_AWS_ACCESS_KEY_ID=***
MY_AWS_SECRET_ACCESS_KEY=***
MY_AWS_REGION=us-east-1
Enter fullscreen mode Exit fullscreen mode

注意：这里有一个小问题，更常见的AWS_ACCESS_KEY_ID是 Netlify 进程使用的保留环境关键字。因此，如果我们想要传递环境变量，就必须使用自己的键，在本例中以 为前缀MY_。

一旦将它们添加到流程中，我们就可以解构它们并用于设置我们的 AWS SDK。我们需要为每个 CRUD 函数设置 AWS，因此让我们将所有这些逻辑组装到一个名为 的单独文件中dyno-client.js。

// dyno-client.js
require('dotenv').config()
const { MY_AWS_ACCESS_KEY_ID, MY_AWS_SECRET_ACCESS_KEY, MY_AWS_REGION } = process.env
Enter fullscreen mode Exit fullscreen mode

以下内容是必需的。

SDK——软件开发工具包

使用 aws-sdk 可以让我们从代码库连接到 DynamoDB 变得更加轻松。我们可以创建一个 Dynamo 客户端实例，用于接下来的示例：

// dyno-client.js
const AWS = require("aws-sdk");

AWS.config.update({
    credentials: {
        accessKeyId: MY_AWS_ACCESS_KEY_ID,
        secretAccessKey: MY_AWS_SECRET_ACCESS_KEY
    },
    region: MY_AWS_REGION,
});

const dynamoDb = new AWS.DynamoDB.DocumentClient();
Enter fullscreen mode Exit fullscreen mode

为了使其可用于我们所有的功能，请将 DynamoDB 实例添加到您的导出中，我们会在需要时获取它：

module.exports = { dynamoDb, TABLE_NAME }
Enter fullscreen mode Exit fullscreen mode

创建待办事项（截止日期😂）

⚡ 我们终于准备好创建我们的 API 函数了！

在以下示例中，我们将回发包含text待办事项的表单数据。我们可以将表单数据解析为 JSON，并将其转换为待办事项以插入到表中。如果成功，我们将返回状态码为 的结果200；如果失败，我们将返回错误消息以及错误本身的状态码。

// functions/create.js
const { nanoid } = require("nanoid");
const { dynamoDb } = require("../dyno-client")

exports.handler = async(event, context) => {
    try {
        // parse form data
        const body = JSON.parse(event.body);

        // create item to insert
        const params = {
            TableName: TABLE_NAME,
            Item: {
                key: nanoid(7),
                text: body.text,
                createDate: new Date().toISOString(),
            },
        };

        let result = await dynamoDb.put(params).promise();

        // return success
        return {
            statusCode: 200,
            body: JSON.stringify({
                success: true,
                data: result,
            }),
        };

    } catch (error) {
        return {
            statusCode: error.statusCode || 500,
            body: JSON.stringify(error),
        };
    }

};
Enter fullscreen mode Exit fullscreen mode

这应该能让你大致了解如何公开 API 路由和逻辑以执行各种操作。我不会再提供更多示例，因为这里的大部分代码实际上只是 DynamoDB 特有的，我们会留到另一篇文章中再讲。但关键在于，我们能够用极少的管道操作返回一些有意义的数据。这就是重点！

有了函数，您只需编写自己的业务逻辑！

调试——无摩擦反馈循环

在使用节点和 API 路由时，我喜欢使用 Visual Studio Code 中两个关键的调试工具。

  1. 脚本调试器 &
  2. Rest 客户端插件

✨您知道吗，您无需配置自定义launch.json文件，而是可以直接在文件中的 npm 脚本上运行和附加调试器package.json：

npm 调试

虽然Postman之类的工具是综合测试套件的重要组成部分，但您可以添加REST 客户端扩展，直接在 VS Code 中调用 API 命令。我们可以轻松地使用浏览器模拟 GET 端点，但这也使得调用其他 HTTP 动词并回发表单数据变得非常容易。

只需将类似文件添加test.http到您的项目中即可。REST客户端支持扩展变量环境和自定义变量。如果您要删除多个调用，可以使用 分隔符分隔多个不同的调用###。

将以下内容添加到示例文件中：

@baseUrl = http://localhost:8888

// create todo item
POST {{baseUrl}}/api/create
content-type: application/json

{
    "text": "Feed the cats",
}
Enter fullscreen mode Exit fullscreen mode

发送请求

现在，我们可以通过点击“发送请求”来运行上述代码。这将触发我们的 Netlify 开发服务器，并允许我们在本地单步执行我们的函数逻辑！

调试器断点

出版

发布到 Netlify 也很容易。请确保你的项目已提交，并推送到 GitHub、GitLab 或 BitBucket 上的 git 仓库。

登录Netlify，然后单击“从 Git 创建新站点”选项并选择您的 repo。

Netlify 会提示输入“构建命令”和“发布目录”。信不信由你，我们实际上还没有这些东西，设置前端可能是另一天的项目。这些命令指的是部署中的静态站点构建部分。构建无服务器函数所需的一切都在我们的函数目录和netlify.toml配置中。

部署网站后，我们需要做的最后一件事是在 Build > Environment 下将环境变量添加到 Netlify

netlify 环境变量

下一步——这只是开始

希望您能从中汲取一些灵感，了解如何在自己的网站和项目中运用这些技术。本文重点介绍 Netlify 函数的构建和调试，但留给读者的一个重要练习是如何在前端充分利用这些功能。

提示：如果要将 Create React App 添加到当前目录（不创建新文件夹），请.在搭建新应用程序时添加一个，如下所示：

create-react-app .
Enter fullscreen mode Exit fullscreen mode

尝试一下 - 构建一个前端，然后让我知道KyleMitBTV的进展如何！

要了解更多背景信息，您可以浏览 GitHub 上该文章的完整源代码KyleMit/ netlify-functions-demo。

如需更多包含实际代码的实用示例，请查看以下资源！

祝你好运，去创造事物吧！

This Dot Labs 是一家现代化的网络咨询公司，致力于帮助企业实现数字化转型。如需 React、Angular、Vue、Web Components、GraphQL、Node、Bazel 或 Polymer 方面的专家架构指导、培训或咨询，请访问thisdotlabs.com。

This Dot Media 致力于为所有人打造一个包容且具有教育意义的网络。我们通过活动、播客和免费内容，让您随时了解现代网络的最新进展。如需了解详情，请访问thisdot.co。

鏂囩珷鏉ユ簮锛�https://dev.to/thisdotmedia/build-your-backend-with-netlify-functions-in-20-minutes-2gc4
Devto 翻译
PREV
使用 Nest 进行 GraphQL 订阅：如何跨多个正在运行的服务器发布
NEXT
既然 Bun 也是捆绑软件，为什么还要使用 Vite？ - Vite 与 Bun 的对比