在本模块中,您将使用 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


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

    2. 选择创建 API

    3. 选择新建 API,然后在 API 名称中输入 WildRydes

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

    5. 选择创建 API

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

    2. 选择Create API

    3. 选择Create API,然后输入 WildRydes 作为 API Name

    4. 选择Create API

  • 第 2 步:创建 Cognito 用户池授权方

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

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


    1. 在刚创建的 API 下,选择 Authorizers

    2. 选择创建新授权方

    3. 在“授权方名称”中输入 WildRydes

    4. 选择 Cognito 类型。

    5. Cognito 用户池的“地区”下拉列表中,选择您在模块 2 中创建 Cognito 用户池的地区 (默认情况下应选中当前地区)。

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

    7. 令牌来源中输入 Authorization

    8. 选择 Create

    验证您的授权方配置

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

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

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

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

    5. 单击授权方卡片底部的测试

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

    7. 单击测试按钮,验证响应代码为 200,且看到显示您用户的申请。

  • 第 3 步:创建新的资源和方法

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


    1. 在左侧导航栏中,单击“WildRydes API”下的 Resources

    2. Actions 下拉菜单中,选择 Create Resource

    3. 资源名中输入 ride

    4. 确认资源路径已设置为 ride

    5. 选择启用 API Gateway CORS 资源。

    6. 单击创建资源

    7. 在选中新创建的 /ride 资源的情况下,从操作下拉列表中选择创建方法

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

    9. 选择 Lambda Function 作为集成类型。

    10. 选中 Use Lambda Proxy integration 复选框。

    11. Lambda Region 选为您正在使用的地区。

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

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

    14. 当系统提示您授予 Amazon API Gateway 权限以调用您的函数时,请选择 OK

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

    16. 选择 Authorization 旁边的铅笔图标。

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

  • 第 4 步:部署您的 API

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


    1. Actions 下拉列表中,选择 Deploy API

    2. Deployment stage 下拉列表中,选择 [New Stage]

    3. 阶段名称中输入 prod

    4. 选择 Deploy

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

    现代 Web 浏览器会阻止 HTTP 请求从一个域托管的页面的脚本到另一个域托管的 API,除非此 API 提供明确允许这种请求的跨源资源共享 (CORS) 响应标头。在 Amazon API Gateway 控制台中,您可以添加必要的配置,以在您选中某个资源时发送操作菜单下相应的 CORS 标头。您应该在“/ride”资源上启用适用于 POST 和 OPTIONS 的 CORS。为了简便起见,您可以将“Access-Control-Allow-Origin”标头值设为“*”,但是,在生产应用程序中,您应该始终将已获得授权的域列入白名单,以减少跨站请求伪造 (CSRF) 攻击。

    有关 CORS 配置的更多信息,请参阅 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

  • 第 5 步:更新网站配置

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


    如果您是手动完成的模块 2,则可以编辑您在本地保存的 config.js 文件。如果您使用了 AWS CloudFormation 模板,则必须先从您的 S3 存储桶下载 config.js 文件。为此,请访问您网站基础 URL 下的 /js/config.js,选择文件,然后在浏览器中选择网页另存为

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

    2. 更新 config.js 文件中 api 键下的 invokeUrl 设置。将值设为您在上一部分创建的部署阶段的 Invoke 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. 将更改保存到本地。

    2. 在 AWS 管理控制台中,选择服务,然后选择“存储”下的 S3

    3. 导航到网站存储桶,然后浏览到 js 键前缀。

    4. 选择上传

    5. 选择添加文件,然后选择 config.js 的本地副本并单击下一步

    6. 确认在设置权限设置属性部分未更改任何默认设置,然后选择下一步

    7. 审核部分选择上传

  • 第 5 步:验证您的实施

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


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

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

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

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

  • 第 7 步:验证您的实施

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


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

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

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

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