【AWS】Cognitoハンズオン - サーバーレスのウェブアプリケーションを構築する

# はじめに

Cognito について調べる機会があったので、実際に公式のハンズオンを試してみた！って記事です。
参照：[サーバーレスのウェブアプリケーションを構築する](https://aws.amazon.com/jp/getting-started/hands-on/build-serverless-web-app-lambda-apigateway-s3-dynamodb-cognito/)

構成は下記の通り。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/6ca5cb22-c42d-cbf3-f561-bd2a9a09c39d.png)
Amplify と Cognito は初見なので頑張ります。。

# サーバーレスのウェブアプリケーションを構築する
## ① 静的ウェブサイトをホスティングする
AWS Apmlifyについては [コチラ](https://aws.amazon.com/jp/amplify/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/decf39a0-8cf7-bac5-2731-57c5c5148497.png)
今回、静的ウェブサイトのホスティングに AWS Apmlify を使用します。

調べたところ Apmlify 君はかなり便利そう。
AWS バックエンドを数分で作成してくれる上に、色々な機能まで兼ね備えてるとか。。

実際の業務では色々な要件があるので Apmlify 君を使う機会は少ないかもですが、このような便利なサービスがあるとハンズオンも捗るのでありがたいです。

少し話が脱線しましたのでハンズオンに戻ります。

### リージョン選択
我らが**ap-northeast-1**（東京リージョン）で作業をしていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/2c445e58-8845-f8b1-a8fc-cf6b94f684d2.png)

### Gitリポジトリを作成
CodeCommit を使用してアプリケーション コードを保存します。（GitHubでも可）

AWSマネコンから CodeCommit > リポジトリ > リポジトリを作成 の順にクリック

今回は`sample-repo`というリポジトリを作成しました。

### CodeCommit の HTTPS Git 認証
IAM > ユーザ > 自身のIAMユーザ > セキュリティ認証情報 タブの順の開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/008f549d-5e19-6fde-2525-2aef8686019f.png)

`認証情報の生成`から認証情報を生成して、csvファイルをダウンロードするか、情報を控えておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/7eba0866-b9de-6a08-7f06-7d36bcf8d251.png)


### Gitリポジトリにデータを追加
筆者は Windows11 なので人によっては一部手順が異なります。
そこら辺は調べてください。

URL のクローンから **HTTPSのクローン** を選択し、URLをコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/44b8b1cc-169b-df8b-3cc3-2f251e35eb76.png)

自身のPCに適当に作業用のフォルダを作成して、パスの部分に`cmd`と入力しEnterを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/7e249d75-dc70-4878-328d-b24a54b6d87d.png)

ターミナルで git clone を実行します。
git コマンドが使えない方はインストールしてください。
```
git clone <HTTPS URL>
```

コマンドを実行すると下記の様に認証を促されます。
先ほど生成した認証情報を入力して`Continue`をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/a3dfdb2d-ee3d-8190-823c-046a0e89dc1a.png)

リポジトリが空なので warning が出力されますが気にしない。
```
C:\Users\onish\OneDrive\デスクトップ\AWS\Cognito>git clone https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/sample-repo
Cloning into 'sample-repo'...
warning: You appear to have cloned an empty repository.
```

ここにデータを追加していきます。
```bash
# ディレクトリをリポジトリに変更
cd sample-repo

# ソースコードのダウンロード（aws コマンドが実行できるようにしておいてください）
aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive

# add
git add .

# commit
git commit -m 'new'

# push 
git push
```
push 出来たので CodeCommit のリポジトリを確認
ソースコードが追加されているので問題なし！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/b690c3ac-2206-a8e7-eafd-ad992c8ed6db.png)

### Amplifyコンソールでウェブホスティングを有効にする
やっと Amplify 君の出番。 お待たせ・・・。

`使用を開始する`から右側の **Amplify ホスティング**を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/78f34e32-647b-3ee1-b90e-423460aa58cb.png)

