初めに
以下のチュートリアルをやってみました。Amplify と CodeCommit の連携、CodeCommit を使用した開発、Cognito を使ったオーソライザー、Lambda プロキシ統合など、普段使わないサービスばかりで勉強になりました。
1. CodeCommit にリポジトリを作成する
CodeCommit を使用してローカルで開発を進める場合、GitHub などと同様に認証情報を作成する必要があります。GitHub では 「SSH」 や GitHub アカウントの「ユーザー名・パスワード」を用いますが、CodeCommit では IAM を使用した認証を利用することができます。
AWS CodeCommit リポジトリへの接続を設定する最も簡単な方法は、IAM コンソールで CodeCommit の Git 認証情報を設定し、HTTPS 接続にこれらの認証情報を使用することです。
IAM のコンソール画面でユーザーを選択し、CodeCommit の認証情報を作成します。この認証情報をダウンロードしておきます。
CodeCommit でリポジトリを作成します。
以下の「HTTPS のクローン」をクリックすると、クローンコマンドをコピーできます。
コピーしたコマンドをローカルで実行します。ユーザー名・パスワードを聞かれるので、作成した CodeCommit の認証情報を入力します。
PS C:\tutorial> git clone https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/wildrydes-site
Cloning into 'wildrydes-site'...
warning: You appear to have cloned an empty repository.
クローンしたフォルダに移動し、開発を行います。
PS C:\tutorial> cd wildrydes-site
このチュートリアルで用意されているアプリケーションのファイルは S3 に置いてあります。ユーザーアクセスキー（アクセスキーID・シークレットアクセスキー）を作成して S3 からローカルにファイルをコピーします。（--recursive オプションはフォルダ内を再帰的にダウンロードするためのオプションです。フォルダ構造を保持したままダウンロードが可能です。）
PS C:\tutorial\wildrydes-site> aws s3 cp s3://wildrydes-ap-northeast-1/WebApplication/1_StaticWebHosting/website ./ --recursive
ダウンロードしたファイルを CodeCommit にプッシュします。
PS C:\tutorial\wildrydes-site> git add .
PS C:\tutorial\wildrydes-site> git commit -m "initial commit"
PS C:\tutorial\wildrydes-site> git push
以下はプッシュ後のリポジトリです。
2. Amplify で Web アプリケーションをデプロイする
この章ではCodeCommit に置いたソースコードを利用して Amplify でデプロイします。
「Host your web app」を選択します。
Amplify に関連付けるリポジトリとして CodeCommit を選択します。
以下ではリポジトリ・ブランチを選択します。
指定したブランチに変更があったとき、Amplify が自動でビルド・デプロイを行うことを許可するために「Allow AWS Amplify ...」にチェックを入れます。
設定内容を確認して「保存してデプロイ」をクリックします。
3. Cognito でユーザープールを作成する
Cognito は認証・認可を行うためのサービスです。ユーザープールではユーザー認証を行います。ユーザープールの目的はユーザー情報を保管することです。Cognito が管理する対象としてもう一つ、 ID プールというものも存在します。こちらはユーザーに対して認可を行います。ID プールの目的はユーザーに他の AWS サービスにアクセスすることを許可することです。
ユーザープールでは認証 (ID の検証) ができます。ユーザープールを使用すると、アプリユーザーはユーザープールからのサインインや、サードパーティーのアイデンティティプロバイダー (IdP) を介した連携ができます。
ID プールでは認可 (アクセスコントロール) ができます。ID プールを使用すると、ユーザーに一意の ID を作成して、他の AWS サービスへのアクセスを許可できます。
今回のチュートリアルでは、サインアップ・サインインの実装を行うために「ユーザープールの管理」を選択します。
「ユーザープールを作成する」をクリックします。
デフォルトで作成します。
「プールの作成」をクリックします。
4. ユーザープールにアプリを追加する
この章ではアプリクライアントを作成します。アプリクライアントを作成することで、認証されていないユーザーがサインアップ・サインインを行うことが可能になります。
左のナビゲーションペインから「アプリクライアント」を選択します。
「アプリクライアントの追加」をクリックします。
シークレットの作成からチェックを外します。チュートリアルではシークレットについて以下の記述があります。
クライアントシークレットは、現在ブラウザベースのアプリケーションでの使用はサポートされていません。
なおユーザーガイドではシークレットについて上記のようにはっきりとは述べてはいません。
アプリケーションを作成すると、そのアプリケーションのシークレットを作成することもできます。シークレットをアプリケーション用に作成した場合、アプリケーションを使用するには、シークレットを提供する必要があります。JavaScript で作成されたブラウザベースのアプリケーションには、シークレットを持つアプリが必要ない場合があります。
他はデフォルトのまま「アプリクライアントの作成」をクリックします。
wild-ryde-site/js/config.js を編集します。userPoolId、userPoolClientId、region の値を設定します。invokeUrl はそのままにします。これは API Gateway で REST API をデプロイによって発行される URL を記述します。
window._config = {
cognito: {
userPoolId: '', // e.g. us-east-2_uXboG5pAb
userPoolClientId: '', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
region: '' // e.g. us-east-2
},
api: {
invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod',
}
};
この変更を CodeCommit にプッシュします。
PS C:\tutorial\wildrydes-site> git add .\js\config.js
PS C:\tutorial\wildrydes-site> git commit -m "setting config.js"
PS C:\tutorial\wildrydes-site> git push
Web サイトを開き、「Giddy Up!」をクリックし、メールアドレス・パスワードを入力します。その後、登録したメールアドレスに認証コードが届くので入力します。最後にログイン画面に遷移するのでログインできることを確認します。この操作の後、以下のようにユーザープールにユーザーが登録されます。
5. サーバーレスバックエンドを構築する
この章では DynamoDB、Lambda を作成します。
DynamoDB を使用してテーブルを作成します。以下のように設定します。
次に Lambda 関数を作成します。ロールはあらかじめ次のように作成しておきます。
- 信頼されたエンティティには「Lambda」を選択し、ポリシーは「AWSLambdaBasicExecutionRole」という AWS 管理ポリシーを選択
- インラインポリシーには以下を追加
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "VisualEditor0",
"Effect": "Allow",
"Action": "dynamodb:PutItem",
"Resource": "arn:aws:dynamodb:ap-northeast-1:account-id:table/Rides"
}
]
}
Lambda 関数のコードは requestUnicorn.js を使用します。
6. API Gateway で RESTful API を作成する
API を呼び出すユーザーを制御するためには以下の方法があります。このチュートリアルでは「Cognito ユーザープールを使用したオーソライザー」を利用します。
- リソースポリシー
- IAM ロール
- Lambda オーソライザー
- Cognito ユーザープールを使用したオーソライザー
「REST API」の「構築」を選択します。
以下のように設定します。
オーソライザーを選択します。
作成したユーザープールを選択します。
オーソライザーのテストを行います。トークンにはログイン後に表示されるトークンを入力します。
レスポンスを確認します。
リソースを選択します。
「リソースの作成」を選択します。
リソースパスを入力し、CORSを有効化するようにチェックを入れます。
上記リソースを選択した状態でメソッドを作成します。
「POST」を選択し、横のチェックマークをクリックします。
Lambda 関数を選択します。
オーソライザーをこのメソッドに設定します。まずメソッドリクエストをクリックします。
赤枠内の鉛筆マークをクリックします。
作成したオーソライザーを設定します。
API のデプロイを行います。
ステージ変数に「prod」と入力します。
URL をコピーし、wild-ryde-site/js/config.js の invokeUrl の値として設定します。
window._config = {
cognito: {
userPoolId: 'ap-northeast-1_xxxxxx',
userPoolClientId: 'yyyyyyyyyyyy',
region: 'ap-northeast-1'
},
api: {
invokeUrl: 'https://zzzzzz.execute-api.ap-northeast-1.amazonaws.com/prod'
}
};
プッシュします。
PS C:\tutorial\wildrydes-site> git add .\js\config.js
PS C:\tutorial\wildrydes-site> git commit -m "add invoke url in config.js"
PS C:\tutorial\wildrydes-site> git push
サインイン後、地図が表示されるので適当にクリックし「Request Unicorn」をクリックするとユニコーンがその場所まで走ってきます。これは ajax で API Gateway にリクエストを送り、オーソライザーが認証に成功するとバックエンドの Lambda がリクエストを処理します。以下は DynamoDB にアイテムを登録する Lambda 関数の該当ソースです。
function recordRide(rideId, username, unicorn) {
return ddb.put({
TableName: 'Rides',
Item: {
RideId: rideId,
User: username,
Unicorn: unicorn,
UnicornName: unicorn.Name,
RequestTime: new Date().toISOString(),
},
}).promise();
}
またイベント内容がログに出力されているので、Lambda 関数がどんなイベントをユーザーから受け取っているのかを CloudWatch Logs で確認できます。
2021-07-22T13:13:07.946Z 6aea1cb3-df95-48d2-b27f-1c4864e944f9 INFO Received event ( FfOiuANvNwpCrolI7iA0Ig ): {
resource: '/ride',
path: '/ride',
httpMethod: 'POST',
headers: {
Accept: '*/*',
'Accept-Encoding': 'gzip, deflate, br',
'Accept-Language': 'ja,en-US;q=0.9,en;q=0.8',
Authorization: 'eyJraWQiOiIwQ3NnN...
Dynamo DB でこのユニコーン情報が登録されていることが確認できます。
ハマったところ
CodeCommit の認証情報を間違えて入力してしまい、クローンができなくなってしまいました。以下の Windows 資格情報からユーザー名・パスワードを編集できます。
リポジトリの URL が表示されている箇所をクリックします。
以下の「編集」をクリックし、編集します。
参考記事