AWS DevDay 실습 가이드 - 서버리스

1
Wild Ryders Serverless
Hands-on Lab Guide
※ 본 실습 가이드는 아래 온라인 페이지를 통해서도 확인 가능하며, 코드 복사
등은 온라인에서 하시는 것을 권장 드립니다.
https://github.com/awslabs/aws-serverless-workshops/tree/master/WebApplication

2
서버리스 웹 애플리케이션
본 워크샵에서는 사용자가 Wild Rydes 서비스를 통해 현재 있는 위치에서 유니콘 호출
및 탑승을 할 수 있는 스타트업 아이디어를 구현한다는 시나리오로 함께 웹
애플리케이션을 만들어 배포해 봅니다. 이 서비스는 사용자에게 HTML 기반 사용자
인터페이스를 제공하여, 사용자가 원하는 위치를 표시하고 유니콘 요청을 하면,
가까운 유니콘을 보내기기 위해 RESTful 웹 서비스로 백엔드를 제공합니다. 또한,
사용자가 유니콘 타기를 요청하기 전에 기본적으로 회원 가입을 하고 로그인 할
수있는 기능을 제공합니다.
응용 프로그램 아키텍처는 AWS Lambda, Amazon API Gateway, Amazon S3, Amazon
DynamoDB, Amazon Cognito 를 활용합니다. Amazon S3 는 HTML, CSS, JavaScript 및
사용자에게 전달되는 이미지 파일을 비롯한 정적 웹 리소스를 호스팅합니다. 웹
브라우저에서 실행되는 JavaScript 는 Lambda 및 API 게이트웨이를 사용하여 작성된
공용 백엔드 API 에서 데이터를 보내고받습니다. Amazon Cognito 는 백엔드 API 를
보호하기 위해 사용자 관리 및 인증 기능을 제공합니다. 마지막으로, DynamoDB 는
API 의 Lambda 함수로 데이터를 저장할 수 있는 데이터베이스 기능을 제공합니다.
전체 아키텍처의 그림은 아래 다이어그램을 참조하십시오.
아래 필수 준비를 하고 나서, Lab 1. 정적 웹 호스팅 설정 모듈 페이지를 방문하여
워크샵을 시작하십시오.

3
필수 준비
AWS 계정
본 워크샵을 진행하려면 AWS 기본 계정을 준비해야 합니다. AWS IAM, S3,
DynamoDB, Lambda, API Gateway 및 Cognito 에 접근할 수 있어야 하며, 본 가이드는
한명이 하나의 AWS 계정을 사용한다고 가정합니다. 다른 사람과 계정을
공유하려고하면 특정 리소스에 대해 충돌이 발생하므로 권장하지 않습니다.
본 워크샵의 일환으로 시작하는 모든 리소스는 AWS 계정이 12 개월 미만인 경우,
제공하는 AWS 프리티어로 충분히 가능합니다. 프리티어를 넘어서는 경우, 과금일 될
수도 있습니다. 따라서, 새로운 실습용 계정을 만드시길 권장합니다. 자세한 내용은
AWS 프리 티어 페이지를 참조하십시오.
AWS 명령 행 인터페이스
본 워크샵의 첫 번째 모듈을 완료하려면 로컬 시스템에 AWS CLI (Command Line
Interface)가 설치되어 있어야합니다. CLI 를 사용하여 개체를 S3 웹 사이트 버킷에
복사합니다.
AWS CLI 시작하기 안내서에 따라 시스템에 CLI 를 설치 및 구성하십시오.
AWS CLI 를 설치할 수 없거나 설치하지 않으려는 경우 제공된 AWS CloudFormation
템플릿을 사용하여 버킷을 만들고 필요한 파일을 채우지 않고 첫 번째 모듈을 완성 할
수 있습니다. Lab 1. 정적 웹 호스팅 설정의 CloudFormation 실행 지침을
참조하십시오.
웹 브라우저
웹 애플리케이션 UI 를 테스트 할 때 Chrome 또는 Firefox 의 최신 버전을 사용하는
것이 좋습니다.
텍스트 에디터
구성 파일을 사소한 업데이트를하기 위해 로컬 텍스트 편집기가 필요합니다.

4
실습 모듈
이 워크샵은 네 가지 실습 모듈로 나뉩니다. 다음으로 진행하기 전에 각 모듈을
완료해야하지만, 모듈 1 과 2 는 AWS CloudFormation 템플릿을 사용할 수 있습니다.
건너 뛰려면 수동으로 직접 생성하지 않고 필요한 리소스를 시작할 수 있습니다.
• Lab 1. 정적 웹 호스팅 설정
• Lab 2. 사용자 관리
• Lab 3. 서버리스 백엔드
• Lab 4. RESTful APIs
워크샵을 마친 후에는 자원 삭제 가이드에 따라 생성 된 모든 리소스를 삭제할 수
있습니다.

5
모듈 1: Amazon S3 를 사용한 정적 웹호스팅
이 모듈에서는 Amazon Simple Storage Service (S3)가 웹 애플리케이션의 정적 리소스를
호스팅하도록 구성합니다. 이후 모듈에서는 JavaScript 를 사용하여 AWS Lambda 및
Amazon API Gateway 로 구축 된 원격 RESTful API 를 호출하여 동적 기능을 페이지에
추가합니다.
이미 Amazon S3 를 사용하고 있거나 Lambda 및 API Gateway 작업을 건너 뛰고 싶다면
선택한 지역에서 이러한 AWS CloudFormation 템플릿 중 하나를 시작하여 필요한
리소스를 자동으로 구축 할 수 있습니다.
아키텍쳐 개요
이 모듈의 아키텍쳐는 매우 간단합니다. HTML, CSS, JavaScript, 이미지 및 기타 파일을
포함한 모든 정적 웹컨텐츠는 Amazon S3 에 저장됩니다. 최종 사용자는 Amazon S3 에
공개된 웹 사이트 URL 을 사용하여 사이트에 액세스합니다. 사이트를 사용할 수
있도록 하기 위해서 웹 서버를 실행하거나 다른 서비스를 사용할 필요가 없습니다.
이번 모듈의 목적을 위해서 우리가 제공하는 Amazon S3 웹사이트 엔드포인드 URL 을
사용합니다. http://{your-bucket-name}.s3-website.{region}.amazonaws.com 와
같은 형식을 취합니다. 대부분의 실제 응용 프로그램의 경우 사용자 지정 도메인을
사용하여 사이트를 호스팅하려고 합니다. 자신의 도메인을 사용하는데 관심이 있다면
맞춤 도메인을 사용하여 정적 웹 사이트 설정 을 참조하십시오.
구현 지침
다음 섹션에서는 구현 개요와 자세한 단계별 지침을 제공합니다. 개요는 이미 AWS
Management Console 에 익숙하거나 둘러보기를 거치지 않고 직접 서비스를
탐색하려는 경우 구현을 완료하는 데 충분한 내용을 제공합니다.

