[AWS] AWS 시작하기 - 기본 웹 애플리케이션 구축 2

김경훈·2023년 10월 18일

Amplify aws dynamodb lambda 클라우드

AWS

목록 보기

9/18

지난 글에 이어 aws 기본 웹 애플리케이션 구축을 마무리 하겠습니다.

모듈 4 : 데이터 테이블 생성

DynamoDB 테이블 생성

4-1. DynamoDB에서 테이블 생성 칸에서 다음과 같이 설정해주고 테이블을 만들어 줍니다.

테이블을 생성한 후 Amazon Resource Name(ARN)을 복사해서 따로 저장해줍니다.

IAM 정책을 생성하여 Lambda 함수에 추가

4-2. aws lambda 콘솔에서 지난 글에서 만들었던 함수를 클릭합니다.
Configuration -> Permissions -> Execution role -> Role name 에 있는 링크를 눌러 새로운 브라우저가 열리도록 합니다.

4-3. IAM 콘솔에서 Permissions policies -> Add permissions -> Create inline policy

4-4. JSON 탭을 선택한 후 다음 코드를 붙여넣기 하되 15번째 줄에 값을 아까 저장해놨던 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"
    }
    ]
}

4-5. Review Policy 버튼 선택 -> Name 값 옆에 HelloWorldDynamoPolicy 입력 -> Create Policy

DynamoDB 테이블에 데이터를 쓰도록 Lambda 함수 수정

4-6. Code 탭을 선택하고 함수의 코드를 다음 코드로 변경하고 Deploy 버튼을 클릭합니다.

# 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 time 
import time
# import two packages to help us with dates and date formatting

# create a DynamoDB object using the AWS SDK
dynamodb = boto3.resource('dynamodb')
# use the DynamoDB object to select our table
table = dynamodb.Table('HelloWorldDatabase')

# define the handler function that the Lambda service will use as an entry point
def lambda_handler(event, context):
 # Get the current GMT time
    gmt_time = time.gmtime()

    # store the current time in a human readable format in a variable
    # Format the GMT time string
    now = time.strftime('%a, %d %b %Y %H:%M:%S +0000', gmt_time)


# 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)
    }

4-7. Deploy가 완료되었다면 람다 페이지에서 Test를 완료한 후 DynamoDB에서 Items returned항목을 보면 test한 결과가 잘 들어있음을 알 수 있습니다.

모듈 4까지 완료했다면 아키텍쳐로 다음과 같은 과정까지 완료한 것 입니다.

모듈 5: 웹 앱에 상호 작용 기능 추가

웹 앱과 Amplify 업데이트

프로젝트를 시작할 때 만들었던 index.html 파일의 코드를 다음 코드로 바꾸고,
코드에 "YOUR-API-INVOKE-URL"을 모듈 3에서 저장해놨던 링크로 바꿔 줍니다.

<!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>