AWS でのプロジェクト

モダンウェブアプリケーションを構築する

ウェブアプリケーションのデプロイ、データベースへの接続、ユーザー動作の分析

モジュール 4: ユーザー登録の設定

このモジュールでは、ユーザー固有の情報を把握できるように、ウェブサイトでユーザー登録を設定します。

概要

ユーザーがお気に入りの Mysfit に投票したり Mysfit を採用したりできる機能など、Mythical Mysfits ウェブサイトに重要な機能を追加するには、まず、ユーザーにウェブサイトでユーザー登録をしてもらう必要があります。ウェブサイトユーザーの登録と認証を可能にするには、フルマネージドユーザー ID 管理サービスである AWS Cognitoユーザープールを作成します。

次に、登録されたユーザーのみがウェブサイトでの Mysfit のお気に入り登録や採用を承認されるようにするため、REST API と Amazon API Gateway をデプロイして NLB の前面に配置します。Amazon API Gateway もマネージドサービスの 1 つで、SSL ターミネーション、承認のリクエスト、スロットリング、API ステージとバージョニングなどの一般的に必要とされる REST API 機能をすぐに使えるように提供します。

再び AWS CLI を使用して、必要なリソースを AWS にデプロイします。

アーキテクチャ図

ユーザー登録の設定のアーキテクチャ図

実装手順

  • A: Cognito ユーザープールを作成する

    Mythical Mysfits のビジター全員が保存される Cognito ユーザープールを作成するには、次の CLI コマンドを実行して、MysfitsUserPool という名前のユーザープールを作成し、このプールに登録されるすべてのユーザーが、確認メールで E メールアドレスが自動的に検証されてから確認済みのユーザーになるように指示します。

    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 内で非公開にホスティングされるバックエンドウェブサービスと直接統合できるようになります。注意: このワークショップの目的のために、インターネット接続する NLB を作成して、前のモジュールから直接呼び出すことができるようにしました。そのため、このモジュールの後に API で承認トークンが必要となる場合でも、NLB は実際にはまだ API Gateway API の背後でパブリックに公開されます。

    実際の環境では、API Gateway がインターネット接続した API 承認向けの戦略であることがわかっているため、最初から内部用に NLB を作成する必要があります (または、新しい内部ロードバランサーを作成して、既存のものと置き換える必要があります)。ただし、時間を節約するため、既に作成した NLB をパブリックにアクセスできる状態のまま使用します。

    次の CLI コマンドを使用して、この後に登場する REST API 用に VPC リンクを作成します (指定された値を、モジュール 2 で NLB を作成したときに保存したロードバランサー ARN で置き換える必要があります)。

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

    上記のコマンドを実行すると、作成している VPC リンクの ID を含んだ api-gateway-link-output.json というファイルが作成されます。また、以下のようにステータスは 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** を使用して定義されています。**Swagger** は、JSON を使用して API を記述するときに使用できるオープンソースフレームワークです。API のこの Swagger 定義は、`~/environment/aws-modern-applicaiton-workshop/module-4/aws-cli/api-swagger.json` にあります。このファイルを開くと、REST API とそのすべてのリソース、メソッド、ファイル内で定義された構成が表示されます。

    この JSON ファイル内には、Cognito ユーザープールと Network Load Balancer に固有のパラメータを含むよう更新する必要のある場所が数か所あります。

    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 応答が再度表示されます。この段階では、mysfits の採用やお気に入りの登録のようないくつかの機能は追加されていますが、Flask サービスバックエンドがまだ実装されていません。

    これについては次で対応しましょう。

    CI/CD パイプラインを通してこれらのサービスの更新が自動的に公開される間に、次のステップに進みます。

  • A: Flask サービスバックエンドを更新する

    Mysfit Profiles の表示、いいね、採用を行う新しい機能に対応するため、バックエンド Flask ウェブサービス用に更新された 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 とやり取りして、AWS Cognito JavaScript SDK を必要とするすべての API コールの登録、認証、承認の管理をサポートします。

    このファイルでは、上記でコピーした OutputValues で一重引用符内の文字列 REPLACE_ME を置き換え、ファイルを保存します。

    before-replace2

    また、ユーザー登録プロセスのために、register.html と confirm.html という追加の 2 つの HTML ファイルにこれらの値を挿入します。コピーした値を、これらのファイルの REPLACE_ME 文字列にも挿入します。

    ここで、新しい機能をオンラインで公開できるように、Mythical Mysfits ウェブサイトのコンテンツをホスティングしている S3 バケットに、Cognito JavaScript SDK とこれらの HTML ファイルをコピーします。

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

    ブラウザで Mythical Mysfits ウェブサイトを更新し、新しい機能が動作していることを確認します。

    モジュール 4 はこれで終了です。

ついにユーザーの行動を把握します