6
최신 버전의 Chrome, Firefox, 혹은 Safari 웹 브라우저를 사용하는 경우 섹션을 펼쳐야
단계별 지침이 표시됩니다.
리전 선택
이 실습은 다음 서비스를 지원하는 모든 AWS 리전에 배포 할 수 있습니다.
• Amazon Cognito
• AWS Lambda
• Amazon API Gateway
• Amazon S3
• Amazon DynamoDB
AWS 설명서에서 리전 표 를 참고하여 지원되는 서비스가 있는 지역을 확인할 수
있습니다. 지원되는 지역중에서는 N. Virginia, Ohio, Oregon, Ireland, Frankfurt, Tokyo,
Sydney, Seoul 이 있습니다.
AWS 리전 AWS CloudFormation 템플릿
서울리전 (ap-northeast-2) http://bit.ly/awskr-devday-serverless-1
※ 다른 리전에 대한 링크는 온라인 페이지를 참고하시기 바랍니다.
리전을 선택한 후에는 이 실습의 모든 리소스를 배포해야합니다. 시작하기전에 AWS
Console 의 오른쪽 상단에 있는 드롭 다운에서 리전을 선택하십시오.
1. S3 버킷 생성
콘솔 또는 AWS CLI 를 사용하여 Amazon S3 버킷을 생성하십시오. 버킷의 이름은 전
세계적으로 고유해야합니다. wildrydes-yourname 와 같은 이름을 사용할것을
권장합니다.

7
단계별 지침
1. AWS Management Console 에서 Services 를 선택한 다음 S3 를 선택하십시오.
2. +Create Bucket 을 선택하십시오.
3. wildrydes-yourname 와 같은 전 세계적으로 고유한 이름을 설정하십시오.
4. 드롭다운 메뉴에서 이 실습에서 사용할 리전을 선택하십시오.
5. 설정을 복사할 버킷을 선택하지 않고 대화상자의 왼쪽 하단에 있는 Create 를
선택하십시오.
2. 콘텐츠 업로드
AWS CLI 를 사용해서, s3://wildrydes-us-east-
1/WebApplication/1_StaticWebHosting/website 에서 사용하는 웹 사이드 애셋을
업로드 하십시오. 다음 명령을 사용하여 모든 애셋을 쉽게 복사 할 수 있습니다.
YOUR_BUCKET_NAME 을 이전 섹션에서 사용한 이름으로 대체했는지 확인하십시오.
aws s3 sync s3://wildrydes-us-east-
1/WebApplication/1_StaticWebHosting/website s3://YOUR_BUCKET_NAME
명령이 성공적으로 수행되면 버킷에 복사된 파일 목록이 표시됩니다.
혹은 AWS CLI 에 익숙하지 않으시다면,
http://bit.ly/2rZzEVB

8
위 경로에서 website.zip 압축파일을 다운로드 한 다음 압축을 풀고, 폴더 안에 있는
파일들을 사용자가 생성한 버킷에 업로드해서 이용하실수도 있습니다.
3. 버킷 정책에 Public Reads 권한을 허용
익명 사용자가 사이트를 볼 수있게하려면 버킷 정책을 새 Amazon S3 버킷에
추가해야합니다. 기본적으로 버킷은 AWS 계정에 대한 액세스 권한이있는 인증 된
사용자 만 액세스 할 수 있습니다.
부여할 정책에 대한 설정은 이 예제 를 참고하십시오. 익명 사용자에 대한 읽거 전용
액세스. 이 예제 정책은 인터넷상의 모든 사용자가 귀하의 콘텐츠를 볼 수있게합니다.
버킷 정책을 업데이트하는 가장 쉬운 방법은 콘솔을 사용하는 것입니다. 버킷을
선택하고 권한(Permissions) 탭을 선택한 다음 버킷 정책(Bucket Policy)을
선택하십시오.
단계별 지침
1. S3 콘솔에서 섹션 1 에서 생성 한 버킷의 이름을 선택하십시오.
2. Permissions 탭을 선택한 다음, Bucket Policy 를 선택하십시오.
3. 다음 정책 문서를 버킷 정책 편집기에 입력하고 YOUR_BUCKET_NAME 을 섹션
1 에서 생성한 버킷 이름으로 변경하십시오.
4. {
5. "Version": "2012-10-17",
6. "Statement": [
7. {
8. "Effect": "Allow",
9. "Principal": "*",
10. "Action": "s3:GetObject",
11. "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
12. }
13. ]
}

