どこにでもいる30代SEの学習ブログ

主にプログラミング関連の学習内容。読んだ本の感想や株式投資についても書いてます。

【AWS】ウェブアプリケーションの構築(Amplify+Cognito+Lambda)

AWS公式のハンズオン「サーバーレスのウェブアプリケーションを構築」に習って、簡単なウェブアプリの構築を行いました。

このハンズオンを通して、以下の要素に触れることができます。

  • CodeCommit
  • Amplify
  • Cognito
  • DynamoDB
  • IAM
  • Lambda
  • API Gateway

AWSのハンズオンやチュートリアルはモノによって分かりやすさに差があります。このハンズオンは分かりやすい方だったのでオススメです。

aws.amazon.com

[1] Gitリポジトリの作成(CodeCommit)

ウェブアプリケーションのソース(index.html等)は「CodeCommit」で管理します。

[1-1] リポジトリの作成

まずはリポジトリを作成します。

f:id:predora005:20210418204713p:plain

「wildrydes-site」というリポジトリを作成します。

f:id:predora005:20210418204717p:plain

リポジトリが作成できたら、URLをコピーしてクローンします。

f:id:predora005:20210418204727p:plain

[1-2] IAMでGit認証情報を生成

Git認証情報を作成していない場合は、クローンする前に作成しておきます。IAMで使用するユーザを選択し、下にスクロールすると[認証情報を生成]があります。

f:id:predora005:20210418205050p:plain

ボタンを押すと、ユーザー名とパスワードが表示されます。これらをCodeCommitでの認証に使用します。

f:id:predora005:20210418205055p:plain

[1-3] AWSが用意してくれたサイトをコピーする

git cloneで先程作成したリポジトリをローカル環境に複製します。{ユーザー名}と{パスワード}はIAMで取得した認証情報を入力します。

git clone https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/wildrydes-site
Cloning into 'wildrydes-site'...
Username for 'https://git-codecommit.ap-northeast-1.amazonaws.com': {ユーザー名}
Password for 'https://{ユーザー名}@git-codecommit.ap-northeast-1.amazonaws.com': {パスワード}
warning: You appear to have cloned an empty repository.

AWS CLIからAWS側で用意されたサイトをコピーします。AWS CLIを初めて使用する場合はaws configureで初期設定を事前に行います。

$ cd wildrydes-site/
$ aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive

git addで変更を追加して、コミット・プッシュを行います。

$ git add .
$ git commit -m "Initial commit"
$ git push
Username for 'https://git-codecommit.ap-northeast-1.amazonaws.com': {ユーザー名}
Password for 'https://{ユーザー名}@git-codecommit.ap-northeast-1.amazonaws.com': {パスワード}
Enumerating objects: 95, done.
Counting objects: 100% (95/95), done.
Delta compression using up to 2 threads
Compressing objects: 100% (94/94), done.
Writing objects: 100% (95/95), 9.44 MiB | 16.08 MiB/s, done.
Total 95 (delta 2), reused 0 (delta 0)
To https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/wildrydes-site
 * [new branch]      master -> master

[2] ウェブサイトをデプロイする(Amplify)

ウェブサイトの構築・デプロイは「Amplify」で行います。

[2-1] デプロイ

Amplifyの画面からウェブアプリケーションを作成していきます。

f:id:predora005:20210421062205p:plain

[AWS CodeCommit]を選択します。

f:id:predora005:20210421062209p:plain

先程作成したリポジトリを選択します。

f:id:predora005:20210421062214p:plain

アプリの名前は任意で問題ありません。ここではチュートリアル通りの名称としています。

f:id:predora005:20210422000656p:plain

作成してから検証が終わるまで数分かかります。

f:id:predora005:20210422000702p:plain

検証が終わったのちURLをクリックすると、ウェブサイトが表示されます。

f:id:predora005:20210422000707p:plain

[2-2] サイトの変更

index.htmlを変更・コミットして、Webサイトに反映されるか確認します。index.htmlを開いてtitleを変更します。

f:id:predora005:20210422181739p:plain

変更後、git add, git commit, git pushします。

$ git add index.html 
$ git commit -m "updated title"
$ git push

