AWS 上的项目

构建现代 Web 应用程序

部署 Web 应用程序、连接到数据库和分析用户行为

构建内容
构建一个包含虚构生物的宠物收养应用程序！
intro
简介
module-one
创建静态网站
module-two
构建动态网站
module-three
存储 mysfit 数据
module-four-active
注册用户
module-five
捕获用户点击

模块 4：设置用户注册

在本模块中，您将为用户设置网站注册功能，以便您能捕获用户特定的信息。

概览

为了给 Mythical Mysfits 网站添加一些更重要的功能，如让用户能为他们最爱的 mysfit 投票和收养 mysfit，我们首先要让客户在网站上注册。为了实现网站用户的注册和身份验证功能，我们将在 AWS Cognito 中创建一个用户池，AWS Cognito 是一项完全托管的用户身份管理服务。

然后，为了确保只有注册用户才有权点赞或收养网站上的 mysfit，我们将用 Amazon API Gateway 将 REST API 部署在我们的 NLB 之前。Amazon API Gateway 也是一项托管服务，可提供普遍要求具备的开箱即用 REST API 功能，如 SSL 终端、请求授权、限制、API 阶段及版本控制等。

您将再次使用 AWS CLI 来将所需资源部署到 AWS。

架构图

设置用户注册架构图

 完成时间

60 分钟

 使用的服务

Amazon Cognito
Amazon API Gateway
Amazon Simple Storage Service (S3)

 试用 Github 上的构建方法

README
.NET 模块 4
Go 模块 4
Java 模块 4
Python 模块 4

