Plog의 프론트엔드 배포 수단으로 AWS Amplify를 선택한 이유
프론트엔드 배포 방법
프론트엔드 페이지를 배포하는 방법은 여러 가지가 있겠지만 가장 일반적인 방법은 아래와 같습니다.
- GitHub Pages를 이용한 배포
- github pages의 기능을 이용하여 배포하는 방식입니다. github에 있는 프로젝트 설정에서 Pages에서 배포할 branch를 설정한 후,url 주소를 이용하여 접속할 수 있습니다.
- Netlify를 이용한 배포
- Netlify는 정적 사이트를 무료로 호스팅해주는 서비스로, GitHub, GitLab, Bitbucket과 같은 저장소와 연동하여 자동 배포를 지원합니다. 프로젝트를 저장소에 업로드한 후, Netlify에서 연동하면 됩니다.
- Netlify는 기본적으로 React 앱을 자동으로 감지하고 빌드 설정을 수행하기 때문에 대부분 별다른 설정이 필요하지 않습니다.
- 자동 배포를 설정할 수 있어, 저장소에 변경이 있을 때마다 자동으로 빌드합니다.
- nginx를 이용한 배포
- react 빌드 결과의 정적 리소스 파일을 nginx와 연결하여 배포합니다.
- Firebase를 이용한 배포
- Firebase는 Google이 제공하는 개발 플랫폼입니다. 그 중 Firebase Hosting을 통해 정적, 동적 컨텐츠를 쉽게 배포할 수 있습니다.
하지만 1번과 2번의 방법은 저희가 원하는 배포 방법으로 고려 대상이 아니었습니다.
nginx의 경우 직접 세팅을 해주어야하며 비교적 설정이 복잡했습니다. 서버나 배포에 대한 경험과 지식이 적은 제게는 진입장벽이 다소 높았습니다.
Firebase와 AWS같은 서비스를 이용해보고 싶은 마음이 있었기에 배포 방법은 어느정도 답이 정해져있었습니다.
사용해 본 경험이 없는 AWS를 이용해보기로 결정했습니다.
AWS?
AWS는 아마존닷컴이 제공하는 클라우드 컴퓨팅 플랫폼입니다. AWS는 다양한 클라우드 서비스를 제공하여 개발자와 기업이 IT 인프라를 구축, 관리, 확장할 수 있도록 도와줍니다. 여기에는 컴퓨팅 파워, 데이터베이스 스토리지, 컨텐츠 전송 및 기타 다양한 기능이 포함되어 있습니다. 기존 클라우드 서비스와 달리, AWS에서는 고정적인 월정액 사용료가 아닌 사용자가 실제로 사용한 금액만 지불하면 된다는 장점이 있습니다.
프론트엔드 배포 시 사용할 수 있는 서비스로는 Amazon S3와 AWS Amplity 두 개 정도로 요약할 수 있었습니다.
Amazon S3란?
S3 AWS의 가장 초기 서비스 중 하나로, AWS에서 제공하는 스토리지 서비스입니다.아마존 홈페이지에서는 S3를 아래와 같이 소개하고 있었습니다.
- Amazon S3는 업계 최고의 확장성, 데이터 가용성 및 보안과 성능을 제공하는 객체 스토리지 서비스입니다.
- 데이터 레이크, 웹사이트, 클라우드 네이티브 애플리케이션, 백업, 아카이브, 기계 학습 및 분석과 같은 다양한 사용 사례에 대해 원하는 양의 데이터를 저장하고 보호합니다.
- Amazon S3는 99.999999999%의 내구성을 제공하도록 설계되었으며, 전 세계 수백만 고객을 위해 데이터를 저장합니다.
S3를 배포할 때 쓰는 서비스정도로만 알고 있었는데 찾아보니 많은 기능의 일부였습니다. S3를 통해 웹 호스팅 및 정적 웹 사이트 호스팅은 물론 데이터 전송 및 배포 그리고 백업과 복원, 데이터 저장이 가능한 다용도 서비스였습니다.
하지만, S3를 이용해 프론트엔드 호스팅을 하기 위해서는 AWS의 다양한 서비스를 요리조리 조합하여 사용할 필요가 있었습니다.
AWS Amplify란?
AWS Amplify는 AWS 리소스들을 이용하여 손쉽게 호스팅, 배포까지 개발하도록 돕는 서비스의 모음입니다.
여기에는 클라이언트 앱 개발을 위한 종합적인 SDK, 라이브러리, 도구 및 설명서가 같이 포함되어 있습니다.
JavaScript, React, Angular, Vue, Next.js 등의 널리 사용되는 웹 프레임워크와 대부분의 모바일 플랫폼을 지원합니다.
Amplify에서 호스팅만 하면 자동으로 S3에 업로드되어 배포까지 가능합니다.
라우팅의 경우 Route53을 이용하여 직접 설정해야했지만 그 외의 다른 부분은 프로젝트만 생성한다면 자동으로 해결해주어 S3와 비교할 때 훨씬 간편합니다. AWS Amplify는 프론트코드를 배포할 때 내부적으로 S3와 CloudFront 를 이용하여 호스팅 합니다. 빌드 후에 S3로 파일 업로드 → CloudFront 까지 업데이트 시켜줍니다. 같은 파일로 새로운 빌드를 진행할때는 버저닝을 하고 버전이 달라지면, 새로 업로드를 진행합니다
채택 이유
- Amplify Console App을 생성하는 절차가 간편하며 Amplify는 지속적 배포 서비스이기 때문에 배포 과정이 간단한 편입니다. 직접 사용해본 결과 예상보다 더 쉽고 간편했습니다. Amplify 콘솔에서 시키는대로 저장소의 repository를 연결하면 됩니다.
- SSL 인증서 적용과 Custom Domain 설정 역시 매우 간단하게 할 수 있었습니다.
- 지정한 Branch에 Pull Request를 생성하면 해당 Pull Request에 대한 독립적인 호스팅 환경이 만들어집니다.
- 아울러 Amplify Console Previewr기능을 통해 직접 실행해보지 않고도 배포 화면을 확인할 수 있다는 장점도 크게 다가왔습니다.
- 백엔드 역시 AWS를 사용하여 배포하고 있기 때문에 프론트도 같은 서비스를 사용하는 것이 효율적이라고 판단하였습니다.