CodeCommit を選択後、先ほどのリポジトリとブランチを選択し、次へ を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/04a45b7c-58e4-6f6d-6b4a-b01a70d7b687.png)

下図のチェックボックスにチェックをつけてデプロイします。
デプロイには数分かかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/430c7ed6-d2f6-0667-a371-dcedbdb8d83a.png)

この間に次の作業の準備をします。

### サイトを変更する
Amplify コンソールは、接続されたリポジトリへの変更を検出すると、アプリを再構築して再デプロイします。

index.html を少し修正して、実際に自動デプロイされるかを確認します。
修正内容はなんでもいいです。。
```html:sample-repo/index.html
<!-- 修正前 (7行目) -->
<title>Wild Rydes</title>

<!-- 修正後 -->
<title>Wild Rydes - hands on!!</title>
```

修正後に再度 push します。
ただ、その前にAmplify によってウェブサイトがデプロイされていることを確認してから実施します。

デプロイまでチェックが付いていると、画像の左下辺りにURLが表示されておりますのでそちらをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/b366f307-6ba2-7b86-fd2c-11cca1bce062.png)

こんなのが表示されれば OK です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/70cff55d-538c-8cce-d7b7-a2ed2681990b.png)

確認できたので push します。
```bash
# add
git add .

# commit
git commit -m 'update title'

# push 
git push
```

デプロイ完了後に確認するとタイトルが変わってる！便利ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/f2fcb790-d2c3-a324-8341-3af8dd471be4.png)

## ② ユーザを管理する

### 検証済み ID の作成
Cognito でメール送信機能を使用するので、SESに検証済みのIDを作成しておきます。

Amazon SES > 設定: 検証済み ID > ID の作成 の順にクリック
IDタイプはEメールを選択し、自身が使用しているメールアドレスを入力。Gメールとかで OK です。
example が誤字ってるなんて言わないでくださいね。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/a653d7ac-f14b-6eea-2a97-cc56916af628.png)

するとメールが送られてくるので URL をクリックして認証完了。

### Cognito ユーザープールの作成

やっと Cognito です。
記事書きながらハンズオンしているので、ここまでで1時間弱掛かっており心が折れそうです（笑）

ユーザーのアカウントを管理するための Amazon Cognito ユーザープールを作成します。
顧客が新規ユーザーとして登録し、電子メール アドレスを確認し、サイトにサインインできるページを展開します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/b8333c37-f7b2-e0ef-f1f0-53a49abdaa93.png)

Cognito は、ユーザーを認証するために 2 つの異なるメカニズムを提供します。

**① Cognito ユーザー プール**
Cognito ユーザー プール使用して、アプリケーションにサインアップおよびサインイン機能を追加可能

**②Cognito ID プール**
Facebook、Twitter、Amazon などのソーシャル ID プロバイダー、SAML ID ソリューション、または独自の ID システムを使用してユーザーを認証可能

以下は ChatGPT のサインイン画面。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/95224b56-82fb-02ca-02d2-3a515256c36d.png)

Emailアドレスでサインインする場合は、Cognito ユーザプール、
Google や Apple のアカウントでサインインするのが Cognito ID プール ってイメージかな？

### Cognito ユーザプールを作成し、アプリをユーザプールに統合する
Amazon Cognito > ユーザープール > ユーザープールを作成 の順にクリック
ここら辺の作業は公式ハンズオンと異なります。（コンソールのバージョンが異なるため）

**・認証プロバイダー**
`ユーザ名`にチェックを付けて「次へ」を押下

**・セキュリティ要件を設定**
多要素認証 は`MFAなし`を選択し「次へ」を押下

**・サインアップエクスペリエンスを設定**
デフォルトのまま「次へ」を押下

**・メッセージ配信を設定**
E メールプロバイダーは SES を選択し、先ほど作成した検証済み ID を選択して「次へ」を押下

**・アプリケーションを統合**
ユーザープール名：sample-user-pool
アプリケーションクライアント名：WildRydesWebApp
それ以外はデフォルトで「次へ」を押下しユーザプールを作成します。