实施说明

  • A：创建 Cognito 用户池

    要创建用于存储所有的 Mythical Mysfits 访客的 Cognito 用户池，请执行以下 CLI 命令来创建一个名为 MysfitsUserPool 的用户池，指明所有注册到这个池的用户都应该自动通过确认电子邮件验证他们的电子邮件地址，以便他们成为确认用户。

    aws cognito-idp create-user-pool --pool-name MysfitsUserPool --auto-verified-attributes email

    从以上命令复制响应，其中包括您在后续步骤中会用到的用户池唯一 ID。示例：Id: us-east-1_ab12345YZ)

    B：创建 Cognito 用户池客户端

    然后，为了将我们的前端网站与 Cognito 相集成，我们必须为该用户池创建新的用户池客户端。这将生成唯一的客户端标识符，让我们的网站有权调用 Cognito 中未经验证的 API，以便网站用户通过 Mythical Mysfits 用户池进行登录和注册。要使用 AWS CLI 为上述用户池创建新客户端，请运行以下命令（将 --user-pool-id 的值替换为您从上方复制的值）：

    aws cognito-idp create-user-pool-client --user-pool-id REPLACE_ME --client-name MysfitsUserPoolClient

  • 然后，我们在现有 Flask 服务前创建新的 RESTful API，以便我们能在 NLB 收到任何请求之前执行请求授权。我们将使用 Amazon API Gateway 完成此操作（如模块概览所述）。

    为了 API Gateway 能够以非公开的方式与我们的 NLB 集成，我们将配置一个 API Gateway VPC 链接，来使 API Gateway API 直接与以非公开的方式托管于 VPC 中的后端 Web 服务集成。注意：为了实现此研讨会的目的，我们创建了面向互联网的 NLB，以便它能在之前的模块中直接被调用。因此，虽然在本模块后，我们会要求提供 API 中的授权令牌，但是我们的 NLB 实际上在 API Gateway API 后还是会对公众开放。

    在现实场景中，您应该在一开始就创建面向内部的 NLB（或创建一个新的内部负载均衡器来取代现有的），并了解 API Gateway 将是您面向互联网的 API 授权策略。但是由于时间原因，我们将使用已创建好的 NLB，该 NLB 可公开访问。

    使用以下 CLI 命令，为我们接下来的 REST API 创建 VPC 链接（您需要使用您在模块 2 中创建 NBL 时保存的负载均衡器 ARN 替换指示的值）：

    aws apigateway create-vpc-link --name MysfitsApiVpcLink --target-arns REPLACE_ME_NLB_ARN > ~/environment/api-gateway-link-output.json

    以上命令会创建一个名为 api-gateway-link-output.json 的文件，其中包含了正在创建的 VPC 链接的 id。它还会显示状态为 PENDING，与下面相似。

    完成创建大概需要 5-10 分钟，您可以从此文件中复制 id，继续下一步。

    {
    "status": "PENDING",
    "targetArns": [
        "YOUR_ARN_HERE"
    ],
    "id": "abcdef1",
    "name": "MysfitsApiVpcLink"
}

    通过创建 VPC 链接，我们可以继续使用 Amazon API Gateway 创建实际的 REST API。

    B：使用 Swagger 创建 REST API

    您的 MythicalMysfits REST API 使用 **Swagger** 定义，后者是一款用 JSON 来描述 API 的热门开源框架。API 的 Swagger 定义位于 `~/environment/aws-modern-applicaiton-workshop/module-4/aws-cli/api-swagger.json`。打开此文件，您将看到 REST API 及其中定义的所有资源、方法和配置。

    此 JSON 文件中有几处需要更新，以包含特定于您的 Cognito 用户池的参数，以及您的网络负载均衡器。

    API 定义中的 `securityDefinitions` 对象表示我们已用“授权”标头建立了 apiKey 授权机制。您将注意到 AWS 已经使用 `x-amazon-api-gateway-` 前缀向 Swagger 提供了自定义扩展，在这些扩展中，API Gateway 特定功能可添加到典型的 swagger 文件中，以利用 API Gateway 的特定功能。

    在文件中使用 CTRL-F，搜索 `REPLACE_ME` 所处的各个位置，等候您的特定参数。完成编辑后，保存文件并执行下列 AWS CLI 命令：  

    aws apigateway import-rest-api --parameters endpointConfigurationTypes=REGIONAL --body file://~/environment/aws-modern-application-workshop/module-4/aws-cli/api-swagger.json --fail-on-warnings

    复制此命令返回的响应，并保存 `id` 值以用于下一步：

    {
    "name": "MysfitsApi",
    "endpointConfiguration": {
        "types": [
            "REGIONAL"
        ]
    },
    "id": "abcde12345",
    "createdDate": 1529613528
}
    C：部署 API

    现在，我们的 API 已经创建好了，但还未在任何地方部署。要部署我们的 API，我们必须首先创建部署，并指明该部署用于哪一个 **阶段**。阶段是对部署的命名引用，是 API 的快照。

    您使用阶段来管理和优化特定的部署。例如，您可以设置阶段来实现缓存，自定义请求限制，配置日志，定义阶段变量，或为测试附加 Canary 发布。我们将把我们的阶段称作 `prod`。要为 prod 阶段创建部署，请执行以下 CLI 命令：

    aws apigateway create-deployment --rest-api-id REPLACE_ME_WITH_API_ID --stage-name prod

    如此一来，我们用于用户授权的 REST API 就部署好了，并在互联网上提供…但是在哪呢？！ 您的 API 可在下列位置找到：

    https://REPLACE_ME_WITH_API_ID.execute-api.REPLACE_ME_WITH_REGION.amazonaws.com/prod

    复制以上内容，更换适当值，并在 URI 的末尾添加 `/mysfits`。 在浏览器地址栏中输入，您应该马上就能看到您的 Mysfits JSON 响应。但是，我们已经添加了几个我们的 Flask 服务后端还没有实现的功能，例如收养 mysfit 和点赞 mysfit。

    我们接下来就来处理它。

    在那些服务更新通过您的 CI/CD 管道自动推送的时候，继续下一步。

  • A：更新 Flask 服务后端

    为了实现浏览 Mysfit 资料、点赞及收养的新功能，我们为您的后端 Flask Web 服务加入了更新的 Python 代码。

    我们来使用这些文件覆盖您现有的代码库并把它们推送到仓库：

    cd ~/environment/MythicalMysfitsService-Repository/
    cp -r ~/environment/aws-modern-application-workshop/module-4/app/* .
    git add .
    git commit -m "Update service code backend to enable additional website features."
    git push

    在那些服务更新通过您的 CI/CD 管道自动推送的时候，继续下一步。

    B：在 S3 中更新 Mythical Mysfits 网站

    打开我们稍后将推送至 Amazon S3 的新版 Mythical Mysfits index.html 文件，它位于：~/environment/aws-modern-application-workshop/module-4/app/web/index.html 在这个新的 index.html 文件中，您将发现用于添加用户注册和登录的其他 HTML 和 JavaScript 代码。

    此代码正与 AWS Cognito JavaScript SDK 进行交互，帮助管理所有需要该代码的 API 调用的注册、验证和授权。

    在此文件中，用从上方复制的 OutputValues 替换单引号里的 REPLACE_ME 字符串，并保存文件：

    before-replace2

    为了实现用户注册过程，您还要将这些值插入另外两个 HTML 文件：register.html 和 confirm.html。还要将复制的值插入到这些文件的 REPLACE_ME 字符串中。

    现在，我们来将这些 HTML 文件 和 Cognito JavaScript SDK 复制到托管我们 Mythical Mysfits 网站内容的 S3 存储桶中，以便新功能可以发布到线上。

    aws s3 cp --recursive ~/environment/aws-modern-application-workshop/module-4/web/ s3://YOUR-S3-BUCKET/

    在浏览器中刷新 Mythical Mysfits 网站，查看新功能的运行情况！

    模块 4 到此结束。

开始学习模块 5

最后，捕获用户行为