使用 Netlify Functions 和 Zapier Webhooks 构建您自己的 API（第二部分）

从 JAMstack 应用发送数据可能需要一些工作，但通常都很简单。调用 API 或无服务器函数只需要一些标准的 JavaScript 代码。但是接收数据呢？当应用源代码是静态的时，API 如何与我们的应用通信？

实现这一目标的方法有很多，但本教程将介绍一种结合使用多种工具的解决方案，包括Zapier 的 Webhooks、Netlify Functions和GitHub API。这些工具能够帮助我们从外部数据源接收数据，将必要的信息添加到网站的源代码中，并自动使用新信息重建网站。

请查看本系列的第一部分，其中介绍了如何使用 Zapier Webhook 和 Netlify Functions 从您的应用程序发送数据。

请注意，Zapier 的 webhook 目前是一项高级功能。

本文中的示例代码可在https://github.com/remotesynth/webhooks获取。

设置 Netlify 函数

我们将构建的示例将使用 Zapier 来监视 RSS 源列表的更改，然后通知 Netlify 函数，该函数会将新文章的标题和 URL 添加到包含文章数组的数据文件中。这将导致网站更新并重新构建。

我们先来创建 Netlify 函数。这样我们就可以在设置 Zapier 之前测试并建立 Zapier webhook 需要连接的 API。这样做的原因是，拥有一个用于在 Zapier 中测试 webhook 的端点 URL，可以简化后续的配置过程。

首先，创建一个文件夹来存放我们的 Netlify 函数（我给它取了个名字lambda，但你可以随意命名）。接下来，netlify.toml在网站根目录创建一个配置文件，并添加以下配置，告诉 Netlify 函数在哪里（也就是lambda我们之前创建的文件夹）。

[build]
  functions = "./lambda"

zapierReceive.js接下来，在该文件夹内创建一个名为 `.htm` 的文件lambda。该文件将包含我们函数的代码。

顺便提一句

在继续之前，我想先分享一个小故事，因为它有助于说明在使用 JAMstack 和无服务器架构时经常需要转变的思维方式。起初，我以为这个例子会很简单——我只需要加载一个本地 JSON 文件，使用文件系统 API 更新它，然后——哇！——成功了！

你们中有些人可能会想：“等等，这根本行不通！” 你们说得没错。首先，这个函数存在于 AWS 中，无法访问 Netlify 的文件系统。其次，在实际应用中，你的数据很可能会被加载到各种模板中，并在静态网站生成器的构建过程中预渲染使用。这意味着，即使我能访问 Netlify 的文件系统，任何更改都会被我的 Git 仓库触发的重新构建覆盖。

所以，我们真正想要的是将更改写入 git 存储库（我的存储库在 GitHub 上），然后此更改将自动触发 Netlify 重建网站，Netlify 将使用我更新后的数据文件。

创建函数

现在我对想要构建的东西有了更清晰的认识，接下来需要找到一种方法让我的 Netlify 函数与 GitHub 通信。幸运的是，GitHub 提供了一个名为Octokit的工具包，它使用JavaScript 实现了 REST 接口，我可以将其集成到我的基于 Node 的函数中。由于 API 的功能非常丰富，文档可能看起来有点复杂，但通过搜索功能，我很快就找到了所需的方法。要安装 Octokit，请使用npm install @octokit/rest --savedev……

第一步是进入GitHub 个人资料中的开发者设置，创建一个访问令牌，用于通过 API 进行身份验证，因为我们需要对仓库拥有写入权限。您需要授予该令牌读写包的权限。

复制令牌，然后前往此站点的 Netlify 管理后台（如果您还没有站点，则需要先进行设置）。依次点击“设置”>“构建与部署”>“环境”。创建一个包含该令牌的新环境变量，以便我们可以在函数代码中访问它，而无需将其公开。

现在我们来看看它的内容zapierReceive.js。内容很多，但我会尽我所能地解释清楚。

const Octokit = require("@octokit/rest"),
      owner = 'remotesynth',
      repo = 'webhooks';

exports.handler = async (event, context, callback) => {
  try {
    const octokit = new Octokit({auth:process.env.GITHUB_TOKEN});
    if(!event.body) {
      return { 
          statusCode: 500, 
          body: 'Title and link are required.'
      };
    }
    const body = JSON.parse(event.body);
    const newItem = {};
    newItem.title = body.title;
    newItem.link = body.link;
    if(!newItem.title) {
        return { 
            statusCode: 500, 
            body: 'title parameter required' 
        };
    }
    if(!newItem.link) {
        return { 
            statusCode: 500, 
            body: 'link parameter required' 
        };
    }
    let path = 'links.json';
    return octokit.repos.getContents({
      owner,
      repo,
      path
    }).then(res => {
      console.log(res);
      let buff = Buffer.from(res.data.content, 'base64');
      let linksRaw = buff.toString('utf-8');
      let linksJSON = JSON.parse(linksRaw);
      let message = 'Updated links';
      let content = '';
      let sha = res.data.sha;
      linksJSON.links.push(newItem);
      linksRaw = JSON.stringify(linksJSON);
      buff = Buffer.from(linksRaw);
      content = buff.toString('base64');
      return octokit.repos.createOrUpdateFile({
        owner,
        repo,
        path,
        message,
        content,
        sha
      }).then(res => {
        return {
          statusCode:200, 
          body: '{"success":"true"}'
        }
      })
    });


  } catch (err) {[]
    return { statusCode: 500, body: err.toString() };
  }

};