9
14. Save 버튼을 선택하여 새 정책을 적용하십시오.
4. 웹 사이트 호스팅 활성화
콘솔을 사용해서 정적 웹사이트 호스팅을 활성화합니다. 버킷을 선택한 후에
속성탭에서 이 작업을 수행할 수 있습니다. index document 로 index.html 을 설정하고,
error document 는 비워두십시오. 자세한 내용은 정적 웹 사이트 호스팅을 위한 버킷
구성 의 설명서를 참고하십시오.
단계별 지침 (자세한 내용을 보려면 펼쳐주세요)
1. S3 콘솔의 버킷 세부 사항 페이지에서, Properties 탭을 선택하십시오.
2. Static website hosting 을 선택하십시오.
3. Use this bucket to host a website 을 선택하고, index document 에 index.html 를
입력하십시오. 다른 입력칸은 비워둡니다.
4. 먼저 Endpoint URL 을 확인하십시오. 그 뒤에 Save 버튼을 클릭하십시오. 이
URL 을 나머지 실습에서 웹 응용 프로그램을 볼 때 사용할 것입니다. 여기에서
이 URL 을 귀하의 웹 사이트의 기본 URL 이라고 합니다.
5. Save 을 클릭하여 변경 사항을 저장하십시오.

10
모듈 2: Amazon Cognito User Pools 를 이용한
사용자 인증 및 등록
이 모듈에서는 Amazon Cognito user pool 을 만들어 사용자의 계정을 관리합니다.
고객이 새 사용자로 등록하고 이메일 주소를 확인하고 사이트에 로그인 할수있는 웹
페이지를 배포합니다.
다음 모듈로 건너 뛰려면, 원하는 지역에서 AWS CloudFormation 템플릿 중 하나를
시작해서 필요한 리소스를 자동으로 구축하십시오.
AWS 리전 AWS CloudFormation 템플릿
서울리전 (ap-northeast-2) http://bit.ly/awskr-devday-serverless-2
※ 다른 리전에 대한 링크는 온라인 페이지를 참고하시기 바랍니다.
아키텍쳐 개요
사용자가 웹 사이트를 방문하면 먼저 새로운 사용자 계정을 등록합니다. 이 실습의
목적을 위해 우리는 이메일 주소와 암호를 넣도록 요구할것입니다. 하지만 Amazon
Cognito 가 자신의 응용 프로그램에 추가 속성을 요구하도록 구성할 수 있습니다.
사용자 등록을 완료하면, Amazon Cognito 는 확인 코드가 포함된 검증 이메일을
제공한 주소로 보냅니다. 계정을 확인하기 위해 사용자는 사이트도 돌아와 이메일
주소와 받은 인증코드를 입력합니다. 가짜 이메일 주소를 테스트 하려는 경우 Amazon
Cognito 콘솔을 사용해서 사용자 계정을 확인할수도 있습니다.
사용자가 확인한 계정 (이메일 확인 프로세스 또는 콘솔을 통한 수동 확인) 이면,
로그인을 할 수 있습니다. 로그인 할때 사용자의 이름 (혹은 이메일) 과 암호를
입력합니다. JavaScript 함수는 Amazon Cognito 와 통신하고, Secure Remote Password
protocol (SRP 프로토콜)을 사용하여 인증하고, JSON Web Tokens (JWT)을 수신합니다.
JWT 는 사용자의 인증에 대한 정보를 포함하고있어서 다음 모듈에서 Amazon API
Gateway 로 빌드한 RESTful API 를 인증하는데 사용됩니다.

11
구현 지침
1. Amazon Cognito User Pool 만들기
Amazon Cognito 콘솔을 사용하여 기본 설정을 이용해서 새 사용자 풀을 만듭니다.
사용자 풀이 생성되면, Pool Id 를 메모장에 기록해놓으십시요. 나중에 이 값을
사용합니다.
단계별 지침
1. AWS 콘솔에서 Services 를 클릭한 다음, 모바일 서비스에서 Cognito 를
선택하십시오.
2. Manage your User Pools 를 선택하십시오.
3. Create a User Pool 를 선택하십시오.
4. WildRydes 와 같은 사용자 풀 이름을 입력한 다음, Review Defaults 를
선택하십시오.

12
5. 리뷰 페이지에서, Create pool 을 클릭하십시오.
6. 새로 생성된 user pool 의 세부정보 페이지에서 Pool Id 를 확인하십시오.
(메모장에 기록해놓으면 좋습니다)
2. User Pool 에 앱 클라이언트 추가
Amazon Cognito 콘솔에서 user pool 을 선택한 다음 App clients 섹션을 선택합니다. 새
앱을 추가하고 Generate client secret option 의 선택이 해제되어 있는지 확인하십시오.
Client secrets 옵션은 JavaScript SDK 에서 지원되지 않습니다. 생성된 암호로 앱을
만드는 경우 암호를 삭제하고 올바른 구성으로 새 암호를 만듭니다.
단계별 지침
1. 사용자 풀에 대한 세부 정보 페이지의 왼쪽 탐색기 메뉴에서 App clients 를
선택합니다.
2. Add an app client 를 선택합니다.
3. 앱에 WildRydesWebApp 와 같은 이름을 지정합니다.
4. 선택취소 Generate client secret 옵션의 선택은 해제하십시오. Client secrets
옵션은 웹 브라우저 기반 응용 프로그램에서는 사용할 수 없습니다.
5. Create app client 클릭하십시오.

13
6. 새로 생성 된 응용 프로그램에 대한 App client id 를 미리 메모장에
복사해놓으십시오. 나중에 사용됩니다.
3. 웹 사이트 버킷에서 config.js 파일 업데이트
/js/config.js 파일에는 user pool ID, app client ID 및 Region 에 대한 설정이 들어있습니다.
이전 단계에서 생성한 사용자 풀 및 앱의 설정으로 이 파일을 업데이트하고 파일을 S3
버킷에 다시 업로드 하십시오.
단계별 지침
1. 이 저장소의 첫번째 모듈 웹 사이트의 디렉토리에서 config.js 파일을 로컬
시스템으로 다운로드하십시오.
2. 원하는 텍스트 편집기를 사용하여 다운로드 한 파일을 엽니다.
3. cognito 섹션을 방금 생성한 사용자 풀과 앱에 대한 올바른 값으로
수정하십시오.
생성한 사용자 풀을 선택하면 Amazon Cognito 콘솔의 Pool Details 페이지에서
userPoolId 값을 확인할 수 있습니다.