### Webサイト構成を更新する
sample-repo/js/config.js ファイルに Cognito の情報を記述していきます。
必要な情報は以下の２つ。
**① userPoolId**
作成したらすぐに確認できる個所にあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/3676c69f-e6af-6908-7a05-352c243aac92.png)

**② userPoolClientId**
作成したユーザプールを選択後、アプリケーションの結合タグを選択
一番下までスクロールするとあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/7a7007ca-9a2b-719f-2871-c13e1d7095d8.png)


```html:sample-repo/js/config.js
window._config = {
    cognito: {
        userPoolId: 'ap-northeast-1_ZuNYdCNEU', // e.g. us-east-2_uXboG5pAb
        userPoolClientId: '3e2a1i2ak2i7ph8vc8f1voceb4', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
        region: 'ap-northeast-1' // e.g. us-east-2
    },
    api: {
        invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod',
    }
};
```
修正後は push します。

```bash
# add
git add .

# commit
git commit -m "new config"

# push
git push
```

### 検証
Web サイトのドメインの下にある`/register.html`にアクセスするか、Giddy Up!を押下します。

自身が所有しているEメールアドレスがある場合はそちらを入力してユーザ登録を行います。
（検証済みIDで使用したアドレスを使用する）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/06ac3d5a-7189-d090-756b-a5e1f55c5c0c.png)

LET'S RYDE を押下すると、認証ページに飛ばされます。
６桁の認証コードが送信されているので、メールアドレスと認証コードを入力すると下記メッセージのポップアップが表示されます。

```
Verification successful. You will now be redirected to the login page
```

認証に成功したのでログインページにリダイレクトされますので、
メールアドレスとパスワード入力してログインを行います。

以下のようなものが出力されたら OK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/c4665921-fa5f-7320-d05b-93978b054e7c.png)

Cognito のユーザプールを確認すると、ユーザが登録されております。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/d38d581e-b9dd-5f33-034f-2d8b9032ff23.png)

そもそもですが、Cognito は 認証・認可の機能を提供するサービスなので、
認証に成功するとトークンが返ってくるって感じですね。

このトークンを利用して API Gateway で API を呼び出すことが出来るって感じかー！と少し理解してきた。

## ③ サーバレスバックエンドを構築する
続いてはバックエンドの構築。
今回は DynamoDB と Lambda を構築します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/39b9522f-1b0c-667e-dec6-840dba8bc286.png)

### DynamoDB テーブルを作成する
DynamoDB > テーブル > テーブルの作成 の順にクリックします。
下記のパラメータを設定し、残りはデフォルトでテーブルを作成します。
| パラメータ | 設定値 |
|:-:|:-:|
|  テーブル名 | Rides  |
|  パーティションキー | RideId  |

作成後に、テーブルの概要から ARN を控えておきます。（後で使います）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/21441e41-8f57-9fab-1fa2-792a65ea681a.png)


### Lambda 関数の IAM ロールを作成する
Lambda 関数にアタッチする IAM ロールを作成します。

IAM > ロール > ロールを作成 の順にクリックします。

**・信頼されたエンティティを選択**
下記のパラメータを設定し「次へ」を押下
| パラメータ | 設定値 |
|:-:|:-:|
| 信頼されたエンティティタイプ  | AWS のサービス  |
| ユースケース  | Lambda  |

**・信頼されたエンティティを選択**
`AWSLambdaBasicExecutionRole`にチェックを付けて「次へ」を押下

**・名前、確認、および作成**
下記のパラメータを設定し「作成」を押下
| パラメータ | 設定値 |
|:-:|:-:|
| ロール名 | WildRydesLambda  |

IAM ロールにインラインポリシーを追加します。

IAM > ロール > WildRydesLambda の順にクリックします。
許可ポリシーの右側に「許可を追加」というメニューがあるので、そちらからインラインポリシーを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/6e5c02bc-f6a0-0cf0-93f9-6c9f3750f45b.png)

