본 포스트에서는 AWS의 S3, Cloudfront, Route53, 그리고 직접 구매한 도메인 주소를 활용하여 react 기반 프로젝트를 배포하는 과정을 정리하였습니다.
해당 과정을 완료하면 https://atipsynight.site/ 과 같이 직접 만든 리액트 프로젝트를 구매한 "https://" 로 시작하는 도메인 주소를 통해 접근할 수 있게 됩니다.
전체 구조
전체 구조를 도식하여 나타내면 다음과 같습니다. 간단히 설명하면,
1) S3 bucket 이라는 저장소에 우리의 프로젝트를 정적 호스팅(≒ 보여줄 리액트 빌드를 업로드) 하고,
2) CloudFront 를 활용하여 S3 bucket에 업로드된 정적 파일들을 더 빠르게, https로 제공할 수 있도록 하며,
3) 이 때 추가적으로 Certificate Manager에서 HTTPS 인증서를 설정하여 내 도메인을 활용하여 안전한 https:// 주소를 제공해주고,
4) 이 과정에서 DNS 서비스인 Route 53을 통해 구매한 도메인 주소를 CloudFront와 연결해 줄 것입니다.
1. S3 bucket에 빌드 파일 올리기
- S3 bucket 만들기
S3 탭에서 Create bucket(버킷 만들기) 클릭
기본 설정대로 버킷 만들기를 클릭하여 버킷을 만듭니다. 우리는 S3을 직접 통하는 게 아니고 Cloudfront를 통해 접근하도록 할 것이기 때문에, 모든 퍼블릿 액세스 차단으로 두고 버킷을 만듭니다.
- 정적 호스팅 설정
다음과 같이 버킷 탭에 버킷이 생긴 것을 확인할 수 있습니다. 해당 버킷을 클릭하여
속성 탭에 들어가서 정적 웹 사이트 호스팅 편집에 들어갑니다.
그 뒤, 다음과 같이 설정합니다.
정적 웹 사이트 호스팅: 활성화
호스팅 유형: 정적 웹 사이트 호스팅
인덱스 문서: index.html
오류 문서: index.html
인덱스 문서는 맨 처음 기본으로 보여줄 view를 설정하고, 오류 문서에는 에러 페이지를 지정합니다. 본인의 애플리케이션에 구현에 맞추어 적절히 수정합니다.
이제, 우리의 리액트 프로젝트를 빌드하여 버킷에 업로드합니다.
리액트 프로젝트에서 다음 명령어를 활용하여 빌드합니다.
yarn build버킷의 객체 란에 들어가서 드래그 혹은 업로드 버튼을 통해 빌드 폴더를 업로드합니다.
요런식으로 빌드된 파일들을 넣으면 됩니다.
여기까지 하면 S3 bucket 설정은 끝났습니다. 확인을 위해 버킷의 권한 탭에 들어가서 아까 만들 때 설정했던 모든 퍼블릭 엑세스 차단을 잠시 해제한 뒤 속성 탭의 하단에 나와 있는 버킷 웹 사이트 엔드포인트로 접속해보면, 우리의 웹 페이지가 정적 호스팅되고 있는 것을 확인할 수 있습니다! (확인 후 다시 엑세스는 차단해주세요)
2. Route 53 호스팅 영역 생성하기
먼저, https://www.gabia.com/ 에서 원하는 도메인 주소를 하나 구매합시다.
suffix에 따라 1년간 1천원 미만의 금액으로 구매할 수 있는 주소들이 있으므로, 실습용이라면 이런 것들을 활용해보도록 합시다.
.site 같은 게 적당히 멋있고 가격도 괜찮네요
Route 53-호스팅 영역 탭에서 호스팅 영역 생성을 클릭합니다. 
도메인 이름에 구매한 도메인 주소를 입력하고, 퍼블릭 호스팅 영역 유형으로 생성합니다.
생성된 호스팅 영역을 확인해 보면 다음과 같이 NS 유형에 4개의 값이 존재하는데, 이를 가비아 도메인에 등록해 줄 것입니다. 가비아의 도메인 관리 상세 페이지에 보면 네임서버 설정 란이 있는데, 이 곳의 1차~4차에 저 4개의 값을 하나씩 넣어주고, 저장합니다.
다음 글에서는 이번에 만든 S3 버킷과 Route53 호스팅 영역을 활용하여, CloudFront로 배포를 생성하는 과정을 이어가보도록 하겠습니다.