14
왼쪽 네비게이션 바에서 App clients 를 선택해서 userPoolClientId 값을
확인할 수 있습니다. 이전 섹션에서 생성한 앱에 대해 App client id 입력란의
값을 사용합니다.
region 의 값은 사용자 풀을 생성한 AWS 지역 코드여야 합니다. 예 us-east-
1 는 N. Virginia Region, 혹은 us-west-2 는 Oregon Region. 서울 리전은 'ap-
northeast-2' 입니다. 사용할 코드를 잘 모르는 경우 풀 세부 정보 페이지에서 Pool
ARN 값을 확인 할 수 있습니다. 지역코드는 ARN 의 arn:aws:cognito-idp:
바로 뒤에 있는 부분입니다.
수정된 config.js 파일은 다음과 같아야 합니다.
window._config = {
cognito: {
userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-
2_uXboG5pAb
userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g.
25ddkmj4v6hfsfvruhpfi7n4hv
region: 'us-west-2' // e.g. us-east-2
},
api: {
invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-
2.amazonaws.com/prod',
}
};
4. 수정된 파일을 저장하고 파일 이름이 여전히 config.js 인지 확인하십시오.
5. https://console.aws.amazon.com/s3/ 로 접속해서 Amazon S3 콘솔을 엽니다.
6. 이전 모듈에서 작성한 Wild Rydes 웹 사이트 버킷을 선택하십시오.

15
7. js 폴더로 이동하십시오.
8. Upload 를 선택한 다음, Add Files 를 선택하십시오.
9. congig.js 파일의 로컬 수정 버전을 저장한 디렉토리를 찾아서 선택하고, Open
을 선택하십시오.
10. 대화상자의 왼쪽에서 Upload 를 선택하십시오.
참고: 등록, 확인 및 로그인 흐름을 관리하기 위한 브라우저 측 코드를 작성하는 대신
첫번째 모듈에 배포한 애셋에서 작동하는 구현을 제공합니다. cognito-auth.js 파일에는
UI 이벤트를 처리하고 적절한 Amazon Cognito Identity SDK 메소드를 호출하는 코드가
들어있습니다. SDK 에 대한 자세한 내용은 GitHub 프로젝트 페이지를 참고하십시오.
작성한 내용 검증하기
1. 귀하의 웹 사이트 도메인 아래에서 /register.html 을 방문하거나, 혹은
홈페이지에서 Giddy Up! 버튼을 선택하십시오.

16
2. 등록 양식을 작성하고 Let's Ryde 를 선택하십시오. 사용자가 생성되었음을
알려주는 알림이 나타납니다.
3. 다음 두 가지 방법 중 하나를 사용하여 새 사용자를 확인하십시오.
4. 직접 사용하는 이메일 주소를 사용한 경우 웹 사이트 도메인에서 /verify.html
를 방문해서 이메일로 전송 된 인증 코드를 입력하여 계정 확인 절차를 완료 할
수 있습니다.
5. 가짜 이메일 주소를 사용한 경우, Cognito 콘솔을 통해 수동으로 사용자를
확인해야 합니다.
6. AWS 콘솔에서 서비스를 클릭한 다음, Security, Identity & Compliance 에서
Cognito 를 선택하십시오.
8. WildRydes 사용자 풀을 선택하고 왼쪽 네비게이션바에서 Users and groups 를
클릭하십시오.
9. 등록 페이지를 통해 제출한 이메일 주소에 해당하는 사용자가
표시되어야합니다. 사용자 세부 정보 페이지를 보려면 해당 사용자의 이름을
선택하십시오.
10. Confirm user 를 선택하여 계정 생성 프로세스를 완료하십시오.
11. /verify.html 페이지 또는 Cognito 콘솔을 사용해서 사용자를 확인한 다음,
/signin.html 페이지를 방문해서 등록 단계에서 입력한 이메일 주소와
비밀번호를 사용하여 로그인하십시오.
12. 성공하면 /ride.html 페이지로 이동되어야합니다. API 가 구성되지 않았다는
알림이 표시되어야합니다.
웹 응용프로그램에 성공적으로 로그인 하면, 다음 모듈인 서버리스 백엔드로
넘어가시면 됩니다.

17
모듈 3: 서버리스 백엔드 서비스
이 모듈에서는 AWS Lambda 와 Amazon DynamoDB 를 사용하여 웹 애플리케이션의
요청을 처리하는 백엔드 프로세스를 빌드합니다. 첫번째 모듈에 배포한 브라우저 응용
프로그램을 사용하면 원하는 위치로 유니콘을 보내도록 요청할 수 있습니다. 이러한
요청을 충족시키려면 브라우저에서 실행되는 JavaScript 가 클라우드에서 실행되는
서비스를 호출해야 합니다.
사용자가 유니콘을 요청할때마다 호출되는 람다 함수를 구현합니다. 이 함수는
함대에서 유니콘을 선택하고 DynamoDB 테이블에 요청을 기록한 다음 발송되는
유니콘에 대한 세부 정보를 프론트엔드 응용프로그램에 응답합니다.
이 함수는 Amazon API Gateway 를 사용하여 브라우저에서 호출됩니다. 다음 모듈에서
해당 연결을 구현합니다. 이 모듈에서는 함수를 단독으로 테스트합니다.
구현 지침
1. Amazon DynamoDB 테이블 만들기
Amazon DynamoDB 콘솔을 사용해서 새로운 DynamoDB 테이블을 만드십시오. Rides
라는 테이블을 만들고 String 타입의 RideId 라는 파티션 키(Partition Key)를
부여하십시오. 다른 모든 설정에는 기본값을 사용하십시오.

