開発手順

1. AWS AmplifyでWebアプリケーションの静的リソースをデプロイする

ローカルPCに下記のindex.htmlを用意し、ZIP形式で圧縮する

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>

<body>
    Hello World
</body>
</html>

Amplify コンソールにログインし、「使用を開始する」を押す
※もしくは新しいアプリケーションを押す
Amplify ホスティングの使用を開始するを押す
※もしくはウェブアプリケーションをホストを押す
[Git プロバイダーなしでデプロイ] を選択して、続行を押す
アプリケーションの名前にGettingStarted、環境名にdevを入力する
ドラッグ & ドロップを選択する
先ほどのindex.html.zipをドロップして、保存してデプロイを押す
GettingStartedのコンソール画面中部のDomainのURLをクリックする
Hello Worldが表示されたら、正常にHTTPS通信でのwebページが作成された

2. AWS Lambdaでサーバーレス関数を構築する

AWS Lambda コンソールにログインする
関数の作成を押す
関数名をHelloWorldFunction、ランタイムにPython 3.9を選択する
関数の作成を押す

関数のコードを以下に置き換える

# import the JSON utility package since we will be working with a JSON object
import json
# define the handler function that the Lambda service will use an entry point
def lambda_handler(event, context):
# extract values from the event object we got from the Lambda service
    name = event['firstName'] +' '+ event['lastName']
# return a properly formatted JSON object
    return {
    'statusCode': 200,
    'body': json.dumps('Hello from Lambda, ' + name)
    }

Deployを押す
Testを押す
イベント名にHelloWorldTestEventを入れる

イベントJSONを以下に置き換える

{
"firstName": "Ada",
"lastName": "Lovelace"
}

テストタブへ行き、右上のテストを押す
実行結果：成功が出て、""Hello from Lambda, Ada Lovelace""が出れば成功

3. API Gatewayでサーバーレス関数をリンクする

API Gateway Console にログインする
REST APIで構築を押す
プロトコルの選択でREST、新しいAPIの作成で新しいAPIを選択する
API名をHelloWorldAPIを入れ、エンドポイントタイプにエッジ最適化を選択する
API の作成を押す
アクション->メソッドの作成->POST->横のチェックを押す
統合タイプにLambda 関数、Lambda 関数にarn:aws:lambda:us-east-1:*****:function:HelloWorldFunctionを入れて、保存を押す
アクション->CORS を有効にするを押す
POSTチェックボックスを選択して、CORS を有効にして既存の CORS ヘッダーを置換を押す
アクション->APIをデプロイを押す
デプロイされるステージで新しいステージを押し、ステージ名にdevを入れ、デプロイを押す
URL の呼び出しのURLを控えておく
リソース->POST->小さな青い稲妻のテストを押す

下記のJSONを入力し、テストを押す

{
    "firstName":"Grace",
    "lastName":"Hopper"
}

bodyに ""Hello from Lambda, Grace Hopper"が返ってきていれば成功

4. AWS DynamoDB テーブルを作成し、Lambda 関数がデータを格納できるようにする

Amazon DynamoDB コンソールにログインする
「テーブルの作成」を押す
テーブル名にHelloWorldDatabase、パーティションキーにIDと入力する
テーブルの作成を押す
HelloWorldDatabaseの設定画面で、追加情報を押し、Amazon リソースネーム (ARN)をコピーしておく
AWS Lambda コンソールを開き、HelloWorldFunctionを選択する
設定タブ->アクセス権限->実行ロールのURLを押す
IAMのロール画面に遷移する
許可タブの許可を追加で、インラインポリシーの作成を押す

JSONタブをクリックし、以下を入力する。
※YOUR-TABLE-ARNは、DynamoDBのリソースフィールドのテーブルの ARN を置き換える

{
"Version": "2012-10-17",
"Statement": [
    {
        "Sid": "VisualEditor0",
        "Effect": "Allow",
        "Action": [
            "dynamodb:PutItem",
            "dynamodb:DeleteItem",
            "dynamodb:GetItem",
            "dynamodb:Scan",
            "dynamodb:Query",
            "dynamodb:UpdateItem"
        ],
        "Resource": "YOUR-TABLE-ARN"
    }
    ]
}

