S3 스토리지
버킷 생성
먼저 S3에 들어가서 버킷을 만들어줍니다.
버킷 이름, 리전 선택
원하는 버킷명을 지어주고 AWS 리전은 아시아 태평양 서울을 선택해줍니다. 객체 소유권은 ACL 비활성화를 서택해줍니다.
퍼블릭 엑세스 차단 설정
퍼블릭 엑세스 차단을 활성화 한 상태로 넘어갑니다.(public으로 접근하는걸 막고 CloudFront로 접근하는것만 허용)
기타 사항
밑에 있는 사항들은 그대로 두고 버킷을 생성해줍니다.
빌드한 파일, 폴더 업로드
생성한 버킷에 들어가서 빌드한 파일과 폴더를 업로드 해줘야합니다.
vite로 생성한 리액트 프로젝트를 빌드하면 결과물이 dist폴더안에 담겨있습니다.
여기서 주의해야할 사항이 있는데 업로드할때 dist폴더를 통째로 업로드하는게 아니라 dist폴더안에 있는 파일과 폴더를 따로 올려줘야합니다!!
S3 스토리지 설정은 끝났고 이제 CloudFront 설정을 하면됩니다.
CloudFront
배포 생성
CloudFront에 들어가서 배포 생성을 해줍니다.
원본 도메인에 S3에서 생성한 버킷을 선택해서 클릭합니다.
원본 엑세스 설정
원본 엑세스 제어 설정을 선택한 후 제어 설정 생성을 눌러줍니다. 제어 설정 생성창이 나올텐데 확인하고 생성버튼을 누르면 됩니다.
S3 버킷 정책 업데이트는 배포후 설정하는것이라 지금은 넘어가면됩니다.
Origin Shield 활성화
Origin shield 활성화를 해주고 리전은 아시아 태평양(서울)로 선택해줍니다.
기본 캐시 동작 설정
기본 캐시 동작에서 뷰어 프로토콜 정책을 Redirect HTTP to HTTPS를 선택해줍니다.
나머지 사항들은 그대로 두고 함수 연결도 그대로 두고 넘어갑니다.
웹 어플리케이션 방화벽은 비활성화를 선택하고 넘어갑니다.
기본값 루트 객체 설정
설정칸에서 나머지는 그대로 두고 루트 객체에 index.html을 넣어줍니다.
/index.html이 아니고 index.html만 넣어주면됩니다.
마쳤으면 배포해주면 됩니다.
버킷 정책 업데이트
생성하고 나면 화면 위에 노란색 창이 나오는데 버킷 정책을 업데이트를 하라고 나옵니다.
이때 오른쪽에 있는 정책 복사를 클릭하고 생성한 s3 버킷에 들어가 권한탭에서 버킷정책에다가 붙여넣기하고 저장하면 됩니다.
사용자 정의 오류 응답 생성
CloudFront로 돌아와서 배포페이지에 들어가서 오류페이지 탭에 들어가서 사용자 정의 오류 응답 생성을 해줍니다.
두개를 만들어줘야하는데 403, 404 에러 설정을 해줘야합니다.
HTTP 오류 코드만 403, 404 따로 설정하고 응답페이지 경로, HTTP 응답코드는 같은 값을 넣어주면됩니다.
이걸 설정해주는 이유는 CSR 방식의 프로젝트를 CloudFront로 배포를 하게 되면 403/404에러가 발생하는데 이는 React는 react-router-dom을 사용해서 새로고침 대신 서비스 내에서 redirect를 발생시키는데 CloudFront는 redirect를 에러로 처리하기 때문이라고 합니다.
추가사항
만약 이렇게 설정하고도 안된다면 배포한 CloudFront에 들어가서 무효화 탭에서 객체 경로 추가에 /* 넣고 무효화 생성을 하고 좀 있다가 들어가면 해결됩니다.
배포 끝!!!
설정을 완료했고 해당 배포 도메인 주소를 복사해서 url창에 넣으면 여러분들이 올려놓은 프로젝트가 화면에 나옵니다~~!
도움이 됐다면 댓글, ❤️
상세한 설명 감사합니다!