使用 Amazon Web Services 创建 API 端点

在部署新网站之前，向客户展示测试版本非常有用。在本文中，我将解释如何使用后端应用程序和前端应用程序创建 Web 应用程序，并使用三个关键的 Amazon Web Services（Lambda、API 网关和 S3 存储）以无服务器方式部署它。部署完成后，您可以将 API 端点链接发送给客户，以便他们查看正在进行的工作。

步骤 1：准备上传到 AWS Lambda 函数的后端代码

我的后端 Web 应用程序使用了 NodeJS。为了准备上传到 Lambda 的代码，我从https://www.npmjs.com/package/serverless-http安装了 npm serverless-http 模块。该模块封装了您的 API，以便用于无服务器应用。在终端中运行以下命令：

 npm i serverless-http

在 index.js 中，注释掉声明端口的行，因为我们不需要它：

app.set("port", process.env.PORT || 3001)

在 index.js 文件的顶部，添加 require() 函数，该函数会将 serverless-http 模块添加到后端：

const serverless = require("serverless-http")

不要使用 app.listen() 函数，

app.listen(app.get("port"), () => {console.log(`Example app listening at https://localhost:${app.get("port")}`);
});

我们将使用调用无服务器函数的处理程序：

module.exports.handler = serverless(app)

完成后，创建所有后端代码的 zip 文件，然后继续执行步骤 2。

步骤 2：创建新的 Lambda 函数并上传代码

前往 Amazon Web Services，搜索 Lambda。进入 Lambda 主页后，点击“创建函数”按钮。输入函数名称，并指定函数语言（我的是 Node.js 14x）。再次点击“创建函数”。

点击“操作”和“上传 Zip 文件”。上传 Zip 文件后，点击“测试”。在这里，您可以查看 Lambda 函数是否成功返回了标头和正文。

恭喜！您已完成后端代码上传。现在，让我们使用 API 网关创建一个 REST API。

步骤 3：使用 AWS API Gateway 设置 REST API

前往 AWS API 网关页面，点击“创建 API”。向下滚动选项，直到找到 REST API。点击“构建”。为您的 API 命名，然后点击“创建 API”。现在您可以开始设置请求。前往“操作”按钮，然后点击下拉菜单。点击“创建资源”，并为您的资源命名，使其与路由名称匹配。确保勾选“启用 API 网关 CORS”复选框，因为我们需要启用 CORS 策略。CORS 代表跨域资源共享。在本项目中，我们启用 CORS 以允许在后端和前端应用程序之间进行请求和响应。

例如，我的第一个资源如下所示：

再次转到“操作”，然后单击“创建方法”。

现在从下拉菜单中选择“GET”，然后单击旁边出现的箭头。

现在，您需要为您的方法选择一个“集成点”，也就是您的 Lambda 函数。点击“Lambda 代理集成”，然后输入您的 Lambda 函数的名称。使用 Lambda 代理集成，API 将负责检查请求的标头和响应的标头。

当它请求使用您的 Lambda 函数的权限时，单击“保存”，然后单击“确定”。

*请确保不要跳过此步骤；如果没有为所有方法选择集成点，则在尝试部署 API 时会收到错误消息。

此时，您需要测试路由。点击“测试”图标，然后再次点击页面底部的“测试”。点击“测试”后，响应将显示一个包含作者作品信息的对象。

如你所见，这条路由测试成功了，因为我的图片显示为“未定义”。这时，我不得不回溯，将图片上传到 AWS S3，从存储桶中检索它们的 URL（稍后会详细介绍！），并且出于测试目的，将 URL 硬编码到后端代码中，将代码再次上传到 Lambda 函数中，然后再次测试路由。当我再次测试时，你可以看到图片是如何传输的：

为每条路由创建资源和方法，并测试每条路由以确保它正确调用 Lambda 函数的数据。

对于一个通过 ID 请求工作的路由，需要使用顶部的“配置为代理资源”选项创建一个额外的“子”资源。例如，
我的路由是：