前几行代码导入了 Octokit，并设置了要连接的用户名和仓库变量。函数首先使用之前设置的 Netlify 环境变量实例化 Octokit 进行身份验证。接下来进行一些基本的验证，确保已发送标题和 URL。之后，我们使用 Octokit 调用 GitHub API，获取要修改的文件的现有内容，该内容以 Base64 编码返回（或许有其他方法可以实现，但 Base64 编码不影响结果，不过目前这种方法满足我的需求）。成功后，我们将新条目添加到数组中，将其转换回 JSON 格式，然后使用 Octokit 将内容连同提交信息一起写回 GitHub。

呼！😫 说实话，写起来比解释起来容易得多。

测试功能

现在函数已经编写完成，我们可以使用Netlify Dev在本地运行该函数，并使用Postman等工具进行测试。根据我的经验，使用 Netlify Dev 在本地测试函数通常需要先将函数部署到 Netlify 上，因此如果您尚未部署该函数，请先进行部署。之后，任何更改都可以在本地进行测试，而无需重新部署。完成部署后，使用 `netlify dev` 在本地启动站点netlify dev，这将同时运行站点和函数以进行本地测试。

假设您使用的是 Netlify Dev 的默认设置，那么用于测试该功能的 URL 应该是 [此处应填写 URL] localhost:8888/.netlify/functions/zapierReceive。请将该 URL 以及 JSON 有效负载一起添加到 Postman 中，以确保一切运行正常。

如果操作成功，我们就可以进行下一步了。需要注意的是，即使我们是在本地调用此操作，它也会更改您的 GitHub 仓库，这些更改会反映在您的网站上。

部署到 Netlify

您可能已经部署了该函数进行测试，但您可能会遇到一个问题。我们使用 Octokit，但它并未安装在运行该函数的实例上。因此，如果您现在通过 Postman 调用您的公共 URL，应该会收到错误提示。这个问题有多种解决方案。

• 将 `npm install` 作为预构建步骤或构建步骤运行。您可以在此处的支持文章中找到更多详细信息。请注意，这可能会占用您的构建时间，如果此过程频繁运行，则可能会产生费用。
• 使用Netlify Lambda在构建步骤中创建包含依赖项的预打包函数。
• 使用 Netlify CLI部署未捆绑的函数netlify deploy。

一旦我们部署了包含必要依赖项的函数，就应该能够通过 Postman 在 Netlify 上调用该函数，使用类似这样的 URL 结构[My Netlify URL]/.netlify/functions/zapierReceive。这将更新 URL 列表，并导致网站使用新添加的 URL 重建。

在 Zapier 中设置 Webhook

现在我们有了可以发布内容的端点（即我们的 Netlify 函数），就可以在 Zapier 中设置剩余流程了。首先创建一个新的 Zap，搜索“Zapier 的 RSS”，然后选择“多个订阅源中的新条目”。此任务将监视 RSS 源列表，并在检测到新帖子时运行。

接下来，我们将选择订阅源。我选择了几个我最喜欢的面向开发者的网站。

设置好所需的订阅源后，下一步是将 RSS 数据映射到要发送到 Webhook 的字段。在本例中，我们只需要 `<field>`title和link`<parameter>` 参数。

完成此步骤后，您可以点击“测试并继续”以继续配置 webhook。

在设置的“执行此操作……”部分，我们需要搜索并选择“Zapier Webhooks”任务。选择后，将“操作事件”选项设置为“POST”。这将指定数据发送到我们端点的方法。

点击“继续”后，您需要指定 Netlify 端点的 URL，并将来自 Webhook 的数据映射到要发送到该端点的参数。在此处输入您在 Netlify 中的函数 URL，并选择 JSON 作为有效负载类型。然后，将现有参数映射title到link数据中的title相应link参数。其余配置选项可以保留默认设置。

点击“继续”即可测试并最终保存您的配置。如果函数返回成功，您可以启用我们的 Zap。Zap 运行后，您应该会在网站的 JSON 数据中看到添加的链接，如果您已将这些数据映射到布局，这些链接也会反映在网站本身。例如，这是我的 Zap 运行一段时间后的效果（设计精美）。

后续步骤

显然，这只是使用这些工具的一个非常基础的示例。Zapier 集成了 1500 多个应用程序，这意味着您可以集成海量的数据源，并将数据导入您的网站。例如，您可以自动抓取 Instagram 上发布的新图片，并将这些图片推送到您网站的图库中。或者，您可以从 Google 表格中提取数据，方便编辑人员更新网站上显示的数据列表。这些只是几个例子，虽然使用 Zapier 并非实现这些功能的必要条件，但它确实可以简化流程，并帮助您避免深入研究每个特定 API 的细节。

如果您想查看本教程和上一篇教程的示例代码，可以在https://github.com/remotesynth/webhooks找到。