리액트 AWS 배포하기

Route53 호스팅 영역 생성

Route53 초기화면에서 호스팅 영역 생성


도메인 이름 작성 후 호스팅 영역 생성

NS 유형의 값/트래픽 라우팅 대상 총 4개의 값 확인 -> 가비아로 이동

가비아

마이페이지 이동 후 결제한 도메인 확인 -> 관리

NS 유형의 값/트래픽 라우팅 대상 총 4개의 값을 네임서버 1차~4차에 수정 & 작성
-> Route53 호스팅영역을 생성하면서 받은 값/트래픽 라우팅 대상 값 입력

React 빌드

개발중인 리액트 폴더구조

S3버킷에 담아줄 빌드파일을 생성할 명령어 실행

npm run build

S3버킷 생성

버킷 만들기

AWS 리전과 버킷 이름 지정 후 버킷 만들기(다른 항목은 건들이지 않음)

생성한 버킷에 build 파일 모두 업로드(폴더자체x, 각 파일별 업로드)

CloudFront 배포

배포 생성

Origin domain에 방금 만든 S3 버킷 선택, 원본 엑세스는 Legacy access identities 선택

새 OAI 생성을 눌러 원본 엑세스 ID를 발급 & 버킷 정책 예 선택

-> CloudFront가 해당 S3에 접근할 수 있도록

뷰어 선택

설정

대체 도메인 이름에 Route53에서 등록했던 도메인 이름 작성 후 SSL 인증서 요청 클릭

다음

도메인 이름 작성과 검증방법 DNS 검증-권장 선택 후 요청

발급 후 다시 돌아와 방금 발급받은 SSL 인증서 등록

마지막으로 기본값 루트 객체를 /index.html로 설정해주고 배포 생성을 클릭

Route 53 레코드 생성

Route53으로 돌아와 생성한 호스팅 영역 선택

레코드 생성

단순 라우팅 선택

단순 레코드 정의 선택

배포 마무리

레퍼런스
https://velog.io/@sunghun/react-S3-CloudFront-Route-53-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0#%EB%A0%88%ED%8D%BC%EB%9F%B0%EC%8A%A4