AWS S3에 프로젝트 배포하기

리액트(React) 프로젝트를 AWS S3에 배포하면 정적 웹 사이트를 간단하고 효율적으로 배포 가능합니다. 이번에는 리액트 프로젝트를 배포 하던 방식에 대해 알아보고 더 나아가 Github Action을 통해 자동화 프로세스를 만들어 보겠습니다.

먼저 S3로 장점에 대해 알아보고 리액트 프로젝트를 배포하는 방법을 확인해 보겠습니다.

다양한 스토리지 클래스 제공 : 자주 사용하지 않는 파일을 위한 Glacier, 비용 절감을 위한 Intelligent-Tiering 등 다양한 스토리지 옵션을 제공합니다.

다양한 AWS 서비스와의 연동 : CloudFront, Route 53, Lambda 등 AWS의 다른 서비스와 연계하여 완벽한 웹 호스팅 솔루션을 구축할 수 있습니다.

AWS에 접속해 S3를 검색해 해당 페이지로 들어오면 아래 이미지와 같은 화면이 보입니다.

먼저 해당 페이지에서 버킷 만들기를 클릭합니다.

버킷 만들기를 클릭해 아래 이미지와 같은 페이지가 보인다면 버킷 이름을 작성하고 객체소유권에 대한 설정을 해줍니다.

💡

ACL 비활성화됨(권장)

버킷 소유자 적용(기본값) – ACL이 비활성화되고 버킷 소유자는 버킷의 모든 객체를 자동으로 소유하고 완전히 제어합니다. ACL은 더 이상 S3 버킷의 데이터에 대한 권한에 영향을 주지 않습니다. 버킷은 정책을 사용하여 액세스 제어를 정의합니다.

ACL 활성화됨

버킷 소유자 기본(Bucket owner preferred) – 버킷 소유자가 bucket-owner-full-control 미리 제공 ACL을 사용하여 다른 계정이 버킷에 작성하는 새 객체를 소유하고 완전히 제어합니다.

객체 작성자(Object writer) – 객체를 업로드하는 AWS 계정은 객체를 소유하고 완전히 제어하며 ACL을 통해 다른 사용자에게 이에 대한 액세스 권한을 부여할 수 있습니다.

그 다음 버킷 퍼블릭 액세스 차단 설정을 해제하고 경고문에 대해

현재 설정으로 인해 이 버킷과 그 안에 포함된 객체가 퍼블릭 상태가 될 수 있음을 알고 있습니다.

를 체크합니다. 그 이후에 버킷 만들기를 눌러 버킷을 생성합니다.

위에 내용이 완료되었다면 버킷 생성은 완료된 것입니다. 이제 웹 사이트 호스팅을 위해 버킷 속성을 설정해야 합니다. 먼저 생성한 버킷을 클릭한 후 속성 탭을 눌러줍니다.

속성 탭에 맨 아래로 내려가 정적 웹 사이트 호스팅에 편집을 누릅니다.

정적 웹 사이트 호스팅을 활성화로 변경하고 인덱스 문서와 오류 문서에 index.html을 작성한 후 저장합니다.

이제 마지막으로 S3 버킷 권한을 설정해야 합니다. 버킷의 권한 탭에서 버킷 정책 편집을 누릅니다.

버킷 정책 편집에 버킷 ARN을 미리 복사하고 정책 생성기를 클릭합니다.

정책 생성기에서 아래와 같이 작성하여 Add Statement 버튼 클릭합니다.

추가가 완료되었다면 Generate Policy를 누릅니다.

생성된 JSON을 전부 복사하고 버킷 정책에 넣어줍니다. 그 후에 버킷 정책을 저장하면 설정이 완료됩니다.

세팅이 완료되었다면 이제 빌드 파일을 업로드 하면 됩니다. 업로드 버튼을 눌러 React 빌드 파일을 넣어줍니다.

build 폴더 자체를 넣지 업로드 시에는 build 폴더 자체가 아니라 build 폴더 안에 파일과 폴더를 넣어줍니다.

업로드가 완료되었다면 속성 탭에 맨 하위 정적 웹 사이트 엔드포인트의 주소를 클릭합니다. 접속하면 정상적으로 호스팅된 것을 볼 수 있습니다.

지금까지의 과정으로 S3를 통해 리액트 프로젝트 배포가 완료되었습니다.