[React] Amazon DynamoDB

필요 준비물

AWS 계정 - Console login(Root)
Browser - Chrome

설치순서

DynamoDB 생성
API gateway 생성
API gateway 추가 생성
Lambda와의 연결

아마존의 dynamoDB와 API Gateway를 생성하도록 합니다. 아마존 계정은 여기서 생성하고 만들도록 합니다. 계정을 만든 후 설정에서 언어와 리젼(지역)을 선택합니다. 계정과 환경 설정의 설명은 여기서 제외합니다. 아마존 AWS는 클라우드 호스팅 서비스를 제공하며 그에 따른 지불이 사용한만큼 받는 합리적인 형태를 가지고 있어 이용하기로 합니다. 또한 전세계에 센터들이 있어 로컬 호스팅 서비스와는 다릅니다. 다른 호스팅도 글을 통하여 설명 드리겠습니다.

DynamoDB는 noSQL 데이터서비스 입니다. 따라서 스키마 없이 데이터를 원하는 형태로 자유롭게 저장할 수 있는 장점이 있습니다. API gateway는 api 관리 서비스이며 외부에서 호출이 왔을때 대문 역할을 하는 서비스로 보시면 됩니다.

1. DynamoDB 생성

DynamoDB 를 콘솔창에서 검색해서 들어갑니다. 서비스에 연결할 DynamoDB 테이블을 만들게 되면 멤버의 이름과 성격을 저장해 놓을 수 있습니다. hello-member 라는 이름을 가진 테이블을 생성하려고 합니다.

DynamoDB 콘솔로 들어가서 왼쪽의 create table 버튼을 누릅니다.

Table name 은 hello-member 로, Partition key는 name 으로 작성합니다. 이 이름은 꼭 똑같이 작성해 주셔야 이후 에러가 나지 않습니다. 작성하신 다음에는 쭉 내려서 오른쪽 아래의 create table 버튼을 눌러서 생성합니다.

아래처럼 Status 가 Active 가 될 때까지 기다립니다. 시간이 다소 걸립니다. 이렇게 hello-member 이름을 가지고 name 이라는 기본키를 가진 테이블을 생성하였습니다. 이제 api gateway를 생성하러 가겠습니다. 지금까지의 구조도는 이렇습니다.

2. API gateway 생성

방금 전 그림에서 보셧듯, 현재는 웹페이지에서 기능을 이용할 수 없게 서로 떨어져 있는 것을 볼 수 있습니다. 이번에는 웹페이지가 기능을 사용할 수 있도록, 즉 기능을 호출할 수 있도록 Api gateway 를 구성하여 호출 통로를 만들어보겠습니다. Api gateway 를 콘솔창에서 검색해서 들어갑니다.

왼쪽의 APIs 메뉴로 들어갑니다.

오른쪽에 있는 create API 버튼을 누릅니다.

이 다음으로는 어떤 API 형태를 만들어야 하는지를 결정해야 하는데 이번에는 HTTP API 보다 API 관리 기능이 더 추가되어 있는 REST API 로 생성해 보겠습니다. REST API 에서 Build 버튼을 누릅니다.

protocol 로는 REST 를, Create new API 로는 New API, Setting 에서는 API name 을 my-api로 지정합니다. 그 다음 create API 버튼을 누릅니다.

들어간 화면에서 Actions 버튼을 누르고, 드롭다운 메뉴에서 Create Method 를 누릅니다.

누른다음 get 을 선택합니다.

그 다음 바로 옆에 있는 체크표시를 눌러서 저장합니다.

저장하면 api 를 구성할 수 있는 화면이 나오게 됩니다. 여기에서 Integration type 을 Lambda Function 을 선택하고, Use Lambda Proxy integration 는 클릭해 줍니다. Lambda Function 에는 api-service-create 로 이름을 작성합니다. 다 작성했으면 맨 밑의 Save 버튼을 누릅니다. 아까 lambda의 이름을 다른 걸로 저장하셨다면 그 lambda 를 찾아서 넣어주시면 됩니다.

아까 저희는 lambda에 dynamoDB 권한만 넣었습니다. 여기에 api gateway 권한을 또 추가해주는 창이 뜹니다. 여기에 OK 버튼을 눌러서 api gateway 에서 lambda 를 부를 수 있도록 구성해 줍니다.

이제 권한도 완성했으니, 부를 수 있는 준비가 다 되었습니다. Method Execution 창에서 TEST 버튼을 눌러 테스트를 준비합니다.