名前にHelloWorldDynamoPolicyを入れ、ポリシーの作成を押す

Lambda関数のコンソール画面に戻り、下記のコードに置き換え、デプロイを押す

# import the json utility package since we will be working with a JSON object
import json
# import the AWS SDK (for Python the package name is boto3)
import boto3
# import two packages to help us with dates and date formatting
from time import gmtime, strftime

# create a DynamoDB object using the AWS SDK
dynamodb = boto3.resource('dynamodb')
# use the DynamoDB object to select our table
table = dynamodb.Table('HelloWorldDatabase')
# store the current time in a human readable format in a variable
now = strftime("%a, %d %b %Y %H:%M:%S +0000", gmtime())

# define the handler function that the Lambda service will use as an entry point
def lambda_handler(event, context):
# extract values from the event object we got from the Lambda service and store in a variable
    name = event['firstName'] +' '+ event['lastName']
# write name and time to the DynamoDB table using the object we instantiated and save response in a variable
    response = table.put_item(
        Item={
            'ID': name,
            'LatestGreetingTime':now
            })
# return a properly formatted JSON object
    return {
        'statusCode': 200,
        'body': json.dumps('Hello from Lambda, ' + name)
    }

テストタブ->テストを押す
DynamoDBのHelloWorldDatabaseのテーブル->テーブルアイテムの探索で下部にAda Lovelaceを押す
IDと実行時間が入力されていれば成功

5. HTMLを編集して、Webアプリケーションに対話性を追加する

index.html ファイルを開いて、下記に置き換える。
※行 41 "YOUR-API-INVOKE-URL"に API 呼び出しAPIGatewayのステージのURLを追加する

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <!-- Add some CSS to change client UI -->
    <style>
    body {
        background-color: #232F3E;
        }
    label, button {
        color: #FF9900;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        margin-left: 40px;
        }
     input {
        color: #232F3E;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        margin-left: 20px;
        }
    </style>
    <script>
        // define the callAPI function that takes a first name and last name as parameters
        var callAPI = (firstName,lastName)=>{
            // instantiate a headers object
            var myHeaders = new Headers();
            // add content type header to object
            myHeaders.append("Content-Type", "application/json");
            // using built in JSON utility package turn object to string and store in a variable
            var raw = JSON.stringify({"firstName":firstName,"lastName":lastName});
            // create a JSON object with parameters for API call and store in a variable
            var requestOptions = {
                method: 'POST',
                headers: myHeaders,
                body: raw,
                redirect: 'follow'
            };
            // make API call with parameters and use promises to get response
            fetch("YOUR-API-INVOKE-URL", requestOptions)
            .then(response => response.text())
            .then(result => alert(JSON.parse(result).body))
            .catch(error => console.log('error', error));
        }
    </script>
</head>
<body>
    <form>
        <label>First Name :</label>
        <input type="text" id="fName">
        <label>Last Name :</label>
        <input type="text" id="lName">
        <!-- set button onClick method to call function we defined passing input values as parameters -->
        <button type="button" onclick="callAPI(document.getElementById('fName').value,document.getElementById('lName').value)">Call API</button>
    </form>
</body>
</html>

Zip化して、Amplify コンソールを開いて、新しいindex.htmlに置き換える
DomainのURLを開いてみる

First NameとLast Nameを入力して、Call APIでLambdaを呼び出す
するとDynamoDBのテーブル->テーブルアイテムの探索で、下部に呼び出した人の名前と時間が入力されていく

まとめ

今回は、AWSサービスを用いて、基本的なWebアプリケーションをたった一時間程度で構築した。AWS Amplifyを使うことで、時間のかかるフロントエンドのプラットフォーム開発が一瞬で終わり、ユーザーは純粋にWebアプリケーションの中身に時間を使うことができる。