[React] Amazon LAMDA
필요 준비물
- AWS 계정 - Console login(Root)
- Browser - Chrome
설치순서
- Console Lambda 생성
- Webpage Lambda 생성
- API service Lambda 생성
아마존의 Lambda Console/Webpage/API service를 생성하도록 합니다. 아마존 계정은 여기서 생성하고 만들도록 합니다. 계정을 만든 후 설정에서 언어와 리젼(지역)을 선택합니다. 계정과 환경 설정의 설명은 여기서 제외합니다. 아마존 AWS는 클라우드 호스팅 서비스를 제공하며 그에 따른 지불이 사용한만큼 받는 합리적인 형태를 가지고 있어 이용하기로 합니다. 또한 전세계에 센터들이 있어 로컬 호스팅 서비스와는 다릅니다. 다른 호스팅도 글을 통하여 설명 드리겠습니다.
Lambda는 서비스를 간단하게 만들수 있고 많은 요청이 발생하도 자동을 확장되고 관리가 되므로 서비스에만 집중할 수 있는 유용한 서비스입니다.
1.Console Lambda 생성
- 콘솔창에서 Lambda를 검색하여 Lambda 콘솔로 들어갑니다. 앞으로 많이 쓸 서비스이기 때문에 옆에 별표를 눌러서 자주쓰는 서비스로 등록해 두시면 좋습니다.
- Lambda 콘솔에서는 오른쪽 메뉴에 있는 Functions 를 눌러서 들어가줍니다. 이번 세션에서는 이 Functions 기능을 주로 사용하여 서비스를 만들어 볼 것입니다. 지금 단계에서는 아무런 웹페이지도 볼 수 없습니다. 하지만 실망하지 마세요. 이번에 Lambda 에 대해서 알아보는 시간을 가지고 바로 다음번에는 실제로 웹페이지를 만들어 보는 시간을 가질 것입니다.
- Create function 버튼을 눌러줍니다.
- Lambda functions를 만들 때에는 4가지 방법을 이용하실 수 있습니다. 이 중 가장 쉽고 편하게 만들 수 있는 방법이 AWS 에서 제공하는 blueprint 로 만드는 방법입니다. 네가지 방법 중 Use a blueprint 를 클릭하세요. Blueprint 는 Lambda 를 편하게 만드실 수 있도록 AWS 에서 제공하는 완성된 설계도라고 보시면 됩니다. Blueprint 에 원하는 기능을 찾으셨다면 가장 쉽고 빠르게 Lambda 를 만들어 보실 수 있습니다.
- 많은 blueprint 중에서 hello-world 서비스를 만들어 볼 것입니다. Blueprints 아래 검색창에 hello 를 치면 nodejs 와 python버젼이 나오는데, 이 중 python 버젼으로 선택후, Configure 버튼을 눌러줍니다.
- 이제 Basic information 창으로 넘어가게 됩니다. 여기에서는 functions 를 생성하기 전 기본적인 설정을 해주는 공간입니다. 이름과 권한을 설정할 수 있습니다. 이름으로는 hello-world 를 입력하고, Execution role 은 Create a new role with basic Lambda permissions 로 지정합니다.
- 밑으로 내려서 오른쪽 아래에 있는 create function 버튼을 눌러 function을 생성합니다. AWS 에서 권한을 설정하는 것은 중요합니다. AWS 내의 여러 서비스들은 서로에 대한 권한이 있어야만 호출하거나 사용할 수 있습니다. 지금 여기서는 나중에 에러를 처리하거나 로그를 확인하는 등의 관리 활동을 위한 Cloudwatch 의 권한만 열어두게 되는데, 이따가 만들어 볼 Lambda 는 좀더 다양한 권한을 넣어야 합니다.
- 금방 서비스가 만들어졌습니다. 서비스가 만들어졌으니, 제대로 만들어졌는지 테스트를 해보겠습니다. Test 버튼을 눌러서 테스트를 진행합니다.
- Test 버튼을 누르면 테스트창이 뜨게 되는데, 여기에서 어떻게 테스트를 해 볼 것인지를 정해주어야 합니다. Event name은 Hello-world-test 로 작성합니다. 아래에는 테스트를 공유할 것인지를 묻는 항목인데, 이번에는 공유하지 않으므로, Private으로 두고, Template 도 그대로 두겠습니다.
- Event JSON 항목에는 이미 값들이 채워져 있을 것입니다. 이 부분을 다 지우고, 아래를 복사해서 붙여 놓습니다. 그 다음 오른쪽 아래의 Save 를 눌러서 저장합니다.
{
"key1": "Hello!",
"key2": "value2",
"key3": "value3"
}- 이제 Test 를 해보겠습니다. Test 버튼을 눌러줍니다.
- 원래는 한개의 창이 있던 화면에 Execution results 창이 생기고 결과가 출력되어서 나옵니다. 아까 9번에서 지정했던 테스트 이름인 Hello-world-test 도 잘 적혀서 나오고, Response 로는 Hello! 가 나오면 성공입니다. 이제 Lambda 에 대해서 조금 알게 되셨다면, 본격적으로 웹 페이지를 만들어 보겠습니다.
2. Webpage Lambda 생성
- 맨 위에 있는 Functions 를 눌러 다시 Functions 창으로 돌아갑니다.
- 아까와 마찬가지로 Create Function 을 눌러서 들어간 다음, 이번에는 Author from scratch 를 선택합니다. 이번에는 아까처럼 Blueprint 를 이용하는 게 아니라, 직접 만들어 보겠습니다. 간단한 웹페이지를 띄워보겠습니다.
- Function name 으로는 simple-webpage를 입력하고, Runtime으로는 python 3.9 를 선택합니다.
- Permissions은 아까와 똑같이 Create a new role with basic Lambda permissions 를 선택합니다.
- Advanced settings 에서 Enable function URL 을 선택합니다. 그리고 Auth type 으로는 NONE 을 선택합니다. 여기까지 선택하셨으면, 왼쪽 아래의 Create function을 누릅니다. 원래 Lambda 자체로는 외부에서 호출을 할 수 없습니다. 따라서 아까 만들었던 hello-world lambda 의 경우 외부 인터넷에서 호출해서 볼 수 없습니다. 이번에는 외부에서도 저희가 이번 시간에 만든 서비스를 볼 수 있게 Function URL 기능을 통해 호출 가능한 URL 을 만들어 보겠습니다. 여기서는 Auth type을 NONE으로 했는데, 실제 서비스를 만드실 때에는 인증 절차를 거친 사용자만 호출할 수 있게 하셔야 합니다.
- 앞서 만들었던 hello-world는 AWS 의 템플릿을 사용해서 바로 Test 를 해볼 수 있었지만, 이번에는 새로 직접 만드는 과정이기 때문에 직접 소스코드를 입력해야 합니다. 아래의 소스코드를 복사해서 창으로 붙여넣으세요. 붙여넣게 되면 자동으로 Deploy 버튼이 활성화되면서 옆에 Changes not deployed 라는 문구가 뜹니다. 이 Deploy 버튼을 누르세요. 이 코드는 무엇을 의미하는 것일까요? 기본적으로 웹페이지가 생성되어 사용자에게 보여질때에는 사용자가 요청을 보내고, 이 요청에 따라 서버가 응답으로 HTML 을 보내는 것으로 사용자가 웹 상에서 볼 수 있는 화면을 구성하게 됩니다. 이 코드에서도 보시면 response 쪽에 Content-Type 을 text/html로 지정해서 응답을 주고 있는 것을 알 수 있습니다. 응답으로 사용되는 HTML 코드는 그 아래에 존재합니다.
import json
def lambda_handler(event, context):
response = {
"statusCode": 200,
"statusDescription": "200 OK",
"Access-Control-Allow-Origin" : "*",
"isBase64Encoded": False,
"headers": {
"Content-Type": "text/html; charset=utf-8"
}
}
response['body'] = """<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Hello World!</title>
<style>
#title {
font-family: arial; font-size: 2em;color: #eb971a; margin-top:50px;
text-align: center;
}
button {
background-color: #eb971a;
border:none;
color:white;
border-radius: 5px;
width:40%;
height:35px;
font-size: 13pt;
margin-top:30px;
text-align: center;
}
#sentence {
font-size: 17pt;
margin-top:30px;
font-weight: bold;
color: #eb971a;
}
</style>
</head>
<body>
<p id="title">Hello World From <b>Lambda</b></p>
<hr id="lambda-line" width="800px" align="center" color="#eb971a;">
<center><button onclick="checkEvent();">Who are you?</button></center>
<center><div id="sentence"></div></center>
</body>
<script type="text/javascript">
function checkEvent(){
$.ajax({ type: "GET",
url: "URL을입력하세요",
dataType:'json',
success: function(data){
document.getElementById('sentence').innerHTML = data.status + " " + data.name
},
error: function (error){
alert('ERROR::');
console.log(error)
}
});
}
</script>
</html>
"""
return response- 이제 위로 올려 보시면 초록색으로 Successfully updated the function simple-webpage. 문구가 뜨실 겁니다. 이 문구를 확인하면, 왼쪽에 있는 Functions URL 아래에 있는 URL 을 클릭합니다.
- 새로운 창이 열리면서 이번에 만든 웹페이지가 호출됩니다. 버튼을 클릭해 보시면 아직까지는 ERROR 가 뜹니다. 이렇게 웹페이지까지 간단하게 만들어 보았습니다. 이번에는 만들어본 웹페이지의 버튼이 제대로 동작할 수 있도록 기능을 만들어 보겠습니다.
3. API service Lambda 생성
- 맨 위에 있는 Functions 를 눌러 다시 Functions 창으로 돌아갑니다. 아까는 빈껍데기 웹페이지를 만들었다면 이번에는 빈껍데기 웹페이지가 동적으로 반응하면서 좀 더 사용자에게 재미를 줄 수 있도록 기능을 추가해 보겠습니다. Simple webpage Lambda 생성하기 단계를 아직 끝내지 못했다면 서포터분들과 먼저 하신다음에 이 단계를 따라오셔야 합니다.
- 아까와 마찬가지로 Create Function 을 눌러서 들어간 다음, 이번에도 Author from scratch 를 선택합니다.
- Function name 으로는 api-service-create를 입력하고, Runtime으로는 python 3.9 를 선택합니다.
- 이번에는 Permissions 을 직접 생성해 보도록 하겠습니다. Permissions 섹션에서 Execution role 의 Create a new role from AWS policy templates 를 선택합니다. Role name으로는 my-lambda-role으로 작성합니다.
- 이번 Function을 만든 다음에는 NoSQL 데이터베이스 서비스인 AWS DynamoDB와 연결할 예정입니다. 앞서 말씀드린 것처럼 AWS 서비스끼리 서로와 연결하거나 이용하거나 호출하거나 할 때에는 권한이 필요합니다. Simple microservice permissions DynamoDB 를 선택합니다. 그리고 오른쪽 아래의 Create 버튼을 눌러 다음으로 이동합니다.
Code source 에 아래를 복사 붙여넣기 한 다음 Deploy 를 누릅니다. 앞서 만들었던 것이 웹페이지라면, 이번에는 웹페이지에 들어갈 기능을 추가합니다. 멤버의 이름과 기분 상태를 랜덤으로 매핑시켜주고, 이를 DynamoDB에 저장하는 기능입니다.
import json
import boto3
import random
import json
def lambda_handler(event, context):
member_name = ['Ama','Jone','Zon','Penny','Jessie']
member_status = ['Happy','Sad','Serious','Satisfied','Free']
dynamodb = boto3.resource('dynamodb',endpoint_url='http://dynamodb.ap-northeast-2.amazonaws.com')
member_table = dynamodb.Table('hello-member')
name = member_name[random.randint(0,4)]
status = member_status[random.randint(0, 4)]
member_table.put_item(
Item={
'name': name,
'status': status,
}
)
documents = {'name':name,'status':status}
print(documents)
return {
'statusCode': 200,
'headers': {'Access-Control-Allow-Origin': '*'},
'body': json.dumps(documents)
}이제 Test 버튼을 누릅니다.
Configure test event 에는 다음과 같이 입력합니다. Event name 으로는 my-api-test 를 입력하고, Event sharing settings 으로는 Private 을 선택합니다. Template은 hello-world를 선택합니다.
이제 Test 버튼을 누르면 테스트가 진행됩니다.아직은 DynamoDB를 만들지 못한 상태여서 다음과 같은 에러가 나게 됩니다. 에러가 나는 것이 정상입니다. 여기까지 만들었다면, 두 개의 Lambda 함수를 만든 것입니다. 이제 이 function에 연결할 dynamoDB 를 만들어 보겠습니다.
