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

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

2022. 4. 3. 18:06ㆍAmazon Web Service

https://aws.amazon.com/ko/getting-started/hands-on/build-web-app-s3-lambda-api-gateway-dynamodb/

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

아래의 다이어그램은 이 자습서에서 사용되는 서비스와 그 연결 방식을 시각적으로 보여줍니다. 아래 그림에서 보듯이 이 애플리케이션은 AWS Amplify, Amazon API Gateway, AWS Lambda 및 Amazon DynamoDB를 사

aws.amazon.com

전체적인 아키텍처

1. 기본 웹 애플리케이션 구축

☑️ 요약: AWS Amplify 콘솔을 통해 웹 앱을 위한 정적 리소스 배포

🫣들어가기 전 용어 정리

정적 웹과 동적 웹의 차이

정적 웹 사이트: 이미 기존에 저장되어 있는 html 문서를 변경 없이 그대로 보여준다.

example

<!DOCTYPE html>
<html>
<head>
    <title>test page</title>
</head>
<body>
    <h3>Test page</h3><hr>
    <p>Hello, new page!</p>
</body>
</html>

동적 웹 사이트: 사용자의 요청에 따라 달라진 항목들을 적용한 html 문서를 보여준다.

이해하기 좋은 블로그 글

<동적 웹 사이트 종류>
- Client Side Rendering(CSR):
클라이언트 쪽에서 HTML을 완성하는 방법. 서버는 json 파일만 전송. 봇 크롤러들이 JS을 읽지 못해서 검색되지 않을 수 있음.

- Server Side Rendering(SSR):
서버 쪽에서 이미 완성된 HTML을 보내주는 방법. 새 요청마다 새로 고침.

- CSR + SSR
클라이언트 쪽에서 Ajax 요청 -> 서버에서 데이터 전송 -> HTML 완성(이 방법에 대해서는 조금 아리송하다)

what is API?

동영상 + 설명이 같이 있는 유용한 글

API는 웨이터다.

나는 클라이언트로, 레스토랑의 손님이라고 할 수 있다. 클라이언트는 메뉴를 고를 것이다.

그런데 손님들은 직접 일어나서 주방에 주문을 접수하거나 주방에서 음식을 받아올 수 없다. 내가 경쟁사 레스토랑의 쉐프라면 해당 주방에서 레시피를 훔칠 수도 있고, 일반인이더라도 괜히 주방에서 어물쩡거리며 방해가 될 수 있기 때문이다.(나는 주방의 구조를 모르니까!)

이때 우리는 웨이터라는 새로운 구성 요소를 사용하게 된다. 우리는 편안히 앉아서 주문을 하고, 웨이터는 받은 주문을 주방으로 가져간다. 음식이 완료되면 그 음식을 우리에게 다시 가져다준다.

즉, 클라이언트와 서버는 다 자기 자리에서 가만히 있고, 웨이터라는 'API'만 우리 둘 사이를 왔다 갔다 하며 정보를 전달해주는 것이다. 그리고 이때 아까도 말했듯 클라이언트가 경쟁사 레스토랑 쉐프라서 주방에 들어와 레시피를 훔쳐가고 싶어할 수도 있다. 그렇기 때문에 더더욱 API가 필요한 것이다. 정말로 필요한 정보만 제공해주는 것! 그것은 API를 통해 정보(우리의 예시에서는 음식)을 전달하는 회사 입장에서 굉장히 중요하다.

그래서 API가 이렇게 유명, 유망한 것이다!

1) index.html 생성 뒤에 HTML 파일을 압축해 ZIP파일로 만들기

2) Amplify 콘솔 로그인

3) Amplify Hosting - 웹 앱 호스팅 시작하기

4) 'Git 공급자 없이 배포' -> 아까 만들어 둔 zip 파일 업로드

5) 주어진 도메인의 링크로 들어가면 'Hello Word'! :D

2. 서버리스 함수 작성(AWS Lambda)

☑️ 요약: Python으로 Lambda함수 작성 후 테스트

🫣들어가기 전 용어 정리

Lambda 함수의 장점과 단점

Lambda 함수는 '온디맨드'로 실행되는 코드다. 즉, demand가 있어야 실행된다.

람다 함수는 평소에는 휴식을 취하고 있다.

그러다 클라이언트가 람다 함수를 사용해야 하는 리퀘스트를 보내게 되면, 그제서야 일어나서 함수가 일을 하게 된다.

