静态网站是重新捕捉网络历史上一些最好的部分的好方法。它们提供低开销和简单的部署。然而,静态网站失去的一件事是使用后端处理表单数据的能力。静态站点托管服务 Netlify 通过利用 AWS Lambda 解决了这个问题。 AWS Lambda 让您无需托管整个应用程序即可运行后端代码:您只需运行您需要的代码。

本教程将从设置 Netlify 表单开始。接下来,我们将创建处理表单提交的 Lambda 函数。最后,我们将在 Netlify 上部署它。我们的用例将是一个简单的联系表格,通过电子邮件向提交者发送他们的联系表格已收到。

表单设置

Netlify 表单是 Netlify 将自动处理的表单,它们已经非常强大。默认情况下,由 Netlify 处理的表单将其数据转储到您网站的 Netlify 管理区域,然后可以通过管理区域或通过 Netlify API 访问该数据。如果您不需要立即处理表单数据,这可能是一个好方法!

data-netlify=true
<form name="contact" method="POST" data-netlify="true">
  <p>
    <label>Your Name: <input type="text" name="name" /></label>   
  </p>
  <p>
    <label>Your Email: <input type="email" name="email" /></label>
  </p>
  <p>
    <label>Message: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

很简单,对吧?现在这些信息将被转储到我们的 Netlify 管理区域而不做任何更改,但我们希望将表单通过电子邮件发送给提交者和我们自己。

形式和功能

AWS Lambda 函数使我们能够运行服务器端代码,而无需运行服务器。 Netlify 使用事件触发器为某些用例包装了 AWS Lambda,主要围绕部署和服务协调。但是,还有一个表单提交的钩子!这给了我们一个入口。Netlify 支持这些功能的 Javascript 或 Go;我们将使用 Go。

为此,我们需要一些 Go 代码来运行,然后是 Netlify 将我们的 Go 代码构建到正确命名的文件中的一种方法,然后我们就走了!

我们的用例很简单。我们希望从联系表单中获取输入并将其镜像回提交者,我们自己会密件抄送。

Netlify 上一个非常基本的 Go 函数的要求是设置你的 lambda 处理程序的主函数,以及那个处理程序函数。您可以在此处阅读我们函数的完整代码:https://github.com/camilopayan/netlify-go-function-example/blob/master/main.go

获取表单数据

Netlify 将表单数据作为 JSON 对象的一部分注入到请求正文中。如果您想更详细地查看整个 JSON 对象,请查看https://open-api.netlify.com/

然而,对于我们的用例,我们将使用 Go 的内置 JSON Unmarshaler 将我们的请求主体更改为 Go 结构。

type Form struct {
    Name    string `json:"name"`
    Email   string `json:"email"`
    Message string `json:"message"`
}

type Payload struct {
    Form Form `json:"data"`
}

type Body struct {
    Payload Payload `json:"payload"`
}

通过使用嵌套结构,在 JSON 对象中将字段标记为它们的字段,我们可以使用 json.Unmarshal 将我们的表单数据吞入一个可用的结构!

获取秘密数据

如果我们要发送电子邮件或插入任何第 3 方服务(也许您想将您的客户信息转储到 Airtable 中!),那么我们需要一种安全的方式来获取这些秘密,例如 API 密钥或 SMTP 凭证。

为此,Netlify 提供了环境变量,它将与您的函数一起提供。您可以在 netlify.toml 文件中设置一些变量,但这适用于构建变量(npm 版本等)。机密信息应通过您的 Netlify 管理仪表板存储。您可以在 Netlify 文档中阅读有关环境变量的更多信息。

os
port, _      := strconv.Atoi(os.Getenv("MAIL_PORT"))
host         := os.Getenv("MAIL_HOST")
senderemail  := os.Getenv("MAIL_SENDER_EMAIL")
smtppassword := os.Getenv("MAIL_PASSWORD")
smtpuser     := os.Getenv("MAIL_USERNAME")

构建您的功能

Netlify 最酷的事情之一是其内置的持续部署管道。如果可能的话(使用最新的 Go),我建议您保持轻松并使用 Go 模块。

go mod init

接下来我使用带有一组非常简单的命令的 Makefile:

mkdir -p functions
go build -o functions/submission-created ./...

submission-createdsubmission-created
make build

有了这个,您应该有足够的基础信息来开始编写您自己的表单处理函数,而无需翻阅 AWS Lambda 文档。不过,Netlify 函数比这更灵活,您甚至可以部署实现完整 API 或仅一些 RPC 端点以从 JS 前端命中的函数。