AWS Amplify / Cloudformation / S3 로 웹 어플리케이션 배포

AWS Amplify란?

AWS Amplify는 프런트엔드 웹 및 모바일 개발자가 애플리케이션을 추가적으로 사용자 지정하기 위해 다양한 AWS 서비스를 활용하는 유연성을 바탕으로 AWS에 풀스택 애플리케이션을 쉽고 빠르게 구축할 수 있도록 지원하는 특별히 제작된 도구와 서비스 집합입니다. Amplify는 웹 앱의 경우 JavaScript, React, Angular, Vue, Next.js를 비롯한 널리 사용되는 언어, 프레임워크 및 플랫폼을 지원하고 모바일 앱의 경우 Android, iOS, React Native, Ionic, Flutter를 지원합니다.

 

AWS Amplify 공식 문서에 의하면 위와 같다. 결론적으로, 이용자가 힘들게 개별적으로 세팅 하고 연결할 필요없게, CLI로 명령어 몇개만 입력하면 자동으로 웹 어플리케이션 배포에 필요한 여러 AWS 서비스를 연결해주는 것이다.

 

 

웹 어플리케이션이 AWS Amplify에 배포된 모습이다

 

세팅 방법은 간단하다. 우선 Administration Full Access 권한을 가진 IAM role 한개를 생성하여, .pem 파일을 로컬에 다운로드 받는다. 로컬에 AWS CLI를 설치한 뒤 (pip로 설치가능), profile을 set 하면 된다. 공식문서에서 단계별로 안내가 되어있어서 그대로 따라하기만 하면 된다. 

 

 

 

[ Configuring the AWS CLI ]  https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html

 

 

세팅이 완료가 되면,

 

amplify auth add

amplify push

 

명령어만 순서대로 입력하면 자동으로 amplify가 모든 설정을 하고 배포를 해준다. AWS Amplify가 없었다면 CodePipeline, EC2, S3 등 여러 서비스를 모두 수동으로 연결해야 했을 것이다. 

 

 

 

---

 

AWS Cloudfront란?

Amazon CloudFront는 .html, .css, .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스입니다. CloudFront는 엣지 로케이션이라고 하는 데이터 센터의 전 세계 네트워크를 통해 콘텐츠를 제공합니다. CloudFront를 통해 서비스하는 콘텐츠를 사용자가 요청하면 지연 시간이 가장 낮은 엣지 로케이션으로 요청이 라우팅되므로 가능한 최고의 성능으로 콘텐츠가 제공됩니다.

 

S3 Bucket에 업로드한 파일을 웹 어플리케이션에서 출력하려고 할 때, 웹 어플리케이션 자체는 S3에 접근권한이 없기 때문에 Null값을 불러오는 문제에 직면했다. S3 Bucket을 Public으로 돌리는 방법도 있지만, 여러모로 문제가 생길 수 있는 방법이기 때문에 권한이 없는 모든 사용자가 특정 영상만 조회할 수 있도록 정적파일을 "재배포"해주는 Cloudfront의 Cloudformation을 이용하기로 했다.

 

Cloudfront의 작동원리

 

 

추상적인 Cloudfront의 개념을 돕기 위한 이미지다. Origin Access Identity(OAI)의 기능이 있는 Cloudfront의 특성을 이용하여 S3의 내용물에 접근하기 위한 Access Point를 Cloudfront에 등록된 웹 어플리케이션의 도메인 네임으로 하여, 일반 유저들도 파일에 접근을 할 수 있게됩니다.

 

 

웹 어플리케이션에서 영상이 정상적으로 조회가 된다

 

위와 같이 AWS권한이 없는 일반 유저도 파일 접근이 가능해진다.