AWS S3에 React 프로젝트 배포 하기 (s3 + Cloudfront)

카테고리 없음

DevilFront 2023. 12. 8. 11:54

현 회사에서 ECS, EC2 를 이용한 클라쪽 프로젝트 배포가 어찌보면 일상화가 되어 있었는데

새로운 방법으로 해보고 싶어서 s3로 배포를 해보면 어떨까 하고 문서를 찾아보며 배포해보게 되었다.

애초에 관련한 문서는 다 많았지만 현 날짜 기준 바뀐 인터페이스에 관해서는 별로 문서가 많지 않았다.

우선 원리는 간단하다.

React 빌드 -> s3 버킷 생성 후 업로드 -> cloudfront 설정 후 배포 -> cloudfront 대체 도메인 후이즈 도메인 네임서버에 연결

내가 직접 했던 과정을 스크린샷을 겸해가며 작성해보겠다 < 2023 12월 기준 UI 인터페이스 >

1. 리액트 파일 빌드

2. s3 버킷 생성

퍼블릭 세팅 풀어주고 사진 항목 체크

3. 생성된 s3에 빌드 폴더 및 빌드된 파일 전부 업로드 (aws cli 이용할 수도 있다 기타 다른 문서 찾아보면 나옴)

업로드 후 버킷 속성 탭 하단 정적 웹 사이트 호스팅 세팅

4. cloudfront 설정 및 배포

여기서 중요 !!

위와 같이 기존에 생성한 s3 버킷 도메인을 입력하면 aws 자체적으로 웹 사이트 전용인것을 인지 해 위와같은 문구를 띄우며 사용하기를 권하는데 내가 했던 방식은 선택하지 않고 밑에 원본 액세스 설정을 하는 것인데

위처럼 원본 엑세스 제어 설정 을 선택하고 제어 설정 생성을 들어가서 기본값으로 하나 생성해주고

위 메세지와 같이 나중에 s3 버킷 정책을 업데이트 해야 하는데 우선 나중단계에서 하고

아래 여러 세팅들은 본인들 세팅에 맞게 설정해주고

이 곳에 본인들이 사용할 도메인 적어주면 되고 필자는 후이즈에서 발급받은 커스텀도메인을 썼다.

배포를 완료해준다.

여기서 원본 탭으로 들어가서 편집을 들어가면

이렇게 친절하게 되어 있을 것이다. 복사 후 버킷 권한으로 이동을 눌러준 뒤 s3 버킷 정책 설정 json 파일을 바꿔주면 된다.

6. 후이즈 네임서버에 cloudfront 대체 도메인 연결해주기

하면 끝났다.

하지만 여기서 갈리는게 테스트해보지는 않았지만

4단계에서 웹사이트 엔드포인트 사용 을 누르고 이용했다면 6단계 네임서버에서 연결해줄때 cloudfront 대체도메인 대신 s3 엔드포인트를 넣으면 됐을것 같다.

나중에 시간이 나서 테스트해볼수 있다면 그에 따른 결과도 작성해보겠다.

현재 최신 버전에서 s3에 리액트 프로젝트를 어떻게 설정하는지 참고하면 좋을것 같다.