在本模块中,您将使用 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. 选择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. Create 下拉列表中,选择 Cognito User Pool Authorizer

    3. 选择您在模块 2 中创建 Cognito 用户池时所在的地区。

    4. 从下拉列表中选择 WildRydes Cognito 用户池。

    5. 输入 WildRydes 作为授权方名称。

    6. 确保将 Identity token source 设置为 method.request.header.Authorization

    7. 选择 Create

    验证您的授权方配置

    1. 打开新的浏览器选项卡并访问网站域下的 /ride.html

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

    3. /ride.html 上的通知中复制授权令牌,并将其粘贴到“API Gateway console”选项卡下的 Identity token 字段中。

    4. 选择 Test 并确认您看到了为您用户显示的声明。

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

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


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

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

    3. 输入 ride 作为 Resource Name

    4. 确保将 Resource Path 设置为 ride

    5. 单击 Create Resource

    6. 选中刚创建的 /ride 资源,然后从 Action 下拉列表中选择 Create Method

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

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

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

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

    11. 输入您在上一模块中创建的函数名称 RequestUnicorn 作为 Lambda Function 的名称。

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

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

    14. 选择 Method Request 卡。

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

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

  • 第 4 步:启用 CORS

    现代 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


    1. 在 Amazon API Gateway 控制台的中间面板中,选择 /ride 资源。

    2. Actions 下拉列表中,选择 Enable CORS

    3. 使用默认设置并选择 Enable CORS and replace existing CORS headers

    4. 选择 Yes, replace existing values

    5. 等待所有步骤旁边均出现选中标记。

  • 第 5 步:部署您的 API

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


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

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

    3. 输入 prod 作为 Stage Name

    4. 选择 Deploy

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

  • 第 6 步:更新网站配置

    更新网站部署中的 /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 并选择 File,然后从浏览器中选择 Save Page As

    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. 选择下一步,而不改变 Set permissionsSet properties 部分的任何默认设置。

    7. 选择上传 (在 Review 部分执行)。

  • 第 6 步:验证您的实施

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


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

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

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

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