/商店/工作/：id

我创建了一个“shops”资源，然后在“shops”下创建了一个“work”资源，然后在“work”资源上创建了一个通过ID请求work的“child”资源。在这个/{proxy+}资源下，我删除了通配符“ANY”方法，并创建了另一个“GET”方法，因为这是我想要使用的方法。

测试该方法以确保它通过 ID 获取正确的项目。

完成 API 端点的创建（例如，我上面的 /card、/shops 等）并测试每个端点以确保从 Lambda 函数正确获取数据后，请在主 / 路由下的最顶部创建一个最终的 GET 方法。

再次转到“操作”按钮，然后单击“启用 CORS”。您将点击“启用 CORS 并替换现有的 CORS 标头”，然后在弹出窗口中点击“是”。

现在是时候部署 API 了。前往“操作”，然后点击“部署 API”。选择 [新阶段] 并为您的阶段命名。然后点击“部署”。

部署完成后，点击测试 API，以便再次查看所有路由，然后点击每个“GET”方法。确保在“设置”下选中了“从 Stage 继承”，然后点击“保存”。

现在检查每个方法并在新浏览器上检查调用 URL，以确保正确获取 JSON 数据。

完成后，您可以继续执行步骤 4！

步骤 4 准备前端代码并将其上传到 S3

现在使用您的 API 创建的新 URL（例如，我的是：https ://uuuqydy5el.execute-api.us-east-2.amazonaws.com/beta ）并转到您的前端代码。

我们需要将此 URL 插入到前端代码的 fetch 函数中，同时保持路由的完整性。（请注意，将 URL 插入 fetch 函数非常繁琐，并非最佳实践；不过，对于像这样的小项目来说，这样做是可以的。）

使用 AWS URL 更新完获取函数后，请在项目的终端中运行以下命令：

npm run build

这将创建一个 build 文件夹（用于 React 项目），该文件夹可以上传到 S3 存储桶。build 文件夹包含前端应用程序。

完成此步骤后，您将看到一个“build”文件夹添加到您的项目中，其中包含前端应用程序的所有文件。

现在是时候返回 AWS，并导航到 S3 页面。点击“创建存储桶”，并为存储桶命名。向下滚动，取消选中“阻止所有公共访问”选项，然后勾选复选框以同意条款。再次向下滚动并点击“创建存储桶”。

点击新创建的存储桶，然后点击“上传”选项。现在上传构建文件夹中的所有文件（以文件组的形式上传；不要上传文件夹本身）。在点击“上传”之前，点击“其他上传选项”，向下滚动到访问控制列表，并勾选“所有人（公开访问）”的两个复选框。同意此更改的条款，然后点击“上传”。检查所有文件是否已上传，然后返回存储桶列表。

点击您的存储桶，然后前往“属性”。一直向下滚动，然后点击“编辑”静态网站托管属性。点击“启用静态网站托管”。接下来，指定您的索引文档。在本例中，它是“index.html”。输入名称后，点击“保存”。这是必要的，因为我们将使用此 S3 存储桶来存储静态前端 Web 应用程序。

接下来，转到“权限”。向下滚动到“存储桶策略”，然后点击“编辑”。您可以在此处指定存储桶的权限。存储桶策略提供访问权限。我使用了以下脚本，该脚本允许公开访问存储桶对象。您应该研究一下需要为存储桶使用哪种类型的策略。（了解更多信息，请访问：https ://docs.aws.amazon.com/AmazonS3/latest/userguide/add-bucket-policy.html ）。如果您使用以下脚本，则需要将下方粗体部分替换为您自己的存储桶 ARN，该 ARN 列在您粘贴策略的文本空间顶部。

{
“Version”：“2012-10-17”，
“Statement”：[
{
“Sid”：“PublicReadGetObject”，
“Effect”：“Allow”，
“Principal”：“ ”，
“Action”：“s3：GetObject”，
“Resource”：“ arn：aws：s3 ::: writerwebsite3 / ”
}
]
}