AWS 제품을 활용해 서버리스 웹 어플리케이션을 구현하기 시작한 사람들을 위해 글을 게시합니다.
구조는 아래와 같습니다.
구조를 간단하게 설명하면
1. DynamoDB에 특정 작업을 하는 Lambda함수를 만들고
2. API Gateway를 활용하여 Restful화 합니다. (웹에서 Lambda 함수를 호출하기 위해)
3. 이후 API Gateway Endpoint 를 활용하여 HTTP 프로토콜을 통해 Lambda 함수를 작동(Trigger)시킵니다.
일단 간단한 DynamoDB를 만듭니다.
Table Name과 Partition Key를 입력하고, Settings를 Default setting으로 놔두고 하단의 Create Table 버튼을 누릅니다.
이후 AWS 콘솔에서 AWS Lambda로 이동하여 Create function 을 눌러 함수를 만듭니다.
Use a blueprint를 체크하고 아래의 microservice-http-endpoint를 체크하고 Configure 버튼을 누릅니다.
Author from scratch를 체크하고 본인의 Lamdba 함수를 직접 작성해도 되지만, 저희는 간단한 게시판을 만들어보는 것에 초점을 두기 때문에 이미 만들어진 Sample code를 활용합니다.
Function name과 Role name을 입력해주고 아래의 API Gateway trigger 부분은 제거를 해줍니다. 제거한 부분은 이후 API Gateway콘솔에서 생성하고 추가해줄 것입니다.
Lambda 콘솔창에서 방금 만든 Lamdba함수를 클릭하고 함수코드 부분에서 GET에 해당하는 부분의 TableName 부분을 이전에 만들었던 DynamoDB Table의 이름으로 수정합니다. 그리고 Deploy를 눌러줍니다.
API Gateway 콘솔로 이동하여 API 생성을 눌러줍니다.
REST API 구축을 눌러줍니다
새 API를 체크하고 API 이름을 기입하고 API를 생성을 합니다.
이후 작업 탭을 클릭하고 리소스 생성을 눌러줍니다
리소스 이름을 적고 API Gateway CORS 활성화에 체크하고 리소스를 생성합니다
생성한 리소스의 작업탭을 클릭하고 메소드 생성을 눌러줍니다
저희는 일단 DynamoDB에서 게시판 글을 불러오는 실습을 먼저 할 것이기 때문에 GET 메소드를 생성해줍니다.
Lambda 프록시 통합 사용에 체크를 하고 Lambda함수 부분에 이미 만들어둔 함수를 입력합니다.
첫글자를 입력하면 자동완성 목록이 떠 이것을 클릭하면 편리하게 완료할 수 있습니다.
이후 해당 API를 API 배포 합니다.
이후 Lambda함수 콘솔로 이동하여 만들었던 Lambda함수를 클릭하면 방금 만든 API Gateway가 트리거로 추가된 것을 볼 수 있습니다.
다시 DynamoDB 콘솔로 돌아가서 이전에 만들어둔 simple_board 테이블에서 항목생성을 눌러줍니다.
위와 같이 새 속성 추가를 누르고 문자열을 선택한 다음 위와같이 추가해주고 항목생성을 누릅니다. 콘솔이 아닌 JSON형식에서 속성을 추가해도 상관없습니다.
항목이 추가된 것을 확인합니다.
이제 간단한 웹 어플리케이션을 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html>
<!-- 2021.02.07 AWS Lambda API Gateway DynamoDB 활용 Web 게시판 만들기 -->
<html>
<head>
<meta charset="utf-8">
<title>Simple Board</title>
</head>
<body onLoad="get()">
<div id="articles">
hellow
</div>
<script>
/* HTML노드 추가 함수 */
function createNode(element){
return document.createElement(element);
}
/* HTML노드에 child 추가 함수 */
function append(parent, el){
return parent.appendChild(el);
}
var elem = document.getElementById('articles');
/* API 게이트웨이로 게시글 정보 가져오는 함수 */
const URL = "Put Your API Endpoint";
function get(){
fetch(URL, {
method: "GET",
headers: {
'Accept': 'application/json'
}
}).then(resp => resp.json())
.then(function(data){
let article_arr = data.Items;
return article_arr.map(function(article_indiv){
let li = createNode('li');
let span = createNode('span'); span.innerHTML = article_indiv.title +" - " + article_indiv.content;
append(li, span); append(elem, li);
})
})
.catch(err => console.log(err))
}
</script>
</body>
</html>
|
cs |
해당 HTML 파일을 open하면 오류가 발생합니다.
보안상의 이유로 Cross Origin Request 가 block 되어있기 때문에 데이터를 가져올 수 없다.
Lambda 콘솔에서 함수코드의 header 부분에 "Access_Control-Allow-Origin": '*' 코드를 추가함으로서 이를 해결할 수 있다. 이는 모든 origin에서 접근하는 것을 허용하는 것을 의미한다.
(이 header를 body와 함께 클라이언트에게 reponse해주면 된다.)
CORS에 대해 조금 더 자세히 알고 싶은 분은 아래의 링크를 참조하면 된다.
web.dev/cross-origin-resource-sharing/
Cross-Origin Resource Sharing (CORS)
The browser's same-origin policy blocks reading a resource from a different origin. This mechanism stops a malicious site from reading another site's data, but it also prevents legitimate uses. What if you wanted to get weather data from another country? E
web.dev
이후 웹 어플리케이션을 보면 DynamoDB의 title값과 content값이 브라우져에 나타나는 것을 확인할 수 있다.
DynamoDB에 항목을 추가하면
추가된 항목에 대한 데이터도 잘 받아오는 것을 확인할 수 있다.
다음 게시글에서는 POST 메소드를 활용해서 웹 어플리케이션에서 사진파일을 업로드하는 방법에 대해 이야기하겠습니다.
'Programming > AWS' 카테고리의 다른 글
| [AWS] Serverless Web 게시판 만들기 -2 (사진업로드) S3, DynamoDB (18) | 2021.02.17 |
|---|---|
| [AWS] EBS 추가연결 실습 (0) | 2020.05.09 |
| [AWS] EBS 란? (0) | 2020.05.09 |
| [AWS] RDS 란? (0) | 2020.04.16 |
| [AWS] S3 란? (0) | 2020.04.14 |
댓글