git pushするとAmplifyでデプロイと検証が自動で行われます

f:id:predora005:20210422184647p:plain

検証まで終わった後、Webサイトを表示するとtitle変更が反映されています。

f:id:predora005:20210422181745p:plain

[3] ユーザー管理(Cognito)

ユーザー認証は「Cognito」で行います。

[3-1] ユーザープールを作成

f:id:predora005:20210422185932p:plain

f:id:predora005:20210422185936p:plain

[デフォルトを確認する]の方を選択します。プール名は任意の名称で構いません。

f:id:predora005:20210422185940p:plain

デフォルト設定のままで作成を完了します。

f:id:predora005:20210422185944p:plain

以上でユーザープールの作成は完了です。プールIDはこの後使用します。

f:id:predora005:20210422210223p:plain

[3-2] ユーザープールにアプリクライアントを追加

f:id:predora005:20210422210514p:plain

アプリクライアント名は任意で問題ありません。[クライアントシークレットを生成]のチェックは外します。

f:id:predora005:20210422210520p:plain

今回作成するブラウザベースのアプリでは、クライアントシークレットがサポートされていないためです。ハンズオンに以下の記載がありました。

クライアントシークレットは、現在ブラウザベースのアプリケーションでの使用はサポートされていません。

出典:モジュール 2 – Amazon Cognito でのユーザー管理

表示されたアプリクライアントIDはこの後使用します。

f:id:predora005:20210422211455p:plain

[3-3] ウェブサイトの設定を更新

js/config.jsを開き、先述の手順で取得したプールID、アプリクライアントIDを入力します。

  • userPoolId : プールID
  • userPoolClientId: アプリクライアントID
  • region: リージョン

f:id:predora005:20210422224053p:plain

編集が終わったら変更をリポジトリに送信します。

$ git add js/config.js 
$ git commit -m "update cognito config"
$ git push

[3-4] テスト

Amplifyでデプロイ・検証が終わったら、再度ウェブサイトにアクセスします。[GIDDY UP!]を選択すると登録画面に移動します。

f:id:predora005:20210422224059p:plain

メールアドレスとパスワードを入力します。メールアドレスは、実在のアドレス・ダミーアドレスどちらの入力も可能です。

f:id:predora005:20210422224112p:plain

実在のアドレスの場合は送信されたメールに記載の認証コードを入力します。ダミーアドレスの場合はCognitoコンソールから確認できるそうです。私は実在のアドレスを使用しました。

f:id:predora005:20210422224118p:plain

認証に成功するとダイアログが表示されます。

f:id:predora005:20210422224124p:plain

認証画面で再度メールアドレス・パスワードを入力します。

f:id:predora005:20210422224127p:plain

認証には成功しますが、APIが無いというメッセージが表示されます。APIはこの後設定します。

f:id:predora005:20210422224134p:plain

[4] DynamoDBテーブルを作成

「RideId」をプライマリキーに持つテーブルを作成します。

f:id:predora005:20210422231118p:plain

[5] Lambda関数の作成

[5-1] IAMロールの作成

Lambda関数作成の前に、DynamoDBにアクセスする権限を持つロールを作成します。

f:id:predora005:20210422231738p:plain

検索ボックスに「AWSLambdaBasicExecutionRole」を入力し、チェックボックスをONにします。

f:id:predora005:20210422231743p:plain

ロール名は任意の名称で問題ありません。

f:id:predora005:20210422231747p:plain

[5-2] インラインポリシーの追加

ロールにインラインポリシーを追加し、先程作成したDynamoDBへのアクセス権限を追加します。

f:id:predora005:20210423221108p:plain

サービス「DynamoDB」、アクション「PutItem」、リソースは先程作成したDynamoDBテーブルを指定します。

f:id:predora005:20210423221113p:plain

名前は任意で問題ありません。

f:id:predora005:20210423221119p:plain

[5-3] Lambda関数の作成

ランタイムは「Node.js」を選択します。

f:id:predora005:20210423223040p:plain

実行ロールは「既存のロールを使用する」を選択し、先程作成した IAMロールを選択します。

f:id:predora005:20210423223045p:plain

