如何使用 AWS Lambda 向静态网站添加联系表单
向静态网站添加服务器端逻辑时出现的问题
基于 Lambda 构建电子邮件发送 API
使用 Apex 管理 Lambda 函数
从 Lambda 函数发送电子邮件
通过 API 网关实现通过 HTTP 调用。
与您的网站集成
添加动态内容并非总是需要服务器。
我在东京做自由开发者已经超过六年了。业余时间，我一直在开发一款名为Inkdrop的产品。它是一款多平台 Markdown 编辑器应用。我参与了用户界面设计以及后端和前端的开发。
最近，我需要为我的静态网站创建一个电子邮件表单。我决定使用 AWS Lambda。在本文中，我将介绍我的构建过程。如果您想直接尝试而无需阅读本文，请访问我在 GitHub 上的代码仓库。
向静态网站添加服务器端逻辑时出现的问题
如果你了解 Git，就可以在GitHub Pages和Netlify等托管服务上免费发布静态网站。这些服务非常实用。
所谓“静态”，我的意思是这个网站只使用了HTML、CSS和JavaScript。它没有像PHP这样的服务器端逻辑。
我的个人网站和产品网站都托管在Netlify上，它速度快、稳定性好，我非常喜欢它。
图. 我部署在 Netlify 上的 Inkdrop 产品网页。
静态网站无法生成动态内容，也无法执行需要权限的操作，例如发送电子邮件。但有时您可能确实需要这些功能，例如在首页添加联系表单。
问题在于为此部署服务器完全是杀鸡用牛刀。你不知道访客何时会联系你，所以让服务器一直运行毫无意义。
当您想为静态网站添加服务器端逻辑时，无服务器架构非常有用。它允许您仅在需要时运行服务器端脚本。
例如，AWS Lambda只根据函数的请求次数和代码执行时间收费。因此，在等待访客联系您期间，您无需支付任何费用。
图：我主页上的联系表格（请勿出于测试目的向我发送邮件）
我使用 AWS Lambda 在我的主页上构建了一个简单的联系表单（请勿出于测试目的向我发送电子邮件）。我已在 GitHub 上开源了一个示例项目。您可以使用它来构建相同的 API。这对于使用 AWS Lambda 来说是一个很好的教程。
基于 Lambda 构建电子邮件发送 API
图 API 架构
调用 API 时，实际上是调用一个运行在 Lambda 上的脚本函数。它默认支持 Node.js、C#、Java 和 Python。该函数使用Amazon SES（简单邮件服务）发送电子邮件。由于 Lambda 函数默认情况下无法通过互联网访问，因此您必须使用 API 网关设置每个 HTTP 端点。
如上图所示，您可以从您的网站调用您的 API。
使用 Apex 管理 Lambda 函数
在 AWS 中管理 Lambda函数比较复杂。Apex通过简化工作流程解决了这个问题。它可以帮助您轻松构建、部署和管理 AWS Lambda 函数。
安装 Apex：
curl https://raw.githubusercontent.com/apex/apex/master/install.sh | sh
Apex 需要 AWS 凭证。您必须通过以下环境变量指定这些凭证：
-
AWS_ACCESS_KEY_IDAWS 账户访问密钥 -
AWS_SECRET_ACCESS_KEYAWS 账户密钥 -
AWS_REGIONAWS 区域
点击此处了解更多配置 Apex 的详细信息。
现在让我们通过克隆本教程的存储库来创建新的 Apex 项目：
git clone [git@github.com](mailto:git@github.com):craftzdog/send-email-lambda.git
cd send-email-lambda
apex init
> Project name: send-email
给你的项目命名send-email。然后 Apex 会根据你的项目名称设置 IAM 角色。之后你将进入project.json项目的根目录。按如下方式编辑它：
{
"name": "send-email",
"description": "Simple email transmitter",
"memory": 128,
"timeout": 5,
"environment": {},
"runtime": "nodejs6.10",
"role": "<YOUR_IAM_ROLE>"
}
现在您可以使用 Lambda 了！
从 Lambda 函数发送电子邮件
要让 Lambda 函数发送电子邮件，您需要设置 AWS SES。您需要在 AWS SES 上注册您的电子邮件地址。
请点击下方“验证此电子邮件地址”按钮，通过 SES 进行验证：
图：向 SES 注册您的电子邮件地址
AWS 会向您发送一封验证邮件。打开邮件中的链接后，您的邮箱地址即可用于通过 SES 和 Lambda 发送电子邮件。
配置 Lambda 函数以使用 SES
您有一个文件，其中functions/submit/function.json包含名为“submit”的函数的配置文件。请按如下方式编辑此文件：
{
"environment": {
"SES_REGION": "us-west-2",
"FROM_NAME": "Your Contact Form",
"FROM_EMAIL": "<YOUR_AUTOMATED_EMAIL_SENDER>",
"TO_EMAIL": "<EMAIL_TO_RECEIVE>"
}
}
-
SES_REGION：SES 的 AWS 区域 -
FROM_NAME发件人名称类似“联系表格” -
FROM_EMAIL您将收到邮件的邮箱地址。例如，contact@example.com -
TO_EMAIL：您的电子邮件地址，用于接收邮件。
向 IAM 角色添加权限
Apex 项目的 IAM 角色权限设置非常有限，以防止滥用。默认情况下，它限制了对 SES 的访问。我们来添加一个权限，允许 Lambda 函数使用它。
前往 IAM 控制面板，找到 Apex 创建的 IAM 角色。下图所示的角色名称为 `<role_name>` contact-form_lambda_function。您的角色名称应为 `<role_name> send-email_lambda_function`。
按下“创建角色策略”按钮，创建以下名称的角色策略send-email_submit：
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Stmt1504526549000",
"Effect": "Allow",
"Action": [
"ses:SendEmail"
],
"Resource": [
"*"
]
}
]
}
此策略允许 Lambda 函数使用 SES。
部署并测试电子邮件发送
现在您的项目已准备好发送电子邮件。让我们测试一下是否有效。以下命令将部署 Lambda 函数。请在项目根目录下运行此命令。
apex deploy
然后您可以使用以下命令手动运行 Lambda 函数：
echo -n '{ "subject": "hello", "body": "world" }' | apex invoke submit
您将收到一封发送到您配置的邮箱地址的电子邮件，邮件标题为“hello”，正文为“world”。恭喜！
如果您没有收到邮件，请使用以下命令检查日志：
apex logs -f
阅读错误信息，检查 IAM 角色和 AWS 区域是否正确。发件人地址应已在 SES 上正确注册。
通过 API 网关实现通过 HTTP 调用。
现在我们希望从网站调用 Lambda 函数。AWS API Gateway允许您为该函数创建一个 HTTP 端点。
让我们设置它来接受/submit通过POST调用 Lambda 函数的方法发出的请求。
1. 创建 API
前往 API 网关控制台，然后点击“创建 API”按钮。我们可以把它命名为“my-awesome-send-email-api”，或者你喜欢的任何名称。
2. 创建一个端点/submit
点击“操作”➜“创建资源”，即可/submit从资源部分创建资源。
之后，勾选“启用 API 网关 CORS”。
3. 创建 POST 方法
定义新方法，让端点/submit接受POST方法，方法是选择“操作”➜“创建方法”。
将其设置为按上述方式调用 Lambda 函数。
图 API 端点概览
4. 部署 API
点击“操作”➜“部署 API”来部署 API。
它将把API公开在网络上。
现在可以从您的网站调用 API 了。
图. 部署结果
如上所示，调用 URL是 API 的入口点。
curl您可以使用如下命令调用它：
curl --request POST \
--url [https://******.execute-api.us-west-1.amazonaws.com/production/submit](https://qen9yylar9.execute-api.us-west-1.amazonaws.com/production/submit) \
--header 'content-type: application/json' \
--data '{
"subject": "Hello",
"body": "Hoge"
}'
收到邮件了吗？现在可以正常使用了！
可选：速率限制
我建议您对 API 配置速率限制，以限制请求数量。
点击上图中的“启用节流”复选框，并将“速率”的值指定为 1 或 2。
与您的网站集成
现在您拥有了一个可以通过 AJAX 调用的 API。
以下是如何使用Fetch API调用它的示例：
export default function sendEmail (subject, body) {
return fetch('[https://******.execute-api.us-west-1.amazonaws.com/production/submit'](https://qen9yylar9.execute-api.us-west-1.amazonaws.com/production/submit'), {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({ subject, body })
})
}
现在你只需要创建一个表单，并在提交时使用一些 JavaScript 代码调用这个函数即可。
添加动态内容并非总是需要服务器。
Lambda 让您可以轻松添加动态联系表单。这对于构建公司和商店的简易主页非常有用。
无服务器架构让您可以构建能够生成动态内容的网站，而且无需花费太多资金。例如，您可以使用 S3 和 Lambda 构建评论表单，这非常强大。
感谢阅读。我在博客上分享我关于产品开发和自由职业的经验。如果您喜欢，请查看博客上的热门文章：
欢迎在Twitter上关注我，保持联系！