이런 특징은 명확한 장단점이 있다.

장점은 요금이 적게 나온다는 것. 누군가의 요청이 있을때만 작동하니 계속해서 켜져 있어야 하는 EC2 인스턴스들과 다르다.

단점은 요청이 들어와야 켜진다는 것. 계속해서 대기 상태이기 때문에 빠르게 일 처리가 이루어지는 서버와 다르게 람다 함수는 awake하는 시간과 처리하는 시간을 더해야 하기 때문에 delay가 조금 더 있다. (하지만 엄청난.. 서비스가 아닌 이상 크게 느껴지지 않는다고 하는데 이건 직접 테스트 해보지 않아서 잘 모르겠다😅)

1) Lamda 콘솔 로그인 -> '함수 생성'

- 새로 작성

- 함수 이름: hello_world_func

- 런타임: Python 3.9

- 아키텍처: x86_64

아키텍처가 두 종류인 이유.. 선택 기준?

arm64 - AWS Graviton2 프로세서용 64비트 ARM 아키텍처입니다.
x86_64 - x86 기반 프로세서용 64비트 x86 아키텍처입니다. 기본 아키텍처는 x86_64입니다.

arm64 아키텍처를 사용하는 함수는 x86 기반 CPU에서 실행되는 동등한 함수에 비해 GB/s당 비용이 저렴합니다.

기존 함수가 x86 기반 CPU 명령 집합에 대한 종속성을 갖는 경우 ARM 명령 집합에 대해 종속성을 다시 컴파일하여 arm64 아키텍처용 배포 패키지를 새로 만들어야 합니다.

-AWS에서 슬쩍 cmd + c cmd + v

2) 함수 코드 작성

작성한 뒤 Deploy 버튼 눌러주기

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

코드와 주석을 보면서 이해한 바로는,

lambda_handler라는 함수는 event라는 파라미터를 사용자로부터 받을 것이고, 이 event 에는 firstName이라는 인자와 lastName이라는 인자가 있어서 해당 인자의 값을 name에 저장.

그리고 status code 200과 'Hello from lambda (name)'을 json 형태로 리턴!

3) 새로 작성한 함수 Test 해보기

해당 코드 위의 주황색 버튼 'Test'을 누르면 '테스트 이벤트 구성'이라는 화면이 뜬다

이벤트 이름, 그리고 이벤트 Json을 간략하게 입력해준 뒤에 저장!

저장을 완료한 뒤에 페이지 상단에서 [코드] 옆에 있는 [테스트]로 넘어가서 테스트 버튼을 눌러보면

이런식으로 return 값, 시간, 메모리 등을 모두 확인할 수 있다

3. 서버리스 함수를 웹 앱에 연결

☑️ 요약: API Gateway을 통해 API 생성, HTTP 메서드 정의, Lambda함수 트리거, Management Console에서 API 테스트

🫣들어가기 전 용어 정리

what is RESTful API?

(항상 정확한 정의를 모르고 지나간.... 이 기회를 통해 드디어..)

IBM 유튜브 영상

REST API는 지정된 형식에 맞춰서 API를 사용하는 것!

CRUD(Create, Read, Update, Delete)가 REST API에서는

Create - POST

Read - GET

Update - PUT

Delete - DELETE

로 바뀌게 되는 것.

결국 REST API라는 지정된 형식 틀의 API을 통해 누구나 쉽게 아~ 이런걸 요청하구나~ 를 알 수 있고 API의 기본 개념처럼

서버와 통신하며 원하는 것을 얻을 수 있다.

1) API Gateway 콘솔 -> 새 REST API 생성

- REST

- 새 API; 최적화된 에지

2) 새 리소스 및 메소드 생성

- 리소스 > 작업 > 메서드 생성 > 드롭 다운에서 POST 선택 > Lambda 함수 선택(아까 만든 함수 이름 기입. hello_world_func)

- 작업 > CORS 활성화 > 'CORS 활성화 및 기존의 CORS 헤더 대체' 클릭

3) API 배포

- 작업 > API 배포

- 배포 스테이지 > 새 스테이지

- 단계 이름; dev

- URL 호출 옆에 있는 URL 복사하고 저장(추후 단계에 필요)

4) API 검증

- 리소스 > POST 클릭 > 번개 모양 아이콘 클릭

- 요청 본문에 내용 기입, 테스트 실행

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

4. 데이터 테이블 생성

