Side Project Journey - 2. AWS Amplify With Angular

사이드 프로젝트 여정 두 번째 이야기이다.

첫 번째 이야기는 SSO 를 다루어 보았다.

이번에는 Front 를 구현하고, CI/CD Pipeline 및 Infra 구성에 대해서 간략하게 정리해보려고 한다.

우선, 간단하게 프로젝트 Front 는 angular11 로 

my.new 루트 도메인을 가진 repository 한 개, shortcut.my.new 서브 도메인을 가진 repository 한 개로 두 개의 repository 이다.

처음 infra 구성은 S3 Static web hosting 과 CloudFront 구성을 취하려고 했었다. 하지만, 해당 구성을 취하는 과정에서 관리비용이 꽤나 큰 것을 느꼈다. 각가의 CI/CD pipeline 을 손수 구성해줘야 되었다.

예를 들어, Github Action 을 사용할 경우, 특정 브랜치 master 에 Pull Request 혹은 Push 가 발생할 경우, angular project 를 build 하고 artifact 를 aws cli 통해서 S3 에 put object 를 통해서 업로드 하고, CloudFront Invalidation 을 직접 구성해주어야 하며, Domain 연동도 Route 53 Record 및 SSL 인증서를 ACM 에 직접 발급받고, 도메인을 구입한 DNS Provider 에서 Record 설정을 꼼꼼하게 신경써야한다.

혼자서 사이드 프로젝트를 진행하면서 Front 뿐만 아니라, Back-end 도 개발 및 인프라 관리를 하기 때문에 관리 비용이 꽤나 크게 다가왔다.

그러던 도중에 AWS Amplify 라는 서비스를 이용해보았고, 굉장히 큰 도움이 되었다. AWS Amplify 에 대한 내용을 정리하기 전에 우선 간단하게 S3 Static website hosting 설정을 정리하겠다.

아래는 CloudFront 를 이용하여 S3 웹사이트 호스팅 방법에 관련한 안내서이다. 4가지 방법을 알려주고 있는데, 웹사이트 엔드 포인트를 오리진으로 사용하는 방법만 일단 간략하게 정리하겠다.

https://aws.amazon.com/ko/premiumsupport/knowledge-center/cloudfront-serve-static-website/

1. S3 Bucket Public Access 


2. Static Website Hosting 설정



3. S3 Bucket Policy
Resource 에 해당 Bucket 이름을 지정해주면 된다.

4. CORS ( Cross-Origin-Resource-Share ) 설정
Back-end 와의 통신이 필요할 경우에 설정해주면된다. CORS 에 대한 개념은 건너뛰겠다.


이와 같이 S3 Bucket Static website hosting 설정을 끝내면, 해당 S3 에 엔드포인트가 활성화되며, 엔드포인트로 접속시, 위에서 지정된 index.html 이 http 프로토콜을 통해서 serving 된다. 

이제 SSL 을 적용해야 한다. SSL 을 적용하기 위해서는 CloudFront Distribution 을 통해서 진행해야 된다. 기본 CloudFront 인증서를 사용할 경우, 아래와 같이 *.cloudfront.net 으로 distribution 이 생성된다. custom ssl 을 적용하기 위해서는 ACM 에 등록된 인증서를 사용해야 하며, CloudFront 를 사용하기 위해서는 버지니아 북부(us-east-1)에 생성된 인증서만 사용이 가능하다. 다른 Region 에 생성된 인증서는 CloudFront Distribution 설정이 불가능하다. 

https://aws.amazon.com/ko/premiumsupport/knowledge-center/install-ssl-cloudfront/




따라서, CloudFront SSL 적용을 위해서는 AWS Certificate Manager 를 통해서 인증서를 us-east-1 버지니아 북부 Region 에 발급받아야 한다. 인증서를 발급받는 과정에서는 DNS 인증과 Email 인증 중 선택할 수 있는데, 보통 DNS 인증을 진행한다. Email 인증의 경우 해당 도메인을 가진 Email 설정이 되어 있어야 해서 더욱 손이 간다. 따라서, 대개 DNS 인증을 진행한다. 

DNS 인증의 경우, AWS 에 발급한 CNAME 을 도메인을 구매한 DNS Provider 에 접속하여, Record 를 설정하면 AWS 에서 Record 설정을 확인하고 소유주 확인이 되며 인증서가 발급된다.

위에서 언급한 것 이외에 몇 가지 더 주의할 사항들이 있다. 예를 들어 S3 Bucket 이름을 사용하면 도메인 이름과 일치해야 하는 조건 등이 있다. 이처럼 많은 것을 직접 고려하면서 설정하기에는 꽤나 비용이 크다.

AWS Amplify 과 많은 비용을 아껴주었다.

소개 페이지에서 확인할 수 있듯이, 몇 번의 클릭으로 정적 웹 앱을 배포하고 관리 할 수 있다

Amplify 를 통해서 백엔드도 구성할 수 있다고 하지만, 백엔드는 Amplify 를 이용하지 않았다. 기회가 된다면 한 번 사용해보고 블로깅을 해야겠다.


Host web App 을 선택하면 아래와 같이 source code repository 를 선택할 수 있다.

나는 기존에 Github 권한을 연결했기 때문에 아래와 같은 화면이 나온다. 하지만 처음 사용한다면 OAuth2.0 프로토콜을 통해서 인증 절차를 진행해야 된다.

Amplify 의 매력을 느낀게 여러 포인트가 있지만 그 중 하나가 이부분이다. AWS repository code 를 분석해서 어떤 스택인지 감지하여서 build 파일을 생성해준다. 변경이 필요하다면 edit 을 통해서 추가 삭제가 가능하다.

마지막 단계에서 검토하고 저장 및 배포를 하면 *.amplify.com 도메인을 가진 서비스가 배포가 된다.

빌드 및 배포가 정상적으로 이루어지면 아래와 같이 https://*.amplify.com 도메인에 배포가 된다.


그리고 아래와 같이 스텝들을 가이드 해주며, custom domain 연동 및 SSL 적용 방법을 자세하게 가이드 해주기 때문에, 관리비용이 매우 줄어든다.
또한 특정 브랜치에 Push, Pull Request Merge 등 Hook 이 생성되어 감지하면 자동으로 Build 하고 Deploy 되기 때문에 정말 간편하면서 사용성이 좋다.

또한 특정 브랜치를 설정해서 test version 을 만들 수 도 있고, 환경 변수도 사용이 가능하며 활용 가능한 기능들이 많다. Amplify 를 통해서 SSL 을 적용하게 되면 ACM 에 자동으로 인증서가 만들어진다. 물론 인증서를 발급받는 과정에서 DNS 인증 과정은 해줘야 된다.

이번 글에서는 간략하게 Amplify 사용과 장점에 대해서 정리해보았다.

댓글

이 블로그의 인기 게시물

About JVM Warm up

About idempotent

About Kafka Basic

About ZGC

sneak peek jitpack

Spring Boot Actuator readiness, liveness probes on k8s

About Websocket minimize data size and data transfer cost on cloud

About G1 GC

대학생 코딩 과제 대행 java, python, oracle 네 번째