假设您正在使用 JAMstack 风格的网站(不使用服务器端语言),但您想执行一些动态操作,例如 **发送电子邮件**。没问题!这就是 JAMstack 的核心所在。它不仅仅是静态托管。它是静态托管 **加上** 通过 JavaScript 和 API 执行任何您想执行的操作。
以下是设置方法:您需要一个服务来帮助您发送电子邮件。让我们从众多服务中随机选择 Sparkpost。有很多此类服务,我将把比较其功能和定价留给您,因为我们在这里执行的操作非常基本且发送量较低。要使用 Sparkpost 发送电子邮件,您可以使用您的 API 密钥访问其 API,提供有关您要发送的电子邮件的信息,然后 Sparkpost 会发送该邮件。
因此,您需要运行一些服务器端代码来在 API 请求期间保护您的 API 密钥。您可以在哪里运行此代码?Lambda 非常适合此目的(即 无服务器函数或云函数)。有很多服务可以帮助您运行这些函数,但没有比 Netlify 更简单的了,您可能已经在 Netlify 上托管您的网站。

准备 Sparkpost
我注册了 Sparkpost 并确保我的帐户已全部设置并已验证。那里的仪表板将为您提供一个 API 密钥

将 API 密钥放入 Netlify
保护 API 密钥的一部分是确保它仅在服务器端代码中使用,**同时也要将其保留在 Git 存储库之外**。Netlify 具有环境变量,这些变量可根据需要将 API 密钥公开给函数,因此我们将将其放置在那里。

启动 Netlify Dev,这将使操作变得更容易
Netlify Dev 是一款神奇的小工具,可以执行诸如运行我们的静态网站生成器等操作。对于我正在开发的 网站,我使用的是 Eleventy,Netlify Dev 会自动检测并自动运行它,这非常棒。但更重要的是,对我们来说,它为我们提供了一个本地 URL,用于运行我们的函数进行测试。
安装完成后,运行它应该如下所示

在上面的终端屏幕截图中,它显示网站本身在 localhost:8080
上启动,但也显示
◈ Lambda server is listening on 59629
这在稍后编写和测试我们的新函数时会非常有用——顺便说一下,如果我们愿意,我们可以构建它。例如
netlify functions:create --name hello-world
然后,它会问一些问题,然后创建一个函数。快速入门非常有用。我们将在稍后介绍编写该函数,但首先,让我们使用此功能……
Sparkpost 有自己的 Node 库
Sparkpost 当然有一个 API 用于发送这些电子邮件。我们可以查看这些文档并了解如何使用正确的数据访问其 URL 端点。
但使用 其 Node.js 绑定 会使操作变得更加容易。让我们通过创建所有需要的文件夹和文件来设置它。
/project
... your entire website or whatever ...
/functions/
/send-email/
package.json
send-email.js
我们只需要 package.json
文件来获取 Sparkpost 库,因此 npm install sparkpost --save-dev
将在这里完成这项工作。
然后 send-email.js
导入该库并使用它
const SparkPost = require('sparkpost');
const client = new SparkPost(process.env.SPARKPOST);
exports.handler = function(event, context, callback) {
client.transmissions
.send({
content: {
from: '[email protected]',
subject: 'Hello, World!',
html:
"<html><body><p>My cool email.</p></body></html>"
},
recipients: [{ address: '[email protected]' }]
});
}
您需要 查看其文档 以了解错误处理等信息。再说一次,我们只是从众多服务中随机选择了 Sparkpost。任何电子邮件发送服务都将拥有一个 API 和针对流行语言的辅助代码。
注意第 2 行!这就是我们需要 API 密钥的地方,我们不需要对其进行硬编码,因为 Netlify Dev 非常棒,它会**连接到 Netlify** 并让我们从那里使用环境变量。
测试函数
当 Netlify Dev 运行时,我们的 Lambda 函数具有其正在运行的特殊端口。我们将能够使用如下 URL 来运行该函数
http://localhost:34567/.netlify/functions/send-email
此函数在被访问时会运行,因此我们只需在浏览器中访问它即可运行它。
测试
也许您会向此 URL 发送 POST
请求。也许您会发送电子邮件正文。也许您会发送收件人的电子邮件地址。为所有这些操作提供一个测试环境会很好。
好吧,我们可以使用 console.log()
打印内容并在终端中查看它,这始终很方便。此外,我们可以编写函数以返回任何内容,我们可以在某种 API 测试工具(例如 Postman 或 Insomnia)中查看这些响应。

它有效!

我会把更复杂的操作留给您来完成;)
你好!我在 Netlify Dev 工作。您可以在此处查看更多文档并提交任何问题:https://github.com/netlify/netlify-dev-plugin
有一种更简单的方法可以做到这一点,因为 Netlify 有一项名为 Netlify Forms 的功能,它可以非常轻松快速地为您处理此问题。您只需将
data-netlify="true"
标签添加到任何网站(由 Netlify 提供支持)的任何页面的form
标签中,它就会完成其余操作。有关更多信息,请查看 Netlify 网站上关于 Netlify Forms 的完整文档!
Netlify Forms 可以做到这一点吗?我知道它们,这是一个令人难以置信的功能,但我不知道它们是否完全适用于这里。从您链接到的文档中
因此您无法控制 FROM 邮件,这可能没问题,但我不知道您是否可以让他们将通知发送到表单本身的电子邮件地址。如果我错了,这确实会容易得多。
但另一件事是电子邮件本身的设计。通过使用服务,您也可以完全控制它。
出于兴趣,为什么将 package.json 放在函数本身的文件夹中而不是项目的根目录中?
到目前为止,我已将其放在项目根目录中,并结合了所有函数的包,并且它工作正常。在每个函数文件夹中都使用多个 package.json 文件有什么优势吗?
我想是为了保持函数的模块化。就像您可以获取它所在的文件夹并将其移动到新的项目中,并且它需要的所有内容都会随之而来。
也就是说,在撰写本文时,Netlify 上的工作方式存在一个小错误。我认为它即将修复,但解决方法是让构建过程
cd
到 functions 目录并在那里运行npm install
。因此,如果您没有意识到这一点,则需要将依赖项保留在根目录中。明白了。模块化很有意义。我以前不知道构建步骤的问题。感谢您的提示。