LoginSignup
16
20

More than 1 year has passed since last update.

@oizumi-yuta(佑太 大泉)

AWS Amplify サーバーレスウェブアプリケーションを構築するチュートリアルをやってみた

Last updated at Posted at 2021-07-22

初めに

以下のチュートリアルをやってみました。Amplify と CodeCommit の連携、CodeCommit を使用した開発、Cognito を使ったオーソライザー、Lambda プロキシ統合など、普段使わないサービスばかりで勉強になりました。

1. CodeCommit にリポジトリを作成する

CodeCommit を使用してローカルで開発を進める場合、GitHub などと同様に認証情報を作成する必要があります。GitHub では 「SSH」 や GitHub アカウントの「ユーザー名・パスワード」を用いますが、CodeCommit では IAM を使用した認証を利用することができます。

AWS CodeCommit リポジトリへの接続を設定する最も簡単な方法は、IAM コンソールで CodeCommit の Git 認証情報を設定し、HTTPS 接続にこれらの認証情報を使用することです。

IAM のコンソール画面でユーザーを選択し、CodeCommit の認証情報を作成します。この認証情報をダウンロードしておきます。

2.png

CodeCommit でリポジトリを作成します。

1.png

以下の「HTTPS のクローン」をクリックすると、クローンコマンドをコピーできます。

1.5.png

コピーしたコマンドをローカルで実行します。ユーザー名・パスワードを聞かれるので、作成した 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

以下はプッシュ後のリポジトリです。

6.png

2. Amplify で Web アプリケーションをデプロイする

この章ではCodeCommit に置いたソースコードを利用して Amplify でデプロイします。

「Host your web app」を選択します。

1.png

Amplify に関連付けるリポジトリとして CodeCommit を選択します。

7.png

以下ではリポジトリ・ブランチを選択します。

8.png

指定したブランチに変更があったとき、Amplify が自動でビルド・デプロイを行うことを許可するために「Allow AWS Amplify ...」にチェックを入れます。

9.png

設定内容を確認して「保存してデプロイ」をクリックします。

10.png

3. Cognito でユーザープールを作成する

Cognito は認証・認可を行うためのサービスです。ユーザープールではユーザー認証を行います。ユーザープールの目的はユーザー情報を保管することです。Cognito が管理する対象としてもう一つ、 ID プールというものも存在します。こちらはユーザーに対して認可を行います。ID プールの目的はユーザーに他の AWS サービスにアクセスすることを許可することです。

ユーザープールでは認証 (ID の検証) ができます。ユーザープールを使用すると、アプリユーザーはユーザープールからのサインインや、サードパーティーのアイデンティティプロバイダー (IdP) を介した連携ができます。

ID プールでは認可 (アクセスコントロール) ができます。ID プールを使用すると、ユーザーに一意の ID を作成して、他の AWS サービスへのアクセスを許可できます。

今回のチュートリアルでは、サインアップ・サインインの実装を行うために「ユーザープールの管理」を選択します。

11.png

「ユーザープールを作成する」をクリックします。

12.png

デフォルトで作成します。

13.png

「プールの作成」をクリックします。

14.png

4. ユーザープールにアプリを追加する

この章ではアプリクライアントを作成します。アプリクライアントを作成することで、認証されていないユーザーがサインアップ・サインインを行うことが可能になります。

左のナビゲーションペインから「アプリクライアント」を選択します。

15.png

「アプリクライアントの追加」をクリックします。

16.png

シークレットの作成からチェックを外します。チュートリアルではシークレットについて以下の記述があります。

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

なおユーザーガイドではシークレットについて上記のようにはっきりとは述べてはいません。

アプリケーションを作成すると、そのアプリケーションのシークレットを作成することもできます。シークレットをアプリケーション用に作成した場合、アプリケーションを使用するには、シークレットを提供する必要があります。JavaScript で作成されたブラウザベースのアプリケーションには、シークレットを持つアプリが必要ない場合があります。

17.png

他はデフォルトのまま「アプリクライアントの作成」をクリックします。

18.png

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!」をクリックし、メールアドレス・パスワードを入力します。その後、登録したメールアドレスに認証コードが届くので入力します。最後にログイン画面に遷移するのでログインできることを確認します。この操作の後、以下のようにユーザープールにユーザーが登録されます。

22.png

5. サーバーレスバックエンドを構築する

この章では DynamoDB、Lambda を作成します。

DynamoDB を使用してテーブルを作成します。以下のように設定します。

23.png

次に 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"
        }
    ]
}

24.png

Lambda 関数のコードは requestUnicorn.js を使用します。

6. API Gateway で RESTful API を作成する

API を呼び出すユーザーを制御するためには以下の方法があります。このチュートリアルでは「Cognito ユーザープールを使用したオーソライザー」を利用します。

  • リソースポリシー
  • IAM ロール
  • Lambda オーソライザー
  • Cognito ユーザープールを使用したオーソライザー

「REST API」の「構築」を選択します。

25.png

以下のように設定します。

26.png

オーソライザーを選択します。

27.png

作成したユーザープールを選択します。

28.png

オーソライザーのテストを行います。トークンにはログイン後に表示されるトークンを入力します。

29.png

レスポンスを確認します。

30.png

リソースを選択します。

31.png

「リソースの作成」を選択します。

32.png

リソースパスを入力し、CORSを有効化するようにチェックを入れます。

33.png

上記リソースを選択した状態でメソッドを作成します。

34.png

「POST」を選択し、横のチェックマークをクリックします。

35.png

Lambda 関数を選択します。

36.png

オーソライザーをこのメソッドに設定します。まずメソッドリクエストをクリックします。

37.png

赤枠内の鉛筆マークをクリックします。

38.png

作成したオーソライザーを設定します。

39.png

API のデプロイを行います。

41.png

ステージ変数に「prod」と入力します。

42.png

URL をコピーし、wild-ryde-site/js/config.js の invokeUrl の値として設定します。

43.png

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 でこのユニコーン情報が登録されていることが確認できます。

44.png

ハマったところ

CodeCommit の認証情報を間違えて入力してしまい、クローンができなくなってしまいました。以下の Windows 資格情報からユーザー名・パスワードを編集できます。

リポジトリの URL が表示されている箇所をクリックします。

3.png

以下の「編集」をクリックし、編集します。

4.png

参考記事

16
20
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
16
20