如何在Gatsby中使用Netlify函数

189 阅读8分钟

简介

Next.js提供的最酷的功能之一是API路由

API路由类似于典型的路由,只是它不提供静态构建的HTML页面,而是调用一个Node.js函数。你可以用它来做各种事情。

  • 管理用户认证

  • 从数据库中获取和设置应用数据

  • 代理对第三方API的请求,同时保持机密性

  • 任何你通常会使用Node.js的东西!

即使是像这个博客这样的静态网站,也能从混合使用Node中获益。例如,这个博客在每篇文章的底部都有一个点击计数器。点击率的数据需要存储在一个数据库中。

一个真正活生生的点击率计数器!点击有惊喜✨

Gatsby对API路由没有一流的支持,但不用担心!在Netlify的帮助下,Gatsby可以实现对API路由的支持。在Netlify的帮助下,我们可以建立一个同样棒的东西。

本教程将告诉你如何将Netlify功能添加到你现有的Gatsby网站。不需要有无服务器/后端代码的经验。你需要一个目前正在Netlify上部署的网站,才能跟上进度。

什么是Netlify功能?

Netlify Functions本质上是AWS Lambda函数,被包装并集成到Netlify的平台中。

如果你听说过 "无服务器 "这个词,通常是指AWS Lambda。本质上,它是一个云平台,让你在运行后端代码时无需考虑服务器。你的代码同时存在于许多不同的计算机上,并根据需要自动扩大和缩小。你不需要为租用服务器而支付月费,而只需要在你的代码被执行时支付。

AWS的产品是出了名的难用,AWS Lambda也有其尖锐的一面。Netlify Functions通过做一些事情来降低这些边缘。

  • 当你在网站上发布修改时,捆绑和部署你的代码

  • 管理路由

  • 提供一个本地开发环境

作为对这些便利的交换,Netlify收取了一点费用。你的第一个125,000个请求是免费的,但超过这个数字,就需要增加25美元/月/网站的套餐(一旦你超过每个网站每月200万个请求,价格就会上升)。

你好,世界

让我们看看Netlify功能的一个简单的例子。创建一个新的根级目录叫functions ,并添加一个文件,hello-world.js

// /functions/hello-world.js
exports.handler = async function () {
  return {
    statusCode: 200,
    body: 'Hello world!',
  };
};

分解一下,我们的文件有一个单一的函数,用CommonJS的语法导出为handler 。这个函数可以被赋予参数,我们将在稍后看到它们。现在,我们不需要它们。

我们希望从这个函数中返回一个响应对象,它应该包括。

  • statusCode, 一个HTTP状态代码

  • body, 响应的内容。必须是一个字符串(你可以用JSON.stringify 来表示对象)

为了使用这个函数,你需要把这个文件保存在顶层的functions 目录中。该文件的名称将成为你可以用来进行请求的路径。例如:/functions/hello-world.js 将可以在https://your-site-com/.netlify/functions/hello-world

配置Netlify

我现在要警告你:本教程的这一部分很无聊。幸运的是,这是一个一次性的设置交易。把它想象成你需要填写的烦人的保险表格,他们才会让你去玩云霄飞车。

我们需要做两件事。

  1. 为我们的Netlify项目启用功能

  2. 将我们的本地开发环境链接到我们的Netlify网站上

启用功能

登录到你的Netlify仪表盘,选择你的网站。这些图片显示了为您的网站启用功能所需的顺序。

The Netlify “site details” page, with the “Site settings” button circled.点击 "网站设置 "按钮The site settings page. In the left side-bar, the navigation link for “functions” is circled点击侧边栏中的 "函数"The “Deploy Settings” for your functions. The functions directory is not set, and there's a circled button to “Edit settings”点击编辑设置The “Deploy Settings” for your functions, with the edit form toggled on. The word “functions” has been entered in the text field, and the “Save” button is circled输入 "函数 "并点击保存

链接我们的本地开发环境

接下来,我们需要安装Netlify的命令行工具。打开一个新的终端并运行。

npm install -g netlify-cli

cd 进入你的Gatsby项目,这样我们就可以把它和我们的Netlify项目连接起来。

netlify link

你会被提示选择正确的项目。在许多情况下,它可以从Git远程推断出项目。完成这些后,你应该看到一个像这样的快乐的小消息。

A confirmation message, saying that the project has been linked