18
테이블을 만든 뒤에는, 다음 단계에서 사용할 ARN 을 메모장에 복사해놓으십시오.
단계별 지침
1. AWS Management 콘솔에서, Services 를 선택한 다음 데이터베이스에서
DynamoDB 를 선택하십시오.
2. Create table 을 선택하십시오.
3. Table name 에 Rides 를 입력하십시오.
4. Partition key 에 대해 RideId 키 유형(key type) 으로 String 을 선택하십시오.
5. Use default settings 체크박스를 선택하고 Create 을 선택하십시오.
6. 새 테이블의 개요 섹션 아래로 스크롤해서 ARN 을 확인하십시오. 다음
섹션에서 이것을 사용할 것입니다. 미리 메모장에 복사해놓는게 좋습니다.
2. 람다 함수에 대한 IAM 역할 만들기
IAM 콘솔을 사용하여 새 역할을 만듭니다. 이름을 WildRydesLambda 로 지정하고 역할
유형으로 AWS Lambda 를 선택하십시오. 함수 권한을 부여하는 정책을 첨부하여
Amazon CloudWatch 로그에 기록하고 항목을 DynamoDB 테이블에 저장해야합니다.

19
AWSLambdaBasicExecutionRole 라는 관리 정책을 이 역할(role)에 추가해서 필요한
CloudWatch Logs 권한을 부여하십시오. 또한 이전 섹션에서 생성한 테이블에 대한
ddb:PutItem 액션을 허용하는 역할을 위한 커스텀 인라인 정책을 생성하십시오.
단계별 지침
1. AWS Management Console 에서 Services 를 선택한 다음, Security, Identity &
Compliance 섹션에서 IAM 을 선택하십시오.
2. 왼쪽 네비게이션바에서 Roles 을 선택하고 Create new role 를 선택하십시오.
3. 역할 유형(role type)으로 AWS Lambda 를 선택하십시오.
참고: 역할 유형(role type)을 선택하면 AWS 가 사용자를 대신해서 이 역할을
맡을 수 있도록 역할에 대한 신뢰 정책(trust policy)이 자동으로 생성됩니다. CLI,
AWS CloudFormation 또는 다른 메커니즘을 사용해서 이 역할을 작성하는 경우
직접 신뢰 정책(trust policy)을 지정합니다.
4. Filter 압력란에 AWSLambdaBasicExecutionRole 를 입력하고 해당 역할 옆의
확인란을 선택하십시오.
5. Next Step 을 선택하십시오.
6. Role name 에 WildRydesLambda 를 입력하십시오.
7. Create role 을 선택하십시오.
8. 역할 페이지의 필터 입력칸에 WildRydesLambda 를 입력하고 방금 작성한
역할을 선택하십시오.
9. Permissions 탭에서 Inline Policies 섹션을 확장하고 click here 링크를 선택해서
새 인라인 정책을 만드십시오.

20
10. Policy Generator 가 선택되어 있는지 확인하고 Select 을 선택하십시오.
11. AWS Service 드롭다운 메뉴에서 Amazon DynamoDB 를 선택하십시오.
12. Actions 목록에서 PutItem 를 선택하십시오.
13. 이전 섹션에서 작성한 테이블의 ARN 을 Amazon Resource Name (ARN)
입력칸에 붙여 넣으십시오.
14. Add Statement 를 선택하십시오.
15. Next Step 울 선택한 다음 Apply Policy 를 선택하십시오.
3. 요청 처리를 위한 람다 함수 만들기
AWS Lambda 콘솔을 사용하여 API 요청을 처리할 RequestUnicorn 라는 새로운 람다
함수를 만듭니다. 함수 코드에 제공된 requestUnicorn.js 예제 구현을 사용하십시오.
해당 파일을 복사하여 AWS Lambda 콘솔 편집기에 붙여넣기만 하면 됩니다.
이전 섹션에서 작성한 WildRydesLambda IAM 역할을 사용하도록 함수를
설정해야합니다.
단계별 지침
1. Services 를 선택한 다음 Compute 섹션에서 Lambda 를 선택하십시오.
2. Create a Lambda function 를 선택하십시오.
3. Blank Function 블루프린트를 선택하십시오.
4. 트리거를 지금 설정하지 마십시오. Next 를 선택하여 함수를 정의하는 부분을
진행합니다.
5. Name 입력칸에 RequestRide 를 입력하십시오.

21
6. description 입력칸은 옵션입니다.
7. Runtime 에 대해 Node.js 6.10 을 선택하십시오.
8. requestUnicorn.js 의 코드를 복사하여 코드 입력 영역에 붙여 넣으십시오.
9. Handler 입력칸에 대해 index.handler 의 기본값을 그대로 둡니다.
10. Existing Role 드롭다운에서 WildRydesLambda 를 선택합니다.
11. Next 을 선택한 다음 리뷰 페이지에서 Create function 를 선택하십시오.
이 모듈에서는 AWS Lambda 콘솔을 사용하여 작성한 함수를 테스트합니다. 다음
모듈에서는 API Gateway 가 있는 REST API 를 추가하므로 첫번째 모듈에서 배포한
브라우저 기반 응용 프로그램에서 함수를 호출할 수 있습니다.

22
1. 작성한 함수의 기본 편집 화면에서, 먼저 Actions 를 선택한 다음 Configure test
event 를 선택하십시오.
2. 다음 테스트 이벤트를 복사해서 편집기에 붙여넣습니다:
3. {
4. "path": "/ride",
5. "httpMethod": "POST",
6. "headers": {
7. "Accept": "*/*",
8. "Authorization": "eyJraWQiOiJLTzRVMWZs",
9. "content-type": "application/json; charset=UTF-8"
10. },
11. "queryStringParameters": null,
12. "pathParameters": null,
13. "requestContext": {
14. "authorizer": {
15. "claims": {
16. "cognito:username": "the_username"
17. }
18. }
19. },
20. "body":
"{"PickupLocation":{"Latitude":47.6174755835663,"Longitude":-
122.28837066650185}}"
}
21. Save and test 를 선택하십시오.

