AWS 上的项目：

构建无服务器 Web 应用程序

利用 AWS Lambda、Amazon API Gateway、AWS Amplify、Amazon DynamoDB 和 Amazon Cognito

Serverless_Web_App_LP_assets-15
Serverless_Web_App_LP_assets-22

简介

Progression-Bar-07

托管静态网站

Progression-Bar-08

管理用户

Progression-Bar-09

构建无服务器后端

Progression-Bar-16

部署 RESTful API

Progression-Bar-11

终止资源

模块 4.RESTful API

在本模块中，您将使用 Amazon API Gateway 将您在上一模块中构建的 Lambda 函数公开为 RESTful API。此 API 可在公共 Internet 上访问，并通过您在上一模块中创建的 Amazon Cognito 用户池获得保护。使用此配置，您可以将静态托管的网站转变为动态 Web 应用程序，具体方法是：将进行 AJAX 调用的客户端 JavaScript 添加到已公开的 API。

架构概览

Serverless_Web_App_LP_assets-05

上图展示了您将在本模块中构建的 API Gateway 组件如何与您之前构建的现有组件相集成。灰色项为您在之前的步骤中已经实施的组件。

您在第一个模块中部署的静态网站已经配置了一个页面，可与您将在本模块中构建的 API 进行交互。/ride.html 上的此页面拥有一个基于地图的简单界面，可用于发出独角兽骑行请求。使用 /signin.html 页面进行身份验证后，您的用户将能够单击地图上的一个地点选择他们的出发位置，然后选择右上角的“Request Unicorn”按钮发出骑行请求。

本模块将着重介绍构建 API 云组件所需的步骤，但是，如果您对浏览器代码调用此 API 的工作原理感兴趣，也可以查看此网站的 ride.js 文件。在本示例中，应用程序使用 jQuery 的 ajax() 方法发出远程请求。

完成模块所需时间：15 分钟

使用的服务：Amazon API Gateway 和 AWS Lambda

实施说明