関数の作成完了後 「requestUnicorn.js」をindex.jsにコピーします。

[5-4] テスト

f:id:predora005:20210423225903p:plain

テストイベントを作成し、入力欄に下記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}}"
}

テストを実行し成功すると、以下のような結果が得られます。

f:id:predora005:20210423225908p:plain

[6] REST APIの作成(API Gateway)

[6-1] REST APIの作成

Lambda関数を呼ぶためのエンドポイントとなるREST APIを作成します。

f:id:predora005:20210423230543p:plain

「新しいAPIを選択し、エンドポイントタイプは「エッジ最適化」を選択します。

f:id:predora005:20210423230548p:plain

[6-2] Cognito ユーザープールオーソライザーを作成

f:id:predora005:20210423233517p:plain

タイプを「Cognito」にし、Cognitoユーザープールは作成したものを選択します。トークンのソースは「Authorization」にします。

f:id:predora005:20210423233522p:plain

作成後、テストを行います。

f:id:predora005:20210423233528p:plain

ブラウザからAmplifyで作成したページに飛び、/ride.htmlにアクセスします。認証を行うとトークンが表示されるのでコピーします。

f:id:predora005:20210423233533p:plain

コピーしたトークンを認可トークンの入力欄にペーストします。

f:id:predora005:20210423233537p:plain

テストが成功すると、Response Code: 200が返ってきます。

f:id:predora005:20210423233542p:plain

[6-3] POSTメソッド追加

[リソースの作成]を選択し、まずはrideリソースを作成します。

f:id:predora005:20210423235910p:plain

名前は「ride」としAPI Gateway CORSを有効にする」にチェックを付けます。

f:id:predora005:20210423235914p:plain

[メソッドの作成]を選択し、rideリソースにPOSTメソッドに追加します。

f:id:predora005:20210424000625p:plain

POSTを選択しチェックマークをクリックします。

f:id:predora005:20210424000628p:plain

統合タイプは「Lambda関数」にし、「Lambdaプロキシ統合の使用」にチェックします。Lambda関数は先程作成した関数の名称を入力します。

f:id:predora005:20210424000633p:plain

Lambda関数に権限を追加してよいか確認ダイアログが表示されるので[OK]をクリックします。

f:id:predora005:20210424001645p:plain

[メソッドリクエスト]を選択します。

f:id:predora005:20210424001650p:plain

認可横の鉛筆マークを選択するとコンボボックスが表示されるので、Cognitoで追加したオーソライザー「WildRydes」を選択します。

f:id:predora005:20210424001703p:plain

f:id:predora005:20210424001708p:plain

[6-4] APIをデプロイ

アクションから[APIのデプロイ]を選択します。

f:id:predora005:20210424002642p:plain

「新しいステージ」を選択し、ステージ名を「prod」とします。

f:id:predora005:20210424002647p:plain

URLが表示されるので、この後ウェブサイトの設定ファイルに反映します。

f:id:predora005:20210424002651p:plain

[6-5] ウェブサイトの設定更新

js/config.jsを開き「invokeURL」にAPIのURLを設定します。

f:id:predora005:20210424003215p:plain

設定をCodeCommitのリポジトリに反映します。

$ git add js/config.js 
$ git commit -m "Add invokeUrl to config.js"
$ git push

Amplifyの画面でデプロイ・検証が終わったことを確認し、ウェブサイトにアクセスすると地図が表示されます。

f:id:predora005:20210424003733p:plain

地図上の任意の位置をクリックすると、どこからともなく馬が現れクリックした位置で停止します。

f:id:predora005:20210424003738p:plain

[7] リソースの削除

  • Amplify
  • Cognitoユーザープール
  • Lambda関数
  • IAMロール (WildRydesLambda)
  • IAMロール(AWSAmplifyExecutionRole〜)
  • IAMロール (AWSAmplifyExecutionPolicy〜)
  • DynamoDBテーブル
  • API Gateway
  • CloudWatchロググループ
  • CodeCommitリポジトリ

終わりに

分量は多いですが、ハンズオンの説明が分かりやすいこともあり、途中で詰まることなく進められました。AWSの色々なサービスに触れることができ、良いハンズオンでした。

出典