开始使用 AWS

构建基本 Web 应用程序

部署 Web 应用程序并添加与 API 和数据库的交互

在此模块中,我们将使用 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 代表是的“表示状态转移”,它是创建 Web 服务的架构模式。API 代表的是“应用程序接口”。 因此,RESTful API 是实施该架构模式的接口。

HTTP 请求方式 HTTP 方式旨在启用客户端与服务器之间的通信。HTTP 协议定义的 GET 或 PUT 等方法将用于指示将对资源执行何种操作。

CORS CORS(跨源资源共享)机制使用 HTTP 标头指示浏览器允许给定 Web 应用程序在一个源(域)中运行,且具有在不同源通过服务器访问选定资源的权限。

边缘已优化使用 AWS 全球基础设施为全世界客户提供更好服务的资源。

 完成时间

5 分钟

 使用的服务

实施

  • 创建新的 REST API
    1. 登录 API Gateway 控制台
    2. 单击橙色的“创建 API”按钮。
    3. 找到 REST API 框并单击其中的橙色“构建”按钮。
    4. 在“选择协议”下,选择 REST
    5. 在“创建新的 API”下,选择新建 API
    6. 在“API 名称”字段中,键入 HelloWorldAPI
    7. 在“终端节点类型”下拉列表中选择“边缘已优化”(注意:边缘已优化终端节点最适合地理分布的客户端。它非常适合从 Internet 访问的公共服务。区域终端节点通常用于主要从相同 AWS 地区访问的 API。)
    8. 单击蓝色的“创建 API”按钮。您的设置看起来应像下面的屏幕截图:
    Full Stack tutorial API settings
  • 创建新的资源和方法
    1. 在左侧导航栏中,单击 HelloWorld API下的“资源”
    2. 选中“/”资源后,从“操作”下拉菜单中单击创建方法
    3. 从显示的新下拉列表中选择 POST,然后单击选中标记。
    4. 选择 Lambda 函数作为集成类型。
    5. 在“函数”字段中键入 HelloWorldFunction
    6. 单击蓝色的“保存”按钮。
    7. 您应看到一条消息,该消息显示,您在为您创建的 API 授予调用 Lambda 函数的权限。单击“确定”按钮。
    8. 选中新创建的 POST 方法后,从“操作”下拉菜单中选择“启用 CORS”。
    9. 保持选中 POST 复选框,然后单击蓝色的“启用 CORS 并替换现有的 CORS 标头”按钮。
    Full Stack tutorial EnableCORS

    10.您应看到一条消息,要求您确认方法更改。单击蓝色的“是,替换现有值”按钮。

    Full Stack tutorial ConfirmMethodChanges
  • 部署 API
    1. “操作”下拉列表中,选择“部署 API”。
    2. 在“部署阶段”下拉列表中,选择“[新阶段]”。
    3. 为“​​​​阶段名称”输入 dev
    4. 选择“部署”。
    5. 复制并保存“调用 URL”旁的 URL(您在模块 5 中将需要它)。
  • 验证 API
    1. 在左侧导航中,单击“资源”。
    2. 我们的 API 方法现在将列在右侧。单击“发布”。
    3. 单击小型蓝色闪电球
    4. 将以下内容粘贴到“请求正文”字段中:
    {
        "firstName":"Grace",
        "lastName":"Hopper"
    }

    5.单击蓝色的“测试”按钮。

    6.在右侧,您应看到含代码 200 的响应。

    7.很好! 我们已构建并测试调用 Lambda 函数的 API。


应用程序架构

模块 3 现已完成。查看架构的时间:

full-stack amplify console arch diagram module 3

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

此模块有帮助吗?

谢谢
请告知我们您喜欢什么。
关闭
很抱歉让您失望了
是否存在过时、令人困惑或不准确的内容? 请向我们提供反馈,帮助我们改进本教程。
关闭

创建数据表