React 배포 (AWS CloudFront, Route 53)

• AWS 02. AWS React 배포 (IAM, S3) velog 이후에 CloudFront, Route 53 설정입니다.
• 만들어 놓은 미니 프로젝트로 진행 : 계란 요리 성격 유형 테스트 velog
• 최종 배포 사이트 : https://egg-mbti.net/

사용 AWS 서비스

ClodFront

• 글로벌 콘텐츠 전송 네트워크 (CDN) 서비스

• 사용자에게 최적의 성능, 고가용성 및 보안을 제공하면서 데이터, 동영상, 애플리케이션 및 API를 전세계에 안전하게 배포

• CloudFront를 사용하면 전세계 여러 위치에 있는 엣지 로케이션에 콘텐츠를 캐시하여 사용자에게 더 빠르게 콘텐츠를 제공

• 사용자는 자신에게 가장 가까운 위치에서 애플리케이션의 콘텐츠를 받아 볼 수 있어, 전송 시간이 단축되고 사용자 경험이 향상

• http 요청을 https로 리다이렉션 가능

Route 53

• 확장 가능하고 고가용성 및 안정성이 높은 도메인 이름 시스템 (DNS) 웹 서비스

• 도메인 등록 기능 제공

• 도메인을 등록하고, 이 도메인을 통해 사용자의 요청을 S3 버킷이나 CloudFront와 같은 리소스로 라우팅하는 기능을 제공

---

적용

1. Route 53 도메인 등록

Route 53 시작하기
도메인을 등록할 거기 때문에 도메인 등록 선택 후 시작하기 클릭

• 원하는 도메인 입력 후 검색
• 연간 11달러인 egg-mbti.net으로 진행
• 결재 진행 후 인적사항 입력 하고 구매 진행하면 등록 완료
• 등록 완료후 빠르면 1~2시간, 늦어도 반나절 혹은 24시간 안에 도메인 등록이 완료
• 도메인 등록 후 12시간 안에 도메인을 삭제하면 AWS 청구서에 호스팅 영역 요금이 발생하지 않음

2. CloudFront 설정

CloudFront 배포 생성 클릭

• S3로 배포한 원본 도메인 입력

• 뷰어 프로토콜 정책 Redirect HTTP to HTTPS로 설정

• 대체 도메인 입력 부분에 Route 53에 호스팅한 도메인 입력
• https 연결을 위해서는 SSL 인증서가 필요하므로 인증서 요청 진행

3. SSL 인증서 요청

• 도메인 이름 입력 후 요청 클릭
• 요청한 인증서 클릭 후 도메인 부분에서 Route 53에서 레코드 생성을 클릭해서 CNAME을 생성해야 함

• 어느정도 기다리면 검증 대기 중에서 발급됨으로 변경됨

• CloudFront로 이동해서 생성된 SSL 인증서를 선택
• 기본값 루트 객체에 index.html 입력 후 배포 생성 진행

오류 페이지 생성
아래와 같이 403, 404에 대한 오류 페이지를 만들어야 함
"사용자 정의 오류 응답 생성" 클릭

• 이미 만들어서 클릭이 되지 않지만 403, 404 2개를 하나씩 선택

• "오류 응답 사용자 정의"에서 "예" 클릭
• 응답 페이지 경로는 CRA 프로젝트의 경우 사진과 같이 작성 "/"는 앞에 무조건 붙여야 함

배포 후 무효화 생성을 해야 함

• 모든 경로에 무효화 생성을 위해 /* 처리

4. Route 53 A 레코드 추가

• CloudFront 주소와 Route 53으로 생성한 도메인을 연결하기 위해 Route 53에 A 레코드를 추가해야 함

• Route 53에서 도메인 선택 후 레코드 추가 클릭
• 별칭 활성화 해주고 트래픽 라우팅 대상에 CloudFront 배포에 대한 별칭 선택 후 레코드 생성
• 여기까지 진행하면 Route 53으로 설정한 도메인으로 접속이 가능