23
22. 실행이 성공했고 함수 결과가 다음과 같은지 확인하십시오:
{
"statusCode": 201,
"body":
"{"RideId":"SvLnijIAtg6inAFUBRT+Fg==","Unicorn":{"Name":"Rocinante
","Color":"Yellow","Gender":"Female"},"Eta":"30 seconds"}",
"headers": {
"Access-Control-Allow-Origin": "*"
}
}
람다 콘솔을 사용해서 새 함수를 성공적으로 테스트 한 뒤, 다음 모듈인 RESTful APIs
로 넘어가시면 됩니다.

24
모듈 4: RESTful API 만들기
이 모듈에서는 API Gateway 를 사용하여 이전 모듈에서 작성한 람다 함수를 RESTful
API 로 보여줍니다. 이 API 는 공용 인터넷에서 접근할 수 있습니다. 이 모듈은 이전
모듈에서 생성한 Amazon Cognito 사용자 풀을 사용하여 보호됩니다. 이 구성을
사용하면 노출된 API 에 AJAX 호출을 수행하는 클라이언트쪽의 JavaScript 를
추가하여 정적으로 호스팅 된 웹 사이트를 동적 웹 응용 프로그램으로 바꿀 수
있습니다.
위의 다이어그램은 이 모듈에서 빌드할 API Gateway 구성요소가 이전에 빌드한 기존
구성 요소와 어떻게 통합되는지 보여줍니다. 회색으로 표시된 항목은 이전 단계에서
이미 구현한 부분입니다.
첫번째 모듈에서 배포한 정적 웹 사이트에는 이미 이 모듈에서 빌드할 API 와
상호작용하도록 구성된 페이지가 있습니다. /ride.html 페이지에는 유니콘 탑승을
요청하기위한 간단한 지도 기반 인터페이스가 있습니다. /signin.html 페이지를
사용해서 로그인 한 뒤 사용자는 지도상의 특정 지점을 클릭한 다음 오른쪽 상단
모서리에 있는 "Request Unicorn" 버튼을 선택하여 탑승 위치를 선택할 수 있습니다.
이 모듈에서는 API 의 클라우드 구성 요소를 작성하는데 필요한 단계에 초점을
맞춥니다. 이 API 를 호출하는 브라우저 코드의 작동 방식에 관심이 있는 경우 ride.js
파일을 확인하시면 됩니다. 이 앱에서는 jQuery 의 ajax() 메소드를 사용하여 원격
요청을 합니다.

25
구현 지침
1. 새로운 REST API 만들기
Amazon API Gateway 콘솔을 사용해서 새로운 API 를 작성하십시오.
단계별 지침 (자세한 내용을 보려면 펼쳐주세요)
1. AWS Management 콘솔에서, Services 를 클릭한 다음 Application Services
섹션에서 API Gateway 를 선택하십시오.
2. Create API 를 선택하십시오.
3. New API 를 선택하고 API Name 에 WildRydes 를 입력하십시오.
4. Create API 를 선택하십시오
2. Cognito 사용자 풀 인증 프로그램(user pool Authorizer) 만들기
Amazon API Gateway 콘솔에서 API 에 대한 새로운 Cognito 사용자 풀 인증
프로그램(user pool Authorizer)를 작성하십시오. 이전 모듈에서 작성한 사용자 풀의

26
세부 사항으로 구성하십시오. 현재 웹 사이트의 /signin.html 페이지를 통해 로그인 한
뒤 표시되는 인증 토큰을 복사하여 붙여넣어 콘솔에서 구성을 테스트 할 수 있습니다.
단계별 지침
1. 새로 작성된 API 에서, Authorizers 를 선택하십시오 .
2. Create 드롭 다운 목록에서, Cognito User Pool Authorizer 를 선택하십시오.
3. 모듈 2 에서 Cognito 사용자 풀을 만든 리전을 선택하십시오.
4. 드롭 다운 목록에서 WildRydes Cognito 사용자 풀을 선택하십시오.
5. 인증자 이름(Authorizer name)에 WildRydes 를 입력하십시오.
6. Identity token source 가 Authorization 로 설정되었는지 확인하십시오.
7. Create 를 선택하십시오.
인증자 프로그램(authorizer) 구성을 확인하기
1. 새로운 웹 브라우저 탭을 열고 웹 사이트 도메인 아래에서 /ride.html 을
방문하십시오.
2. 로그인 페이지로 리다이렉션 된 경우, 마지막 모듈에서 생성한 사용자로 로그인
하십시오. /ride.html 페이지로 이동할 것입니다.
3. /ride.html 알림의 인증 토큰을 복사해서 API Gateway 콘솔 탭의 Identity token
입력칸에 붙여넣습니다.
4. Test 를 선택하고 귀하의 사용자에 대한 클레임이 표시된 것을 확인하십시오.

27
3. 새 리소스 및 메소드 만들기
API 내에 /ride 라는 새 리소스를 만듭니다. 그런 다음 해당 리소스에 대한 POST
미소드를 작성하고 이 모듈의 첫번째 단계에서 작성한 RequestUnicorn 함수로 람다
프록시 통합(Lambda proxy integration)을 사용하도록 구성하십시오.
단계별 지침
1. 왼쪽 네비게이션 메뉴에서 WildRydes API 아래의 Resources 를 클릭하십시오.
2. Actions 드롭 다운 메뉴에서 Create Resource 를 선택하십시오.
3. Resource Name 으로 ride 를 입력하십시오.
4. Resource Path 가 ride 로 설정되어있는지 확인하십시오.
5. Create Resource 를 클릭하십시오.
6. 새로 생성된 /ride 리소스가 선택되면, Action 드롭 다운 메뉴에서 Create
Method 를 선택하십시오.
7. 새로 나타나는 드롭 다운 메뉴에서 POST 를 선택한 다음 체크 표시를
클릭하십시오.
8. 통합 유형(integration type)으로 Lambda Function 를 선택하십시오.
9. Use Lambda Proxy integration 확인란을 선택하십시오.
10. Lambda Region 에 사용하고 있는 리전을 선택하십시오.
11. 이전 모듈에서 작성한 함수의 이름인 RequestRide 를 Lambda Function 에
입력하십시오.
12. Save 을 선택하십시오.