サービス検索に`DynamoDB`と入力しDynamoDB を選択。

検索欄に`PutItem`と入力し、PutItemにチェックを付ける。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/5928f8c8-7fd1-ea00-9b8f-89cda214c4eb.png)

その後、`ARN を追加`をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/e25c050c-b2d9-8240-55be-0fb51b192213.png)

テキストに切り替えて、先ほど控えたARNを張り付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/15c76ea3-e0ee-4130-e006-e384dc6066ee.png)

「次へ」を押下

下記のパラメータを設定し「ポリシーを作成」を押下
| パラメータ | 設定値 |
|:-:|:-:|
| ポリシー名 | DynamoDBWriteAccess  |

これで、Cloudwatch Logs にログを出力するポリシーと、DynamoDB へ書き込むポリシーが付与された、Lambda 用のIAMロールが完成です。

### Lambda 関数を作成する
Lambda > 関数 > 関数の作成 の順にクリックします。

下記のパラメータを設定し「関数の作成」を押下
| パラメータ | 設定値 |
|:-:|:-:|
| 関数名 | RequestUnicorn  |
| ランタイム | Node.js 16.x  |
| デフォルトの実行ロールの変更 | WildRydesLambda  |

作成したLambda関数のコードを修正します。
index.js の内容を下記に修正し、「Deploy」を押下
```js
const randomBytes = require('crypto').randomBytes;

const AWS = require('aws-sdk');

const ddb = new AWS.DynamoDB.DocumentClient();

const fleet = [
    {
        Name: 'Bucephalus',
        Color: 'Golden',
        Gender: 'Male',
    },
    {
        Name: 'Shadowfax',
        Color: 'White',
        Gender: 'Male',
    },
    {
        Name: 'Rocinante',
        Color: 'Yellow',
        Gender: 'Female',
    },
];

exports.handler = (event, context, callback) => {
    if (!event.requestContext.authorizer) {
      errorResponse('Authorization not configured', context.awsRequestId, callback);
      return;
    }

    const rideId = toUrlString(randomBytes(16));
    console.log('Received event (', rideId, '): ', event);

    // Because we're using a Cognito User Pools authorizer, all of the claims
    // included in the authentication token are provided in the request context.
    // This includes the username as well as other attributes.
    const username = event.requestContext.authorizer.claims['cognito:username'];

    // The body field of the event in a proxy integration is a raw string.
    // In order to extract meaningful values, we need to first parse this string
    // into an object. A more robust implementation might inspect the Content-Type
    // header first and use a different parsing strategy based on that value.
    const requestBody = JSON.parse(event.body);

    const pickupLocation = requestBody.PickupLocation;

    const unicorn = findUnicorn(pickupLocation);

    recordRide(rideId, username, unicorn).then(() => {
        // You can use the callback function to provide a return value from your Node.js
        // Lambda functions. The first parameter is used for failed invocations. The
        // second parameter specifies the result data of the invocation.

        // Because this Lambda function is called by an API Gateway proxy integration
        // the result object must use the following structure.
        callback(null, {
            statusCode: 201,
            body: JSON.stringify({
                RideId: rideId,
                Unicorn: unicorn,
                Eta: '30 seconds',
                Rider: username,
            }),
            headers: {
                'Access-Control-Allow-Origin': '*',
            },
        });
    }).catch((err) => {
        console.error(err);

        // If there is an error during processing, catch it and return
        // from the Lambda function successfully. Specify a 500 HTTP status
        // code and provide an error message in the body. This will provide a
        // more meaningful error response to the end client.
        errorResponse(err.message, context.awsRequestId, callback)
    });
};

// This is where you would implement logic to find the optimal unicorn for
// this ride (possibly invoking another Lambda function as a microservice.)
// For simplicity, we'll just pick a unicorn at random.
function findUnicorn(pickupLocation) {
    console.log('Finding unicorn for ', pickupLocation.Latitude, ', ', pickupLocation.Longitude);
    return fleet[Math.floor(Math.random() * fleet.length)];
}

function recordRide(rideId, username, unicorn) {
    return ddb.put({
        TableName: 'Rides',
        Item: {
            RideId: rideId,
            User: username,
            Unicorn: unicorn,
            RequestTime: new Date().toISOString(),
        },
    }).promise();
}

function toUrlString(buffer) {
    return buffer.toString('base64')
        .replace(/\+/g, '-')
        .replace(/\//g, '_')
        .replace(/=/g, '');
}

function errorResponse(errorMessage, awsRequestId, callback) {
  callback(null, {
    statusCode: 500,
    body: JSON.stringify({
      Error: errorMessage,
      Reference: awsRequestId,
    }),
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  });
}
```
以下のようなイメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/2140e388-e519-07d0-cbbe-83e202dfc3e8.png)

