AWS Amplify를 통한 정적 페이지 배포

AWS의 Amplify를 이용하여 정적 페이지를 배포하는 방법과 몇 가지 추가 사용법을 간단히 소개합니다.

Amplify 자체는 웹 프론트엔드 뿐만 아니라, iOS/Android/React Native등 네이티브 앱, 간단한 데이터베이스, REST API 구성 등 모바일 서비스 개발에 필요한 AWS 제품들을 모아서 제공하는 서비스입니다. 구글의 Firebase나 최근에 자주 사용되는 Vercel, Netlify 등의 PaaS 서비스와 유사하다고 생각하면 됩니다.

기존에는 AWS에 정적 페이지 프로젝트를 배포하기 위해서 S3에 파일을 업로드하고, 이를 CloudFront를 이용해 CDN에 태우는 방법을 주로 사용했었습니다. 하지만 Amplify를 사용하면 여러 AWS 서비스에 일일이 접속하지 않고도 배포를 수행할 수 있어 빠르게 프론트엔드 CI/CD 환경을 구축하는 데에 적합하다는 생각이 들었습니다.

주요 기능

Git 저장소의 변경사항을 인지해서 자동으로 빌드

원격 Git 저장소에 push가 발생하면 자동으로 프론트엔드 프로젝트를 빌드 후 배포해줍니다. 브런치별/환경별로 여러 배포 작업을 동시에 빌드할 수 있습니다. 모노레포 저장소인 경우 저장소 내의 각각의 폴더별로 따로 빌드도 가능합니다. 팀 내에 정해진 브랜치 네이밍 규칙(feature/tab, feature/modal, ...)이 있는 경우 이를 패턴으로 Amplify에 등록하면, 저장소에 해당 패턴에 맞는 이름을 가진 브랜치가 추가되었을 때 Amplify에도 추가됩니다.

E2E 테스트

빌드가 완료되면 Cypress를 통해 자동으로 E2E 테스트를 수행하게 할 수 있습니다.

복수 도메인 설정, 자동 https 세팅

보유하고 있는 도메인을 배포 결과물에 연결할 수 있고 https 인증서도 자동으로 세팅됩니다. 기존 S3+Cloudfront에서 https를 세팅하려면 Certificate Manager에서 보유 도메인을 추가하는 절차를 거쳐야 했는데 이 역시도 Amplify 콘솔 안에서 모두 처리할 수 있습니다. 특히, 한 프로젝트에 브런치별로 복수 개의 도메인을 연결할 수도 있습니다.

간단한 백엔드 환경 구성 가능

인증(Authentication)과 데이터베이스 환경을 구성할 수 있습니다. 인증은 Firebase Auth와 비슷한 서비스이고, 데이터베이스는 간단한 데이터스키마를 모델링하고 이에 대한 CRUD를 가능하게 하는 REST API를 만들어 줍니다. Strapi 같은 Headless CMS와 비슷하다고 보면 될 것 같습니다. 또 이를 위한 별도의 관리 대시보드 페이지가 있어 AWS 계정이 없는 사용자도 이 대시보드를 통해 간단한 관리를 할 수 있다고 합니다.

기타

기본적인 환경 변수 설정, 배포한 페이지에 대한 여러 지표, 배포시 slack/이메일 알림 등을 지원합니다.

Next.js 프로젝트인 경우 SSR 배포도 지원

정적 사이트만을 배포할 수 있는 건 아닙니다. 특이하게도 Next.js로 만들어진 프로젝트의 경우 SSR을 지원합니다. SSR 프로젝트를 배포하면 실제로 서버가 항상 떠있는 것은 아니고 내부적으로 Lambda@Edge를 통해 들어오는 요청을 처리한다고 합니다. Vercel과 동일한 방식입니다.

비용

단점이라면 비용이 만만치 않습니다.

빌드는 분당 0.01 달러고, 프리티어 기간에 해당된다면 월별 1,000분까지 무료로 사용할 수 있습니다. 사실 데이터 전송 요금이 문제인데, 1기가에 0.15달러입니다. CloudFront만을 사용했을 때는 1기가당 0.12달러인데, Amplify는 약 30%가 더 비쌉니다.

실제 배포하기

먼저 콘솔에서 New App 버튼을 누르고, 정적 페이지를 배포할 것이므로 [Host web app]을 선택합니다.
Git Provider와 AWS 계정을 연결한 후 배포하고자 하는 저장소를 불러옵니다.
빌드 설정을 작성합니다. 대표적인 프레임워크의 설정은 대부분 자동으로 로드되는 듯 합니다.

배포 과정

앱이 등록되면 [브랜치 연결] 버튼을 눌러 여러 브랜치를 연결할 수 있습니다.

배포가 진행 중이면, 이를 실시간으로 볼 수 있습니다.

수동 배포

Amplify는 기본적으로 브랜치에 푸시가 되면 저절로 배포가 일어납니다. 하지만 때에 따라서 자동 배포를 끄고 싶을 때가 있는데, 문제는 자동 배포 옵션을 껐을 때 수동으로 배포하는 버튼이 AWS 콘솔 화면 상에는 없습니다.

자동 배포 끄기

자동 배포를 끄려면 Amplify 콘솔 - [앱 설정] - [일반] 메뉴의 하단 [브랜치] 영역에서 자동 배포를 끄고자 하는 브랜치를 선택하고 우측 상단 [작업] 메뉴에서 [Disable Auto Build]를 선택하면 됩니다.

자동 배포를 끈 상태에서 수동으로 배포 실행하기

현재 특정 브랜치에 대해 수동 배포를 실행하려면 Amplify Console에서 Webhook을 미리 세팅해둔뒤 이를 호출하거나, AWS CLI를 이용해야 합니다. AWS CLI를 통해 배포를 하려면 AWS CLI의 Amplify 명령 중 start-job을 이용합니다.

아래와 같은 명령으로 배포할 수 있습니다.

aws amplify start-job --job-type RELEASE --app-id 앱 ID --branch 브랜치명

참고로, [앱 ID]는 AWS CLI의 list-apps 명령에서 확인하거나, AWS Amplify에 접속한 후 브라우저 주소창에 표시되는 값으로 확인할 수 있습니다.

현재 진행되고 있는 배포 상황을 CLI를 이용해 보려면 아래와 같은 명령을 이용합니다.

aws amplify get-job --app-id 앱ID --branch 브랜치명 --job-id 작업 ID

[작업 ID]는 AWS CLI의 list-jobs를 통해 조회하거나, start-job을 명령을 실행한 직후 커맨드 라인에서 확인할 수 있습니다.