28
13. Amazon API Gateway 에 기능 호출 권한을 제공하라는 메시지(invoke your
function)가 표시되면 OK 을 선택하십시오.
14. Method Request 카드를 선택하십시오.
15. Authorization 옆에 있는 연필 아이콘을 선택하십시오.
16. 드롭 다운 목록에서 WildRydes Cognito 사용자 풀 인증 프로그램(user pool
authorizer) 을 선택하고 확인 표시 아이콘을 클릭합니다.
4. CORS 사용 설정하기
최신 웹 브라우저는 한 도메인에서 호스팅되는 페이지의 스크립트에서 명시적으로
허용하는 HTTP 접근 제어(CORS) 응답 헤더를 제공하지 않는 한 다른 도메인에서
호스팅되는 API 에 대한 HTTP 요청을 차단합니다. Amazon API Gateway 콘솔에서
자원을 선택했을때 필요한 구성을 추가하여 조치메뉴 아래에 적절한 CORS 헤더를
보낼 수 있습니다. /requestunicorn 리소스에서 POST 및 OPTIONS 에 대해 CORS 를

29
사용해야합니다. 간단하게 하기 위해 Access-Control-Allow-Origin 헤더 값을 '*' 로
설정할 수 있지만, 실제 운영환경에서는 cross-site request forgery (CSRF - 크로스
사이트 요청 위조) 공격에 대비하기 위해 항상 권한 있는 도메인을 명시적으로
허용해야 합니다.
일반적으로 CORS 구성에 관한 자세한 내용은 https://developer.mozilla.org/en-
US/docs/Web/HTTP/Access_control_CORS 를 참고하십시오.
단계별 지침
1. Amazon API Gateway 콘솔의 가운데 패널에서 /ride 리소스를 선택하십시오.
2. Actions 드롭 다운 목록에서 Enable CORS 를 선택하십시오.
3. 기본 설정을 사용하고 Enable CORS and replace existing CORS headers 를
선택하십시오.
4. Yes, replace existing values 를 선택하십시오.
5. 모든 단계 옆에 체크 표시가 나타날때까지 기다립니다.
5. API 배포하기
Amazon API Gateway 콘솔에서 Actions 를 선택하고, Deploy API 를 선택하십시오. 새
스테이지를 만들라는 메시지가 표시됩니다. 스테이지 이름으로는 prod 를 사용할 수
있습니다.
단계별 지침
1. Actions 드롭 다운 목록에서 Deploy API 를 선택하십시오.
2. Deployment stage 드롭 다운 목록에서 **[New Stage]**를 선택하십시오
3. Stage Name 에 prod 를 입력하십시오.
4. Deploy 를 선택하십시오.
5. Invoke URL 를 미리 메모장에 복사해놓으십시오. 다음 섹션에서 사용합니다.
6. 웹사이트 config 파일 업데이트
방금 만든 스테이지의 호출 URL(Invoke URL)을 포함하도록 웹 사이트 배포에서
/js/config.js 파일을 업데이트 합니다. Amazon API Gateway 콘솔의 스테이지 편집기
페이지 상단에서 직접 호출 URL 을 복사해서 사이트의 /js/config.js 파일의

30
_config.api.invokeUrl 키에 붙여 넣어야합니다. config 파일을 업데이트 할 때 Cognito
사용자 풀에 대한 이전 모듈에서 작성한 업데이트가 포함되어 있는지 확인하십시오.
단계별 지침
모듈 2 를 수동으로 완료했다면, 로컬에 저장한 config.js 파일을 편집 할 수 있습니다.
만약 AWS CloudFormation 템플릿을 사용한 경우 먼저 S3 버킷에서 config.js 파일을
다운로드 해야합니다. 그렇게 하려면 웹 사이트의 기본 URL 아래에 있는
/js/config.js 를 방문해서 File 을 선택한 다음, 브라우저에서 Save Page As 을
선택하십시오.
1. 텍스트 편집기에서 config.js 파일을 엽니다.
2. config.js 파일의 api 키 아래에서 invokeUrl 설정을 업데이트 하십시오. 이전
섹션에서 작성한 배포 단계(deployment stage) 의 값을 Invoke URL 로
설정하십시오.
완전한 config.js 파일의 예제가 아래에 포함되어 있습니다.
window._config = {
cognito: {
userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-
2_uXboG5pAb
userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g.
25ddkmj4v6hfsfvruhpfi7n4hv
region: 'us-west-2' // e.g. us-east-2
},
api: {
invokeUrl: 'https://rc7nyt4tql.execute-api.us-west-
2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-
2.amazonaws.com/prod,
}
};
3. 변경 사항을 로컬에 저장하십시오.
4. AWS Management 콘솔에서 Services 를 선택한 다음, Storage 에서 S3 를
선택하십시오.
5. 귀하의 웹 사이트 버킷을 선택하고 js 폴더로 이동하십시오.
6. Upload 를 선택하십시오.
7. Add files 를 선택하고, config.js 의 로컬 복사본을 선택한 다음 Next 을
클릭하십시오.

31
8. Set permissions 및 Set properties 섹션을 통해 기본값을 변경하지 않고 Next
를 선택하십시오.
9. Review 섹션에서 Upload 를 선택하십시오.
1. 귀하의 웹 사이트 도메인 아래에서 /ride.html 을 방문하십시오.
2. 로그인 페이지로 리다이렉션 된 경우, 이전 모듈에서 생성한 사용자로 로그인
하십시오.
3. 웹 페이지에서 지도가 로드된 이후 , 아무 장소나 클릭해서 픽업 위치를
선택합니다.
4. Request Unicorn 을 선택하십시오. 오른쪽 사이드바에 유니콘이 오고 있다는
알림이 표시되고, 유니콘 아이콘이 픽업 위치로 이동하는것을 볼 수 있습니다.
축하합니다! Wild Rydes 웹 응용 프로그램 워크샵을 완료했습니다! 추가 서버리스
사용 사례를 다루는 기타 워크샵 을 확인하십시오.
작성한 리소스를 삭제하는 방법은 이 워크샵의 삭제 가이드 를 참고하십시오.
중요합니다

