下記公式サイトのチュートリアルを参考に基本的なWebアプリケーションを一時間で構築してみる。
〇 今回構築したWebアプリケーションの構成図
開発手順
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アプリケーションの中身に時間を使うことができる。