개요
aws 공식 홈페이지 실습 자습서에 있는 < Build a Basic Web Application > 문서를 기반으로 실습을 진행해 보겠습니다.
https://aws.amazon.com/ko/getting-started/hands-on/build-web-app-s3-lambda-api-gateway-dynamodb/
실습이 완성되었을 때의 아키텍쳐는 다음과 같습니다.
문서에 따르면 실습을 통해
-웹 앱 만들기
-웹 앱을 서버리스 백엔드와 연결
-API와 데이터베이스를 통해 앱에 상호작용성 추가
의 내용을 달성할 수 있다고 합니다 :)
모듈 1: 웹 앱 만들기
Amplify 콘솔을 통해 웹 앱 만들기
1-1. 먼저 index.html 파일을 만들고 다음 코드를 입력해 줍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
Hello World
</body>
</html>1-2. 코드를 입력이 끝났다면 index.html파일을 압축해 줍니다.
1-3. 이제 AWS amplify 콘솔에 들어가서 GET STARTED -> Amplify Hosting을 눌러줍니다.
1-4. Deploy without Git provider을 체크하고 압축한 index.html 파일을 업로드 합니다.
위 과정을 완료하면 도메인이 주어지고, 주어진 도메인을 클릭하면 "Hello World"가 출력되며 deploy에 성공한 것을 볼 수 있습니다!
지금까지의 과정을 아키텍쳐로 나타내면 다음과 같습니다.
모듈 2 : 서버리스 함수 작성
이번 모듈에서는 파이썬으로 람다 함수를 만들고 테스트하는 과정까지 진행하겠습니다. 쉽게 말하면 파이썬을 담은 람다 함수를 하나 만드는 것 입니다.
람다 함수 생성 및 구성
2-1. 람다함수 콘솔에 들어가서 Create function을 클릭하고 다음과 같이 설정해 줍니다.
파일 이름은 HelloWorldFunction으로 하고
파이썬 코드를 사용할 것이기 때문에 python 3.8을 선택합니다.
2-2. 람다 함수가 생성 완료되었다면 CODE 섹션에서 lambda_function.py의 내용을 다음 코드로 바꾸어 주고 -> SAVE -> 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 as 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)
}2-3. 작성한 함수를 테스트 해보겠습니다. TEST칸 옆에 작은 화살표를 누른 후 configure test event를 누른 후
Event name에는 HelloWorldTestEvent를,
event JSON에는 이름을 담은 코드를 입력, 저장 해줍니다.
{
"firstName": "Ada",
"lastName": "Lovelace"
}람다 함수 테스트
2-4. 저장을 완료했다면 Test 탭에서 Test를 클릭합니다.
한국어로 진행 중이시라면 실행 결과: 성공(로그) 라는 표시와 함께 return값이 표시되고, 영문으로 진행 중이시라면 Execution result: succeeded. 라는 말이 표시될 것 입니다.
지금까지의 과정을 아키텍쳐로 표현하면 다음과 같습니다.
모듈 3 : 웹 앱에 서버리스 함수 연결
새로운 REST API 생성
3-1. API Gateway console에 로그인 한 후 REST API 칸에 Build를 클릭합니다.
3-2. 프로토콜 선택에서 다음과 같이 설정한 후 API를 만들어 줍니다.
새로운 리소스와 메소드 생성
3-3. 새로운 리소스와 메소드를 생성하기 위해
Resources -> Actions -> Create Method
드롭 다운 메뉴에서 POST -> Lambda function 체크 -> 모듈 2에서 만든 Lambda function 이름 입력 -> SAVE
3-4. Actions -> Enable CORS -> Enable CORS and replace existing CORS headers
API 배포
3-5. Actions -> Deploy API를 선택한 후 다음과 같이 설정 해줍니다.
추 후 단계에 필요하니 Invoke URL 옆에 있는 URL을 복사 해둔 후 따로 저장합니다.
API 검증
3-6. Resources -> POST -> 파란색 번개 모양 클릭
Request Body 칸에 다음 코드를 입력하고 Test를 실행합니다.
{
"firstName":"Grace",
"lastName":"Hopper"
}
현재까지의 과정을 아키텍쳐로 나타내면 다음과 같습니다.