☑️ 요약: DynamoDB 테이블 생성, IAM으로 역할 부여, AWS SDK로 테이블에 데이터 쓰기

🫣들어가기 전 용어 정리

Amazon DynamoDB

키-값 데이터베이스 서비스. 스키마 생성 필요 없음.

규모에 관계 없이 일정한 성능 제공. 서버 관리 필요 없음.

API vs SDK(Software Development Kit)

SDK는 영어 뜻 그대로 Development Kit이다. 이것저것 다양한 도구들이 포함된 키트이다.

즉, API vs SDK보다는 SDK안에 API가 포함되어 있기 때문에 SDK (여집합) API 가 맞겠다!

1) DynamoDB 테이블 생성

- 파티션 키 == 기본키: ID

생성이 완료되면 해당 테이블로 들어가서 추가정보 드랍다운에서 ARN 복사

2) IAM 정책 생성 & 람다 함수에 추가

- IAM 서비스로 접속. 역할에 보면 내가 생성한 함수와 동일한 role이 lamda권한과 함께 생성되어 있다. 여기로 접속!

- 인라인 정책 생성: 마우스 커서로 표시해둔 곳에 방금 복사한 자신의 DB ARN을 넣어준다.

3) DynamoDB 테이블에 데이터를 쓸 수 있도록 Lambda 함수 구성 수정

다시 람다 함수로 돌아와서 코드 소스를 수정!

- 여기서 dynamodb.Table("본인의테이블이름")을 넣어주어야 한다.

4) TEST

Deploy 완료한 함수를 Test해본다!! 람다 페이지에서 Test을 완료한 뒤에 다시 DynamoDB로 돌아와서

테이블에서 표 항목 탐색을 눌러보면 방금 test한 결과가 잘 들어가 있음을 확인할 수 있다.

5. 기본 웹 애플리케이션 구축

1) 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'
            };
            // 아까 3번에서 API 생성시 복사한 URL을 붙여줍니다!!
            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>

코드에서 fetch("YOUR-~") 이 부분에 문자열을 3번 단계에서 복사해두라고 했던 링크로 교체해준다.

아까 했던 것처럼 index.html을 압축하고, Amplify 콘솔에서 코드 파일을 교체해 업로드해준다.

2) 🔥 COMPLETE!

도메인에 접속하면 이런 멋진 화면이 뜬다!!

내 이름을 넣고 Call API 버튼을 눌러주면~

DynamoDB에 바로 업데이트 되는 모습을 확인할 수 있따!

짝짝짞짝

(이제 요금이 걱정되니까 삭제하러 가야지..)

저작자표시 비영리 동일조건

'Amazon Web Service' 카테고리의 다른 글

AWS와 관련한 네트워크 기초 지식 (0)	2022.06.26
AWS Cloudwatch로 GPU 사용 모니터링하기 (0)	2022.01.24

Archive Me

Archive Me

태그

최근글

댓글

공지사항

아카이브

전체적인 아키텍처

1. 기본 웹 애플리케이션 구축

정적 웹과 동적 웹의 차이

what is API?

1) index.html 생성 뒤에 HTML 파일을 압축해 ZIP파일로 만들기

2) Amplify 콘솔 로그인

3) Amplify Hosting - 웹 앱 호스팅 시작하기

4) 'Git 공급자 없이 배포' -> 아까 만들어 둔 zip 파일 업로드

5) 주어진 도메인의 링크로 들어가면 'Hello Word'! :D

2. 서버리스 함수 작성(AWS Lambda)

Lambda 함수의 장점과 단점

1) Lamda 콘솔 로그인 -> '함수 생성'

2) 함수 코드 작성

3) 새로 작성한 함수 Test 해보기

3. 서버리스 함수를 웹 앱에 연결

what is RESTful API?

1) API Gateway 콘솔 -> 새 REST API 생성

2) 새 리소스 및 메소드 생성

3) API 배포

4) API 검증

4. 데이터 테이블 생성

API vs SDK(Software Development Kit)

1) DynamoDB 테이블 생성

2) IAM 정책 생성 & 람다 함수에 추가

3) DynamoDB 테이블에 데이터를 쓸 수 있도록 Lambda 함수 구성 수정

4) TEST

5. 기본 웹 애플리케이션 구축

1) index.html 코드 수정

2) 🔥 COMPLETE!

'Amazon Web Service' 카테고리의 다른 글

관련글

티스토리툴바