### 実装を検証する

`Deploy`の左にある、`Test`をクリックします。
イベント名に`TestRequestEvent`と入力し、イベントJsonには下記をコピペし「保存」を押下
```
{
    "path": "/ride",
    "httpMethod": "POST",
    "headers": {
        "Accept": "*/*",
        "Authorization": "eyJraWQiOiJLTzRVMWZs",
        "content-type": "application/json; charset=UTF-8"
    },
    "queryStringParameters": null,
    "pathParameters": null,
    "requestContext": {
        "authorizer": {
            "claims": {
                "cognito:username": "the_username"
            }
        }
    },
    "body": "{\"PickupLocation\":{\"Latitude\":47.6174755835663,\"Longitude\":-122.28837066650185}}"
}
```

その後、Test を実行し下記のレスポンスが出力されれば OK です。
```
{
  "statusCode": 201,
  "body": "{\"RideId\":\"ctgrS1HMmBFsrBUkiCgNGQ\",\"Unicorn\":{\"Name\":\"Rocinante\",\"Color\":\"Yellow\",\"Gender\":\"Female\"},\"Eta\":\"30 seconds\",\"Rider\":\"the_username\"}",
  "headers": {
    "Access-Control-Allow-Origin": "*"
  }
}
```

## ④ RESTful API をデプロイする
続いては API Gateway を作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/743ac9b9-7208-b339-d31f-ca12269f020b.png)

### 新しい REST API を作成する
API Gateway > API > REST API > 構築 の順にクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/e08d194e-604b-fffb-0d13-637c8abcf53b.png)

下記のパラメータを設定し「APIの作成」を押下
| パラメータ | 設定値 |
|:-:|:-:|
| プロトコルを選択する | REST  |
| 新しい API の作成 | 新しい API  |
| API 名 | WildRydes  |
| エンドポイントタイプ | エッジ最適化  |

### オーソライザーを作成する
左側のナビゲーションでオーソライザーを選択後、下記のパラメータを設定し「作成」を押下
| パラメータ | 設定値 |
|:-:|:-:|
| 名前  | CognitoAuth  |
| タイプ  | Cognito  |
| ユーザープール  | sample-user-pool  |
| トークンのソース  | Authorization  |
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/4144a3e2-48ea-d5ac-d78a-c844f4aa56a2.png)

### 新しいリソースとメソッドを作成する
左側のナビゲーションでリソースを選択後、
アクションのドロップダウンから`リソースの作成`を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/a190e81c-0443-af25-872d-6cc9ad091f55.png)

下記のパラメータを設定し「リソースの作成」を押下
| パラメータ | 設定値 |
|:-:|:-:|
| リソース名 | ride（リソース パスが[ride]に設定されていることを確認します）  |
| API Gateway CORS を有効にする | 有効  |

作成した`ride`リソースを選択した状態で、アクションから`メソッドの作成`を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/e4025c06-b5e4-0eee-6864-5b7a39d07bbd.png)

プルダウンから`POST`を選択し、チェックマークをクリック

下記のパラメータを設定し「保存」を押下
| パラメータ | 設定値 |
|:-:|:-:|
| 統合タイプ | Lambda関数  |
| Lambda プロキシ統合の使用 | 有効  |
| Lambda 関数 | RequestUnicorn  |