在本地运行

为了执行我们写的函数,我们需要向这个URL发出请求。

这个 URL 是由我们本地的函数路径 (/functions/hello-world.js) 衍生出来的,但没有.js 的后缀,而有.netlify 的前缀。

当然,如果我们启动我们的Gatsby开发环境并尝试访问localhost:8000/.netlify/functions/hello-world ,我们会得到一个404错误;我们的Gatsby开发服务器对此一无所知!

相反,我们需要运行Netlify Dev,一个在你的开发机器上运行Netlify平台的服务。在写这篇文章的时候,它还处于测试阶段,但它对运行本地无服务器功能非常有用。

在你的Gatsby项目中,运行。

/.netlify/functions/hello-world

你应该得到一大堆的输出。

Terminal output of Netlify Dev

让我们一步步来看看。

  1. 我们在我们的项目中运行netlify dev

  2. 它能正确识别出这是一个Gatsby项目

  3. 它在34567端口设置了一个AWS Lambda服务器

  4. 它启动了一个Gatsby的开发服务器npm run develop

  5. 它在端口8888上启动了一个封装器服务器

  6. 它呼应了典型的Gatsby输出,显示了一个Gatsby开发服务器在8000端口(Gatsby应用的默认端口)。

这是个很大的服务器!除了8000端口的典型Gatsby开发服务器,它还在34567端口运行一个Lambda服务器,在8888端口运行一个 "包装器 "服务器。

包装器服务器的想法是,它拦截任何对/.netlify 的请求。Gatsby应用程序没有该路径的路由,但Netlify有!这让我们可以通过访问我们的函数来实现。这使得我们可以通过访问localhost:8888/.netlify/functions 来访问我们的功能。

Chrome window showing that going to localhost:8000/.netlify/hello-world shows the text “Hello World!”

使用函数

我们的Netlify函数就像一个API端点一样工作:我们可以在任何时候用fetch 来执行它们。返回的值将是响应。

我们可以自由地使用我们想要的任何HTTP动作(GET,POST, 等等)。下面是一个例子,说明我们如何检索 "hello World!"副本。

fetch('/.netlify/functions/hello-world')
  .then((res) => res.text())
  .then((text) => console.log(text));

那在生产中呢?

在本教程中,我们看到了如何设置我们的开发环境以利用Netlify功能。令人高兴的是,我们不需要做任何特别的事情就可以让它们在生产中发挥作用当你推送到Github时,Netlify会部署你的函数。它们会和开发中的路径相同,所以一切都会正常。

如果你使用Gatsby Cloud作为你的CI工具,只要Netlify是部署的目标,这个教程也应该有效。

"事件 "参数

到目前为止,我们所看到的功能对所有的请求都有相同的响应。这并不完全现实;我们的函数可能取决于查询或正文参数、cookies、HTTP方法等。幸运的是,我们的函数需要一个event 参数,它告诉我们关于这个请求的一切。

下面是一个快速浏览。

exports.handler = async function (event) {
  // Query params
  // `?hi=5` -> { hi: 5 }
  console.log(event.queryStringParameters);
  // HTTP method (GET, POST, etc)
  console.log(event.httpMethod);
  // Request body (for non-GET requests)
  // In object form, no need to JSON.parse
  console.log(event.body);
  // Headers
  // Includes cookie, referer, origin, and all the typical
  // stuff you'd expect.
  console.log(event.headers);
};
Link to this headingCDNs for the ba

后台的CDN

许多人选择Gatsby是因为他们喜欢这样的想法:网站可以被编译成普通的HTML+CSS+JS,部署在世界各地的一个简单的CDN上,而不是一个单一的服务器。

这真的很酷,因为这意味着你可以得到一个速度极快的网站,并有完美的正常运行时间;因为你的网站被复制到世界各地数以千计的独立静态服务器上,如果其中有一堆服务器自发爆炸,那就完全没有问题。

直到最近,如果我们需要一个动态运行时的后端,我们需要引入一个单点故障;我们需要租一个VPS并安装一个Node/Express应用程序,并希望它不会在流星撞击数据中心或我们的网站被Product Hunt报道时崩溃。

无服务器函数是后台的CDN。当你通过Netlify Functions将一个函数部署到AWS Lambda时,它被分散在整个云中,并根据流量自动扩大或缩小。我们不会因为引入后端功能而失去任何弹性!