静态网站无服务器联系表单处理

如果您正在制作一个静态网站，这意味着您不想管理服务器或想节省成本。但是，静态网站无法处理联系表单，这意味着您需要一个后端服务器来处理联系表单请求。但是如果你需要一个服务器，那么制作静态网站的逻辑是什么呢？所以简单的解决方案是无服务器联系表。

为什么要使用无服务器？

制作无服务器应用程序有很多好处，但简而言之，主要好处是易于设置、无需管理和成本更低（免费）。

平台选择

运行无服务器代码的方法有很多，例如 aws lambda、Google Cloud Functions、cloudflare worker。但我选择了运行无服务器代码的最简单方法，即 Google Cloud Functions。

Google Cloud Functions 允许您通过 HTTPS 请求触发函数。也可以使用 aws lambda 完成此作，但您需要额外设置 API Gateway 才能触发该函数。

成本

Google Cloud 每月提供 200000 GHz 秒的免费计算时间、5GB 的互联网出口流量和 200 万次调用。https://cloud.google.com/functions/pricing

我正在使用 256MB/0.4GHz 的运行时间，处理一个表单需要 ~800 毫秒。

这个免费配额对于处理联系表单提交来说太多了。

0.4 x 0.8 秒 = 每次调用 0.32 GHz 秒

200,000 / 0.32 = 625,000

您每月可以免费处理 625,000 个成功的表单提交*。

*这只是一个示例计算，不包括电子邮件费用。免费资源受 Google Cloud 政策的约束。

设置

第 1 步：创建项目

（如果您没有 Google Cloud 帐户，请创建一个，然后创建项目）

步骤 2：创建函数

单击左上角的菜单图标。向下滚动并在 COMPUTE 部分下找到 Cloud Function。

然后单击 'Create Function' 按钮。

第 3 步：填写表格

设置函数名称 （contact-form）。

分配内存（256MB 就足够了）

设置 Trigger 'HTTP' — 它也适用于 https。

身份验证不是必需的，因此请保持选中状态以接受未经身份验证的请求。

源代码可以内联添加，也可以上传 ZIP 文件。您可以在此处找到 zip 文件 https://github.com/bansal-io/serverless-contact-form/tree/master/dist

我在这里选择了内联编辑器选项。

第 4 步：将代码添加到编辑器

打开存储库 https://github.com/bansal-io/serverless-contact-form

复制 index.js 和 package.json 文件的代码，并将其粘贴到相应的代码编辑器选项卡中。

在字段 Functions 中，要执行，请键入 onSubmit

步骤 5：设置环境变量

所有与 SMTP 相关的环境变量都是必需的。其余变量是可选的。检查配置详细信息 https://github.com/bansal-io/serverless-contact-form/#configure

单击 'Create' 按钮，您的函数已准备就绪。

注意： 除了设置环境变量，您还可以更改文件中index.js config 值。

获取 http 端点

部署函数后，单击函数名称（联系人表单），然后单击 触发器 选项卡以查找 URL。

你的 url 将如下所示。

https：//YOUR_REGION-YOUR_PROJECT_ID.cloudfunctions.net/FUNCTION_NAME

现在您可以在 HTML 表单中设置此 url in action 属性

以下是使用 Google Cloud 功能 https://serverless-contact-form.netlify.com/ 的联系表单的工作示例

转自：https://medium.com/the-level-up/serverless-contact-form-handling-for-static-websites-8e075ec2efd8