S3 버킷 만들기
고유한 버킷 이름을 설정한 후, 나머지 설정은 기본 세팅으로 건들지 않고 버킷 만들기를 누른다.
S3에 빌드 파일 업로드
나는 vite로 react 프로젝트를 생성했기 때문에 dist라는 build 파일들이 생성되었다.
(Create-React-App 으로 생성하며녀 build라는 이름의 폴더가 생성될 것이다.)
이 dist 폴더의 파일들을 모두 업로드 해준다.
버킷 정책 설정하기
만들어둔 버킷에 권한으로 가서 버킷 정책을 편집한다.
정책 생성기를 눌러 정책을 생성한다 (버킷 ARN 복사해두기)
모두 입력한 후에 Add Statement 를 클릭 , 후에 Generate Policy 를 클릭하면
이러한 코드가 나오는데 이걸 복사 한 후에
그대로 붙여넣으면 된다. 변경사항 저장을 누르면 정책 작성이 완료.!!
S3 정적 호스팅 설정
버킷을 정적 웹 사이트 호스팅용으로 만들기 위한 작업이다.
완료 후 브라우저에 url을 쳐보면 index.html이 호스팅 되는 걸 확인할 수 있다.
Route 53 으로 커스텀 도메인 생성
나는 가비아에서 도메인을 구입하였고, 그 도메인을 등록해주려고 한다.
Route 53에서 호스팅 영역 > 호스팅 영역 생성을 클릭해준다.
구매한 도메인을 도메인 이름에 적어주고 호스팅 영역 생성 버튼을 클릭한다.
그러면 이렇게 레코드가 생성된다.
여기서 유형 NS에 해당하는 값 네개를 가비아 네임서버 1,2,3,4차에 맨 뒤 .(점) 을 각각 지우고 등록해준다.
CloudFront 배포 생성
CloudFrontsms AWS에서 제공하는 콘텐츠 전송 네트워크 (CDN ) 서비스 이다.
전 세계 여러 위치에 있는 엣지(Edge)서버를 통해 사용자에게 콘텐츠를 빠르고 안전하게 전달한다.
주로 웹 사이트, 애플리케이션, 영상 스트리밍, API 콘텐츠의 전송 속도와 성능을 최적화하는 데 사용된다.
CloudFront 에서 새 배포 생성을 클릭한다.
원본 도메인을 위에서 만든 S3버킷으로 하고,
새 OAI 생성을 클릭해서 디폴트로 생성되는 값을 생성한다.
HTTP 로 접속하면 모두 HTTPS 로 리다이렉팅 시키도록 뷰어 프로토콜 정책을 변경한다.
대체 도메인 이름에 구매한 커스텀 도메인을 넣어준다.
SSL 인증서가 없다면 인증서 요청을 클릭해서 새로 발급받는다.
완전히 정규화된 도메인 이름에는 구매한 도매인을 넣어준다.
인증서 요청을 완료 한 후, 인증서 상세보기 화면에서 Route 53에서 레코드 생성 버튼을 눌러준다. (Route 53에 CNAME 레코드가 추가된다)
3-5분정도 지나면 상태가 발급됨으로 바뀌고, 인증서 선택에 인증서가 추가된다
기본값 루트를 /index.html 로 설정하고 배포 생성을 마무리한다.
정적 웹사이트를 배포하는 것이기 때문에 리액트 앱이 실행될 때 가장 먼저 읽어들이는 파일인 index.html을 항상 읽도록 해야한다.
Route 53 레코드 생성
배포된 CloudFront로 라우팅이 될 수 있도록 레코드를 생성한다.
위에서 등록한 커스텀 도메인에서 레코드 생성을 클릭한다.
빠른 생성으로 되어있다면 마법사로 전환을 클릭 > 단순 라우팅으로 선택해준다.
단순 레코드 정의를 클릭한다.
레코드 이름 뒷부분이 커스텀 도메인으로 설정되어있는지 확인하고, 값/트래픽 라우팅 대상을 CloudFront 배포에 대한 별칭으로 선택한 뒤 배포된 CloudFront를 선택한 후 단순 레코드 정의를 클릭하여 마무리한다.
React에서는 react-router-dom을 이용해 라우팅을 하는데, 이 때문에 특정 route로 접속했을 때 403, 404에러가 발생한다.
403, 404 각각의 오류에 대해 응답 페이지 경로를 /index.html로 설정해준다.
이제 커스텀 도메인으로 접속했을 때 잘 작동하는 것을 확인할 수 있다.