들어간 화면에서 Test 버튼을 다시 눌러줍니다. 서비스가 더 복잡해지면 여기에서 Request Body 에 값을 추가하고 Headers 에도 추가할 수도 있지만, 지금은 아무 값도 넣지 않아도 됩니다.

Test 가 성공하였다면, Status가 200으로 나오며, Response Body에 랜덤한 값이 나오게 됩니다. 그림과 다른 값이 나오실 수 있습니다.

3. API gateway 추가 설정

Api gateway 를 만들었지만, 바로 호출하면 CORS 관련 에러가 나게 될 것입니다. 따라서 호출이 정상적으로 이루어지기 위한 추가 설정을 하겠습니다. Actions 메뉴에서 Enable CORS 를 클릭합니다.

나오는 창에서 Enable CORS and replace exisiting CORS headers 버튼을 클릭합니다.

버튼을 누르면 나오는 창에서 Yes, replace existing values 를 선택합니다.

api 가 정상적으로 작동된다는 것을 확인하고, 추가 설정을 마쳤으니 이제 이 api 를 실제 사용할 수 있게 준비하겠습니다. Actions 에서 Deploy API 를 누릅니다.

누르면 창이 뜨게 되는데, 여기에서 Deployment stage 에서는 [New Stage] 를 선택하고 Stage name 에서는 dev 를 입력합니다.

완료되면 Invoke URL 이 나오게 됩니다. 이 URL 은 사람마다 모두 다릅니다. 이 URL 을 한번 눌러봅니다. 그러면 아래 그림처럼 나오게 됩니다. 문구는 랜덤으로 다를 수 있습니다. 이 URL 은 반드시 복사해서 메모장에 붙어넣으시기 바랍니다. 바로 다음 단계에서 활용합니다. 이제 다 왔습니다. 마지막으로 한 줄만 바꿔서 서비스를 완성해 보겠습니다. 지금은 아래의 그림처럼 완전하게 연결되어 있지 않지만, 한 줄만 바꾸면 서로간의 연결을 완성시킬 수 있습니다.

4. Lambda와의 연결

콘솔창에서 Lambda를 검색하여 Lambda 콘솔로 들어갑니다.

Lambda 콘솔에서는 오른쪽 메뉴에 있는 Functions 를 눌러서 들어가줍니다.

그 전에 만들었던 simple-webpage function으로 들어갑니다. Simple webpage Lambda 생성하기 단계에서 만들었던 Lambda function 입니다.

Code source 에는 저희가 만들었던 소스코드가 담겨져 있습니다. 여기에서 맨 밑으로 드래그 하면, URL을입력하세요 라는 문구를 찾을 수 있습니다. 53번째 줄을 확인해보세요. 이 문구를 아까 Api gateway 생성하기 메뉴에서 복사해 온 URL 로 대체 합니다. 이후 Deploy 버튼을 누릅니다.

이제 위로 올라가서 Function URL 에 있는 URL 로 다시 접속합니다.

이제 페이지의 버튼을 누르면, 버튼 아래에 문구가 떠오르며 실행이 됩니다. 문구는 버튼을 누를때마다 랜덤하게 바뀝니다. 서비스를 모두 생성하였습니다. 축하드립니다.

이제 DynamoDB 데이터베이스에 이 문구가 실제로 저장되어 있는지를 확인해 보겠습니다. DynamoDB 를 콘솔창에서 검색해서 들어갑니다.

왼쪽 옆 메뉴에서 Tables 에 들어갑니다.

hello-member 테이블에 들어갑니다.

Explore table items 버튼을 선택하여 테이블 값들을 보도록 하겠습니다.

아래에서 실제 값들이 들어있는 것을 볼 수 있습니다. 이렇게 해서 하나의 완성된 서비스를 만들어 보았습니다. 서버를 생각할 필요없이 서비스 구성에만 집중할 수 있다는 것이 서버리스의 장점이며, 익숙해 지신다면 더 빠른 속도로 만드실 수 있으실 겁니다. 아래의 그림을 보시면 이제 웹페이지와 서비스, 그리고 데이터베이스가 서로 연결이 되어 있는 모습을 볼 수 있습니다.

여기까지 아마존 AWS DynamoDB 설치 과정이 끝났습니다.

다른 부분이 있으면 문의하기를 통하여 남겨주세요.

이전 목록 다음

history