构建一个基本的 Web 应用程序
教程
模块 3:将无服务器函数与 Web 应用程序链接
在此模块中,我们将使用 Amazon API Gateway 部署您的无服务器函数。
概览
在本模块中,我们将使用 Amazon API Gateway 创建 RESTful API,它允许我们从 Web 客户端(通常指的是用户的 Web 浏览器)对 Lambda 函数进行调用。API Gateway 将用作我们在模块 1 中创建的 HTML 客户端与我们在模块 2 中创建的无服务器后端之间的中间层。
您将学到的内容
在本模块中,您将:
- 使用 API Gateway 创建新 API
- 在您的 API 上定义 HTTP 方法
- 从 API 触发 Lambda 函数
- 在 API 上启用跨源资源共享(CORS),这样您就可以使用来自不同来源(域)的资源
- 测试从 AWS 管理控制台中使用 API Gateway 创建的 API
重要概念
RESTful API:REST 代表“表示层状态转换”(Representational State Transfer),它是创建 Web 服务的架构模式。API 代表应用程序编程接口(Application Programming Interface)。 因此,RESTful API 是实施 REST 架构模式的接口。
HTTP 请求方式:HTTP 方式旨在启用客户端与服务器之间的通信。HTTP 协议定义的 GET 或 PUT 等方法将用于指示将对资源执行何种操作。
CORS:CORS 浏览器安全功能使用 HTTP 标头指示浏览器允许在某个源(域)上运行的给定 Web 应用程序在不同源通过服务器访问选定资源。
边缘优化 :一种资源,使用 AWS 全球基础设施为不同地理位置的客户提供更好的服务。
实施
-
创建新的 REST API
- 登录 API Gateway 控制台。
- 在选择 API 类型部分中,找到 REST API 卡片,然后选择卡片上的构建按钮。
- 在选择协议下,选择 REST。
- 在创建新的 API 下,选择新建 API。
- 在 API 名称字段中,输入 HelloWorldAPI。
- 从端点类型下拉列表中选择边缘优化。(注意:边缘优化的端点最适合地理位置分散的客户端。这些端点非常适合用于从 Internet 访问的公共服务。区域端点通常用于主要从相同 AWS 区域访问的 API。)
- 选择蓝色的创建 API 按钮。您的设置看起来如随附的屏幕截图所示。
-
创建新的资源和方法
- 在左侧导航窗格中,选择 API:HelloWorldAPI 下的资源。
- 确保选择“/”资源。
- 从操作下拉菜单中,选择创建方法。
- 从显示的新下拉列表中选择 POST,然后选择选中标记。
- 选择 Lambda 函数作为集成类型。
- 选择您在创建函数时使用的 Lambda 区域(否则您将看到一个警告框,上面写着“...中没有任何 Lambda 函数”)。
- 在 Lambda 函数字段中输入 HelloWorldFunction。
- 选择蓝色的保存按钮。
- 您应看到一条消息,该消息显示,您在为您创建的 API 授予调用 Lambda 函数的权限。选择确定按钮。
- 选中新创建的 POST 方法后,从操作下拉菜单中选择启用 CORS。
- 保持选中 POST 复选框,然后选择蓝色的启用 CORS 并替换现有的 CORS 标头按钮。
10.您应看到一条消息,要求您确认方法更改。选择蓝色的是,替换现有值按钮。
-
部署 API
- 在操作下拉列表中,选择部署 API。
- 在部署阶段下拉列表中,选择 [新阶段]。
- 为阶段名称输入 dev。
- 选择部署。
- 复制并保存调用 URL 旁的 URL(您在模块 5 中将需要它)。
-
验证 API
- 在左侧导航窗格中,选择资源。
- 我们的 API 方法现在将列在右侧。选择 POST。
- 选择蓝色小闪电图标。
- 将以下内容粘贴到请求正文字段中:
{ "firstName":"Grace", "lastName":"Hopper" }
5.单击蓝色的测试按钮。
6.在右侧,您应看到含代码 200 的响应。
7.很好! 我们已构建并测试调用 Lambda 函数的 API。
应用程序架构
模块 3 现已完成。查看架构的时间:

我们已添加 API Gateway 并将它与现有的 Lambda 函数连接。现在,我们可以使用 API 调用触发函数。我们仍然无法从 Web 客户端中生成此调用。我们将首先在模块 4 中添加数据表,然后在模块 5 中将所有内容连接在一起。