按照下面的分步说明创建您的 REST API。单击各个步骤号可展开该部分。

  • 步骤 1.创建新的 REST API

    创建新的 REST API

    1. 在 AWS 管理控制台中，单击 Services (服务)，然后选择“Application Services (应用程序服务)”下的 API Gateway。

    2. 选择 Create API (创建 API)。

    3. 选择 New API (新建 API)，然后在 API Name (API 名称) 中输入 WildRydes。

    4. 将 Endpoint Type (终端节点类型) 下拉列表中的 Edge optimized (边缘已优化) 保留为选中状态。注意：“Edge optimized (边缘已优化)”最适用于从 Internet 访问的公共服务。地区终端节点通常用于主要从相同 AWS 地区访问的 API。

    5. 选择 Create API (创建 API)

  • 步骤 2.创建 Cognito 用户池授权方

    创建 Cognito 用户池授权方

    Amazon API Gateway 可以使用 Cognito 用户池返回的 JWT 令牌对 API 调用进行身份验证。在此步骤中，您将为您的 API 配置一个授权方，以使用您在模块 2 中创建的用户池。

    在 Amazon API Gateway 控制台中，为您的 API 创建一个新的 Cognito 用户池授权方。使用您在上一模块中创建的用户池的详细信息对其进行配置。通过当前网站的 /signin.html 页面登录后，您可以复制并粘贴呈现给您的授权令牌测试控制台中的配置。

    1. 在刚创建的 API 下，选择 Authorizers (授权方)。

    2. 选择 Create New Authorizer (创建新授权方)。

    3. 在“Authorizer name (授权方名称)”中输入 WildRydes。

    4. 选择 Cognito 类型。

    5. 在 Cognito User Pool (Cognito 用户池)的“Region (区域)”下拉列表中，选择您在模块 2 中创建 Cognito 用户池的区域（默认情况下应选中当前区域）。

    6. 在 Cognito User Pool (Cognito 用户池) 中输入 WildRydes（或您自己指定的用户池名称）。

    7. 在 Token Source (令牌来源) 中输入 Authorization。

    8. 选择 Create。

    验证您的授权方配置

    1. 打开一个新的浏览器标签，并访问您网站的域下的 /ride.html。

    2. 如果您被重定向到登录页面，请使用您在上一模块中创建的用户登录。您将被重定向回 /ride.html。

    3. 从 /ride.html 上的通知中复制授权令牌，

    4. 回到刚刚完成创建授权方的前一个选项卡

    5. 单击授权方卡片底部的 Test (测试)。

    6. 将授权令牌粘贴到弹出窗口对话框的 Authorization Token (授权令牌) 字段中。

    7. 单击 Test (测试) 按钮，验证响应代码是否为 200，并验证您是否看到您用户的声明。

  • 步骤 3.创建新的资源和方法

    创建新的资源和方法

    在 API 中创建一个名为“/ride”的新资源。然后，为该资源创建一个 POST 方法并对其进行配置，以使用 Lambda 代理集成，该集成由您在本模块第一步中创建的 RequestUnicorn 函数提供支持。

    1. 在左侧导航栏中，单击“WildRydes API”下的 Resources (资源)。

    2. 从 Actions (操作) 下拉菜单中，选择 Create Resource (创建资源)。

    3. 在 Resource Name (资源名称) 中输入 ride。

    4. 确认 Resource Path (资源路径) 已设置为 ride。

    5. 为资源选择 Enable API Gateway CORS (启用 API Gateway CORS)。

    6. 单击 Create Resource (创建资源)。

    7. 在选中新创建的 /ride 资源的情况下，从 Action (操作) 下拉列表中选择 Create Method (创建方法)。

    8. 从显示的新下拉列表中选择 POST，然后单击选中标记。

    9. 选择 Lambda Function (Lambda 函数) 作为集成类型。

    10. 选中 Use Lambda Proxy integration (使用 Lambda 代理集成) 复选框。

    11. 将 Lambda Region (Lambda 区域) 选为您正在使用的地区。

    12. 在 Lambda Function (Lambda 函数) 中输入您在上一模块中创建的函数的名称 RequestUnicorn。

    13. 选择 Save (保存)。请注意，如果您收到错误提示表示此函数不存在，请检查您选择的地区是否与您在上一模块中使用的地区相一致。

    14. 当系统提示您授予 Amazon API Gateway 权限以调用您的函数时，请选择 OK (确定)。

    15. 选择 Method Request (方法请求) 卡。

    16. 选择 Authorization (授权) 旁的铅笔图标。

    17. 从下拉列表中，选择“WildRydes” Cognito 用户池授权方，然后单击选中标记图标。

  • 步骤 4.部署您的 API

    部署您的 API

    在 Amazon API Gateway 控制台中，依次选择“Actions”、“Deploy API”。系统将提醒您创建新阶段。您可以使用“prod”作为此阶段名称。

    1. 在 Actions (操作) 下拉列表中，选择 Deploy API (部署 API)。

    2. 在 Deployment stage (部署阶段) 下拉列表中，选择 [New Stage] (新阶段)。

    3. 为​​​​Stage Name （阶段名称) 中输入 prod。

    4. 选择 Deploy (部署)。

    5. 记下 Invoke URL (调用 URL)。您将在下一部分中使用它。

  • 步骤 5.更新网站配置

    更新网站配置

    更新网站部署中的 /js/config.js 文件，以包含刚创建的阶段的调用 URL。您应该直接从 Amazon API Gateway 控制台阶段编辑器页面的顶部复制此调用 URL，并将其粘贴到站点 /js/config.js 文件的 _config.api.invokeUrl 键中。更新此配置文件时，请确保文件仍包含您在上一模块中针对 Cognito 用户池执行的更新。

    1. 在文本编辑器中打开 config.js 文件。

    2. 更新 config.js 文件中 api 键下的 invokeUrl 设置。将值设为您在上一部分创建的部署阶段的调用 URL。

      下面提供了完整的 config.js 文件的示例。请注意，文件中的实际值可能有所不同。

    window._config = {

    cognito: {

        userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb         

        userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv

        region: 'us-west-2' // e.g. us-east-2 

    }, 

    api: { 

        invokeUrl: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod, 

    } 

};

    1. 保存修改的文件，并将其推送至您的 Git 存储库，以将其自动部署至 Amplify Console。

    $ git push

  • 步骤 5.验证您的实施

    验证您的实施

    注意：您可能会发现，在更新 S3 存储桶中的 config.js 文件与更新的内容呈现在您的浏览器中之间可能存在延迟。您还应该确保在执行以下步骤前清除浏览器缓存。

    1. 访问您的网站域下的 /ride.html。

    2. 如果您被重定向到登录页面，请使用您在上一模块中创建的用户登录。

    3. 地图成功加载后，单击地图上的任意位置以设置出发位置。

    4. 选择 Request Unicorn (请求 Unicorn)。您将看到右侧边栏中有一条通知，告知您独角兽正在途中，然后您将看到一个独角兽图标正在朝着您的出发位置飞奔。

下一篇：终止资源