下記のポップアップが表示されるので OK を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/1faac536-e5fd-abcf-7fad-719ee7951c5c.png)




左上のメソッドリクエストを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/f4be3a8e-5f4e-57fb-060b-985e2385eaf1.png)

`認可：なし`の設定を先ほど作成した`CognitoAuth`に変更します。

### API をデプロイする
アクション > API のデプロイの順にクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/2ace20a7-2101-a5e0-90b7-be4c6e135701.png)

下記のパラメータを設定し「デプロイ」を押下
| パラメータ | 設定値 |
|:-:|:-:|
| デプロイされるステージ | 新しいステージ  |
| ステージ名 | prod  |

左ナビゲーションでステージを選択
prod をクリックすると`prod ステージエディター`が表示されるので、こちらの URL をメモします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/fb7194ed-ab8d-4546-fb38-f458d03c8c1e.png)

### Web サイト構成を更新する
config.js の`invokeUrl`に先ほどメモした URL を記述します。
```js:sample-repo/js/config.js
window._config = {
    cognito: {
        userPoolId: 'ap-northeast-1_ZuNYdCNEU', // e.g. us-east-2_uXboG5pAb
        userPoolClientId: '3e2a1i2ak2i7ph8vc8f1voceb4', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
        region: 'ap-northeast-1' // e.g. us-east-2
    },
    api: {
        invokeUrl: 'https://dgo212off5.execute-api.ap-northeast-1.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod',
    }
};
```

修正後は push します。

```bash
# add
git add .

# commit
git commit -m "update config"

# push
git push
```

### 動作確認
ArcGISのバージョンが上がっているため、ride.htmlを修正する必要があるらしい。
２か所修正する必要があるので、下記の通り修正してください。（4.3 ⇒ 4.6 になっただけ）
```html:sample-repo/ride.html
修正前：https://js.arcgis.com/4.3
修正後：https://js.arcgis.com/4.6
```
修正後はいつもの git push まで実施します。（割愛）

Web サイトのドメインの下にある/ride.htmlにアクセスします。
アクセス後に下記の画面が表示された場合は、[ArcGIS アカウント作成ページ](https://www.arcgis.com/sharing/rest/oauth2/signup?client_id=arcgisonline&redirect_uri=http://www.arcgis.com&response_type=token)から作成してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/6128b13e-0a9e-ae26-1133-9f832579515c.png)

するとこんな感じで地図が表示される！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/0f216608-b1ff-9124-13d9-1eb411930977.png)

適当にどこかクリックした後、
右上の`Request Unicorn`をクリックするとユニコーンが飛んできます（笑）

ユニコーン到着後に DynamoDB を確認するとレコードが追加されてます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/670b1901-c854-18f5-fbda-d0c47025d6c2.png)

## ⑤ リソースを終了する
作成したリソースを削除していきます。

削除は難しくないので、[コチラ](https://aws.amazon.com/jp/getting-started/hands-on/build-serverless-web-app-lambda-apigateway-s3-dynamodb-cognito/module-5/)を参考にして下さい。。

削除しないと料金がかかるので気を付けてください。

また、使用しなければ料金はかかりませんが、CodeCommitの削除も忘れずに。


## 感想
結局 Cognito って何ぞや！という話ですが、
Cognitoは認証・認可機能を提供するAWSサービスという理解でいいですかね。

API Gateway で認可を使うのであれば、紐づけ可能な Cognito はものすごく便利ですね！

認証・認可については [コチラ](https://dev.classmethod.jp/articles/authentication-and-authorization/) を参考にしてください。

# さいごに
無事ハンズオンを終えることが出来ました。
記事にするのはかなり疲れましたがいざ完走するといい気分です（笑）

やっぱりAWSは便利ですし初心者でも使いやすいので本当にいいサービスですね！

定期的にAWSの記事を更新していくので他の記事もぜひご覧ください。