[React] AWS Amplify Hosting을 이용한 손쉬운 배포

프론트 개발을 하면서 사용자에게 웹에서 멋지고 좋은 기능들을 제공하기 위해 노력하는 것에만 집중하면 좋지만
실제로 개발을 하다보면 화면 개발 이외에 서버 운영, 배포 정책 등 프론트 개발 이외에도 신경 써야 할 부분들이 많이 있습니다.

AWS Amplify Hosting을 사용하면 비교적 쉽게 배포를 진행하실 수 있습니다.
또한 React에서 작업한 작업물을 메인 브런치에 머지할때마다 자동적으로 배포해주기 때문에 매번 운영서버에서 직접 빌드를 할 필요가 없어집니다.

github와  AWS Amplify Hosting을 사용하여 배포를 하는 과정이 얼마나 편해지는지 소개해 보도록 하겠습니다.

https://github.com/

GitHub: Where the world builds software

우선 깃헙에서 레파지토리를 생성하겠습니다.

위에 나온 git주소로 clone을 받아와서 Create React App을 이용하여 기본적인 리액트 프로젝트를 설치하고 push 하겠습니다.

git clone [repository주소]
npx create-react-app [project_name]
cd [project_name]
git add .
git commit -m "first commit"
git push

프로젝트 세팅이 마무리되었습니다.
바로 배포를 해보도록 하겠습니다.

https://aws.amazon.com/ko/amplify/hosting

AWS Amplify Hosting | 빠르고 안전한 웹 호스팅 | Amazon Web Services

해당 페이지로 들어간 뒤 웹 앱 호스팅 버튼을 클릭합니다.

깃헙 외에도 다른 서비스를 이용하여 배포하실 수 있습니다.
우선 깃헙을 선택해 줍니다.

깃헙에 로그인이 돼있는 경우 자동으로 권한 부여 여부를 물어보고 내 깃허브 내에 레파지토리를 가져올 수 있도록 세팅됩니다. 레파지토리를 선택하신 후 다음을 눌러줍니다.

자동으로 빌드 커맨드가 작성됩니다. 다음을 눌러 진행한 뒤 저장 및 배포 버튼을 클릭합니다.

amplify가 자동적으로 배포를 시작하였습니다. 

아래 master브런치를 클릭하시면 현재 빌드 진행상황과 도메인이 나온 것을 확인하실 수 있습니다.
빌드가 완료된 후 도메인을 클릭하시면 배포가 완료된 것을 확인하실 수 있습니다.

실제로 github와 aws계정만 있다면 배포까지 걸리는 시간은 5분에서 10분 정도면 충분합니다.
또한 개발 작업 진행 후 master 브런치로 push 할 때마다 자동적으로 배포되므로 상당히 편리합니다.
AWS에서 제공하는 Route53 서비스를 이용하시면 직접 도메인을 등록하실 수도 있습니다.