AWS에 기본 웹 애플리케이션 구축해보기

21373 단어 awsaws

이번 실습에서는 "Hello world를 렌더링하는 웹 애플리케이션을 만들 것이다.
실습을 통해 배울 내용은 간단히
1. 웹 앱 만들기
2. 서버리스 백엔드에 웹 앱 연결
3. API와 데이터베이스를 사용하여 웹 앱에 상호 작용기능 추가
를 배울 것이다.

모듈 1: 웹 앱 만들기

AWS Amplif 콘솔을 사용하여 웹 애플리케이션을 위한 정적 리소스를 배포할 것이다. 

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

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

를 메모장에 작성한 후 index.html 파일 이름으로 저장하고 압축한다.
Amplify 콘솔에 들어가서 deploy without Git provider를 선택한다.

다음과 같이 설정을 해준다.


배포하기를 누르면 이와 같이 나오고 도메인의 링크를 들어가보면 HELLO WORLD가 렌더링 된다.

모듈 2: 서버리스 함수 작성

이 모듈에서는 웹 페이지에 상호 작용 기능을 추가하는 데 사용할 간단한 코드 python으로 작성할 것이다. 서버리스 함수를 AWS Lambda 서비스로 작성할 것인데 이는 컴퓨팅 서비스에 의해 온디맨드로 실행되는 코드이다.

AWS Lambda 콘솔에 로그인하여 함수를 생성합니다.

그 다음 함수 코드를 다음과 적혀있는 코드가 있다.

이를 다음과 같이 변경해준다.

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

그리고 생성하기를 누르면 생성이된다.
![]
테스트하기 위해서 다음과 같이 이름을 임의로 설정해고 이벤트 JSON도 변경해준다.

회색의 테스트하기를 눌러보자. 성공하면 다음과 같이 나타날 것이다.

모듈 3: 서버리스 함수를 웹 앱에 연결

이 모듈에서는 Amazon API Gateway를 사용하여 웹 클라이언트에서 Lambda 함수를 호출할 수 있는 RESTful API를 생성한다. API Gateway는 모듈 1에서 생성한 HTML 클라이언트와 모듈 2에서 생성한 서버리스 백엔드 사이의 중간 계층 역할이다.

RESTful API REST란?

"Representational State Transfer"를 의미하며, 웹 서비스를 생성하기 위한 아키텍처 패턴.

새 REST API 생성

API Gateway 콘솔에 로그인하여 설정을 다음과 같이 해준다!
특히 엔드포인트 유형 드롭다운에서 [엣지 최적화]를 선택한다. 엣지 최적화 엔드포인트는 지리적으로 분산된 클라이언트에 가장 적합하다.

새 리소스 및 메서드 생성
API에서 HTTP(Hypertext Transfer Protocol) 메서드 정의
웹 사이트에서 사용할 수 있도록 API에서 CORS 활성화

CORS란?

도메인 또는 포트가 다른 서버의 자원을 요청하는 메커니즘

왼쪽 탐색 창에서 Helloworld API아래에 있는 리소스를 클릭.
그리고 메서드 생성에서 POST 클릭!

그리고 다음과 같이 설정 후 [CORS를 활성화하고 기존 CORS 헤더 바꾸기] 버튼을 클릭

그럼 다음과 같이 메서드 변경을 확인하라는 메시지가 나온다. 확인을 누른다.

API 배포

[작업]에서 [API 배포]를 선택 후 [배포 단계]에서 [새 단계]를 설정.

API 검증
다음을 본문 필드에 붙여 넣어보자.

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

그리고 테스트를 눌러보자. 다음과 같이 코드 200이 포함된 응답이 나오면 테스트 완료된 것이다,

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

이 모듈에서는 Amazon DynamoDB를 사용하여 데이터를 유지하는 테이블을 생성한다. 또한 AWS IAM 서비스를 사용하여 서비스가 서로 상호 작용하는 데 필요한 권한을 안전하게 부여한다. 모듈 2에서 생성한 Lambda 함수가 새로 생성된 DynamoDB 테이블에 데이터를 쓸 수 있도록 IAM 정책을 통해 허용하는 작업이다. 이렇게 하면 Lambda 함수로 python을 사용한다.

DynamoDB 테이블 생성
Amazon DynamoDB 콘솔에 로그인 후 테이블 생성한다. 그리고 Amazon 리소스 이름을 복사한다. 일반 정보-추가 정보- ARN

IAM 정책을 생성하여 Lambda 함수에 추가
테이블에 데이터를 쓸 수 있도록 Lambda 함수를 편집해보자. AWS Lambda 콘솔을 열자.
그리고 생성함수의 권한을 누른 후 인라인 정책 추가를 하자.
다음 코드를 작성해서 넣을 것인데 위에서 복사한 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"
}
]
}


그리고 정책 생성을 하면 다음과 같이 완료된다.

DynamoDB 테이블에 데이터를 쓰도록 Lambda 함수 수정
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 콘솔 항목란에 표시된다. 여기서 설명하는 예제를 사용한 경우 항목 ID는 "Ada Lovelace"이다.

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

이 모듈에서는 모듈 1에서 생성한 정적 웹 사이트를 업데이트해서 모듈 3에서 생성한 REST API를 호출하도록 설정한다. 이렇게 하면 사용자가 입력한 텍스트를 표시하는 기능이 추가된다.
Amplify 콘솔을 사용해 웹 앱 업데이트
모듈 1에서 코드를 다음과 같이 변경

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

을 넣고 새로운 파일로 만들어서 압축한 뒤 저장한다.
그리고 Amplify 콘솔을 열어서 파일을 업로드한다.

업데이트된 웹 앱 테스트
도메인의 URL로 들어 가면 다음과 같이 나온다,

그럼 웹 애플리케이션은 작성이 완료된다.

Section 12
[Next js + Typescript] Kakao Login 구현하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage