사용자 인증이 가능한 서버리스 웹 어플리케이션 구축 (1) AWS Amplify를 활용한 정적 웹 사이트 호스팅

AWS Cognito란?

유저 계정 관리 및 토큰 관리를 통한 자격 증명을 제공해주는 AWS 서비스이다. 사용자는 직접 ID와 비밀번호를 통해 로그인하거나 Facebook, Google 또는 Apple과 같은 타사를 통해 로그인할 수 있다.

 

AWS Cognito 구성 요소

• User Pool(사용자 풀): 앱 사용자의 가입 및 로그인 옵션을 제공하는 사용자 디렉터리
• Identity Pool(자격 증명 풀): 사용자에게 기타 AWS 서비스에 엑세스할 수 있는 권한을 부여한다. 즉, AWS 내의 서비스에 접근하기 위한 토큰 생성 기능을 담당하며 토큰은 JWT 기반이다.

이미지 출처는 AWS Cognito 공식 문서이다.

 

프로젝트 구성도

사용자 인증이 가능한 서버리스 웹 어플리케이션 구성도

1. Client는 Web Browser를 사용하여 AWS Amplify의 정적 페이지를 요청한다.

2. Client가 회원가입을 요청하면 AWS Cognito에 의해 인증 과정을 거쳐 회원가입이 완료된다.

3. 회원가입이 완료된 사용자는 로그인을 시도하면 Cognito에 의해 로그인이 가능하다.

4. 로그인한 사용자만 이용할 수 있는 동적 페이지를 API Gateway로 호출한다. 즉, API Gateway는 AWS Cognito 사용자 풀에 의해 보호된다.

5. API Gateway가 호출 되면 Lambda 함수가 트리거되며 DynamoDB  테이블에 요청을 기록하고 디스패치된 unicorn에 대한 세부 정보를 프런트 엔드 애플리케이션에 반환한다.

 

구축 과정

1. AWS Amplify를 활용한 정적 웹 사이트 호스팅

1.1 CodeCommit 리포지토리 생성 및 연동

CodeCommit 콘솔에서 리포지터리를 생성한다.

이름과 태그를 원하는대로 지정하고 생성한다.

IAM 콘솔에서 구성을 진행할 사용자 계정을 클릭한다.

SSH 퍼블릭 키 업로드를 클릭하고 아래 사진처럼 공개키 값을 확인하여 넣어준다.

cmder에서 공개키, 비밀키를 생성하고 공개키 값을 확인한다.

이와 같이 설정하면 git을 이용하여 CodeCommit 레포지토리에 엑세스할 수 있게 된다.

.ssh 경로에 config 파일을 생성하고 위와 같이 작성한다. User 값은 IAM 바로 위 사진에서처럼 확인가능하다.

설정을 마치고 git clone 명령어를 사용하여 CodeCommit의 리포지토리와 연동한다.

만약 CodeCommit 리포지토리 연동에 대한 상세 내용이 필요할 경우 아래의 링크 참조

https://cumulus.tistory.com/10?category=953833 

 

1.2 AWS CLI 설치 및 설정

이번 실습에서 정적 웹 사이트 구성 파일을 AWS 자습서에서 S3로 제공하는 파일을 내려받을 것이므로 AWS CLI 사용이 반드시 필요하다.

AWS 공식 문서를 통해 해당 링크에 접속하여 AWS CLI 설치 파일을 다운 받는다.

https://awscli.amazonaws.com/AWSCLIV2.msi (AWS CLI 설치 링크)

설치 파일을 사용하여 AWS CLI를 설치한다.

 

설치를 완료하고 aws --version을 입력해보면 버전 정보가 출력된다.

다시 IAM 콘솔에서 CodeCommit을 사용하는 동일한 계정에 엑세스키 만들기를 클릭한다.

엑세스키를 생성하면 위와 같이 엑세스 키 ID와 비밀 엑세스 키가 출력된다. 반드시 본인만 알고 기억하도록 한다.

aws configure 명령어를 입력하고 엑세스 키 ID와 비밀 엑세스 키 값을 차례로 넣어준다.

1.3 정적 웹 사이트(AWS 자습서 제공) 구성 내려받기 및  CodeCommit 리포지터리로 업로드

aws s3 cp://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --reculsive
git add .
git commit -m “WEB”
git push -u origin master

cmder 에서 위 명령어를 차례대로 입력한다.

AWS 자습서에서 제공하는 웹 사이트를 위 명령어를 통해 로컬 저장소로 내려받는다.

내려 받은 정적 웹 페이지 구성을 커밋하여 CodeCommit의 리포지토리로 업로드한다.

업로드가 완료되면 CodeCommit의 리포지토리에 위와 같이 업로드 된 것을 확인할 수 있다.

1.4 AWS Amplify를 사용하여 정적 웹 애플리케이션 호스팅 활성화

AWS Amplify 콘솔에서 Host web app을 클릭한다.

AWS CodeCommit을 이욯아여 웹 애플리케이션을 배포한다.

리포지토리를 선택하고 브랜치를 선택한 뒤 다음으로 넘어간다.

앱 이름을 설정하고 다음으로 넘어간다.

마지막으로 검토하고 저장 및 배포를 진행한다.

몇 분내로 웹 애플리케이션이 배포된다.

1.5 정적 웹 호스팅 테스트

테스트를 위해 로컬에 있는 index.html에서 title 태그를 위와 같이 수정한다.

git을 사용하여 커밋을 진행하고 리포지토리로 수정사항을 업로드한다.

AWS Amplify에 의해 생성된 웹 어플리케이션에 접속해보면 title이 수정한대로 바뀐 것을 볼 수 있다.

출처

<AWS Cognito 공식 문서>

Amazon Cognito 란? - Amazon Cognito

<AWS 자습서 링크>

AWS Lambda, Amazon API Gateway, Amazon S3, Amazon DynamoDB, Amazon Cognito를 사용하여 서버리스 웹 애플리케이션을 빌드하는 방법 | AWS