在本模块中,您将使用 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 管理控制台中,单击 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 用户池授权方

    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

    在 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)。您将看到右侧边栏中有一条通知,告知您独角兽正在途中,然后您将看到一个独角兽图标正在朝着您的出发位置飞奔。