32
워크샵 정리 가이드
이 페이지는 이전 모듈에서 작성된 자원을 정리하는 지시 사항을 제공합니다.
1. 모듈 4 정리 방법
모듈 4 에서 작성된 REST API 를 삭제하십시오. Amazon API Gateway 콘솔에서
API 를 선택할 때 Actions 드롭 다운 메뉴에 Delete API 옵션이 있습니다.
단계별 지침
1. AWS Management 콘솔에서, Services 를 클릭한 다음 Application Services
에서 API Gateway 를 선택하십시오.
2. 모듈 4 에서 작성한 API 를 선택하십시오.
3. Actions 드롭 다운 메뉴를 펼쳐서 Delete API 를 선택하십시오.
4. 메시지가 표시되면 API 이름을 입력하고 Delete API 를 선택하십시오.
2. 모듈 3 정리 방법
모듈 3 에서 작성한 AWS Lambda 함수, IAM 역할 및 Amazon DynamoDB 테이블
삭제
단계별 지침
Lambda Function
1. AWS Management 콘솔에서, Services 를 클릭한 다음 Compute 에서
Lambda 를 선택하십시오.
2. 모듈 3 에서 만든 RequestUnicorn 함수를 선택하십시오.
3. Actions 드롭 다운 메뉴에서, Delete function 을 선택하십시오.
4. 확인 메시지가 나타나면 Delete 를 선택하십시오.
IAM Role
1. AWS Management 콘솔에서, Services 를 클릭한 다음 Security, Identity &
Compliance 에서 IAM 을 선택하십시오.

33
2. 네비게이션 메뉴에서 Roles 을 선택하십시오.
3. WildRydesLambda 를 필터 입력칸에 넣으십시오.
4. 모듈 3 에서 작성한 역할(role)을 선택하십시오.
5. Role actions 드롭 다운 메뉴에서, Delete role 를 선택하십시오.
6. 확인 메시지가 나타나면 Yes, Delete 를 선택하십시오.
DynamoDB 테이블
1. AWS Management 콘솔에서 Services 를 클릭한 다음 Databases 에서
DynamoDB 를 선택하십시오.
2. 네비게이션 메뉴에서 Tables 를 선택하십시오.
3. 모듈 3 에서 생성한 Rides 테이블을 선택하십시오.
4. Actions 드롭 다운 메뉴에서 Delete table 을 선택하십시오.
5. Delete all CloudWatch alarms for this table 체크박스를 선택한 뒤에
Delete 를 선택하십시오.
3. 모듈 2 정리방법
제공된 AWS CloudFormation 템플릿을 사용해서 모듈 2 를 완성한 경우, AWS
CloudFormation 콘솔을 사용해서 스택을 삭제하기만 하면 됩니다. 그렇지 않다면,
모듈 2 에서 생성한 Amazon Cognito 사용자 풀을 삭제하십시오.
단계별 지침
1. AWS Management 콘솔에서 Services 를 클릭한 다음 Mobile Services 에서
Cognito 를 선택하십시오.
3. 모듈 2 에서 만든 WildRydes 를 선택합니다.
4. 페이지 오른쪽 위 모서리에 있는 Delete Pool 를 선택하십시오.
5. delete 를 입력하고 확인 메시지가 나타나면 Delete Pool 를 선택하십시오.
4. 모듈 1 정리방법

34
제공된 AWS CloudFormation 템플릿을 사용하려 모듈 1 을 완성한 경우, AWS
CloudFormation 콘솔을 사용하여 스택을 삭제하기만 하면 됩니다. 그렇지 않다면,
모듈 1 에서 생성한 Amazon S3 버킷을 삭제하십시오.
단계별 지침
1. AWS Management 콘솔에서 Services 를 선택한 다음 Storage 에서 S3 를
선택하십시오.
2. 모듈 1 에서 작성한 버킷을 선택하십시오.
3. Delete bucket 을 선택하십시오.
4. 확인 메시지가 나타나면 버킷의 이름을 입력하고 확인(confirm)을
선택하십시오.
5. CloudWatch Logs
AWS Lambda 는 Amazon CloudWatch Logs 에 함수당 새로운 로그 그룹을
자동으로 생성하고 함수가 호출 될 때마다 로그를 기록합니다. RequestUnicorn
함수에 대한 로그 그룹을 삭제해야합니다. 또한 CloudFormation 스택으로 만든
경우, 해당 스택에 사용자 정의 리소스와 연관된 로그 그룹이 있어야 삭제 할 수
있습니다.
단계별 지침
1. AWS Management 콘솔 에서 Services 를 클릭한 다음 Management Tools
에서 CloudWatch 를 선택하십시오.
2. 네비게이션 메뉴에서 Logs 를 선택하십시오.
3. /aws/lambda/RequestUnicorn 로그 그룹을 선택하십시오. 만약 계정에 로그
그룹이 여러개 있는 경우, 로그 그룹을 쉽게 찾으려면 Filter 입력칸에
/aws/lambda/RequestUnicorn 를 입력하면 됩니다.
4. Actions 드롭 다운 메뉴에서 Delete log group 를 선택하십시오.
5. 확인 메시지가 나타나면 Yes, Delete 를 선택하십시오.
6. 모듈을 완성하기 위해 CloudFormation 템플릿을 사용한 경우,
/aws/lambda/wildrydes-webapp 로 시작하는 모든 로그 그룹에 대해 3~5 단계를
반복하십시오.

AWS DevDay 실습 가이드 - 서버리스

More Related Content

What's hot

Viewers also liked

Similar to AWS DevDay 실습 가이드 - 서버리스

More from Amazon Web Services Korea

AWS DevDay 실습 가이드 - 서버리스