[React] AWS S3로 리액트 프로젝트 배포

리액트(React) 프로젝트를 AWS S3에 배포하면 정적 웹 사이트를 간단하고 효율적으로 배포 가능하다. 이번에는 리액트 프로젝트를 배포 하던 방식에 대해 알아보고 더 나아가 Github Action을 통해 자동화 프로세스를 만들어 보자. 먼저 이번 글에서는 AWS S3를 활용한 리액트 프로젝트 배포의 장점과 S3의 주요 특징 그리고 배포 방법을 알아보자.

AWS S3의 장점

1. 사용의 용이성
   • AWS Management Console, CLI, SDK 등을 이용해 누구나 쉽게 S3를 관리할 수 있다.
2. 무제한 확장성
   • 저장 용량 제한이 없어 대규모 데이터나 대규모 웹사이트도 문제없이 호스팅할 수 있다.
3. 다양한 스토리지 클래스 제공
   • 자주 사용하지 않는 파일을 위한 Glacier, 비용 절감을 위한 Intelligent-Tiering 등 다양한 스토리지 옵션을 제공한다.
4. 내구성과 고가용성
   • 데이터가 여러 개의 가용 영역(AZ)에 중복 저장되며, 서비스 중단이나 데이터 손실 가능성이 거의 없다.
5. 다양한 AWS 서비스와의 연동
   • CloudFront, Route 53, Lambda 등 AWS의 다른 서비스와 연계하여 완벽한 웹 호스팅 솔루션을 구축할 수 있다.

 

AWS S3를 이용한 리액트 배포의 장점

1. 비용 효율성
   • AWS S3는 저장 공간에 대한 요금을 초저렴하게 부과하며, 소규모 트래픽의 경우 거의 무료로 사용할 수 있는 Free Tier를 제공한다.
   • 정적 파일만 배포하기 때문에 서버리스 환경으로 서버 유지 비용이 들지 않는다.
2. 글로벌 콘텐츠 배포
   • AWS S3는 CloudFront와 같은 콘텐츠 배포 네트워크(CDN)와 쉽게 통합되어 사용자가 어디에 있든 빠르게 콘텐츠를 로드할 수 있다.
   • 데이터 센터가 전 세계에 분포해 있어 사용자와 가까운 서버에서 데이터를 제공할 수 있다.
3. 확장성과 안정성
   • S3는 기본적으로 고가용성과 확장성을 지원하며, 대규모 트래픽 증가에도 문제가 없다.
4. 서버리스(Serverless) 환경
   • 정적 파일만 호스팅하기 때문에 서버를 설정하거나 유지 관리할 필요가 없다.
   • API 호출 등은 Lambda와 API Gateway를 통해 처리할 수 있어 서버리스 아키텍처 구축에 유리하다.
5. 간단한 배포 프로세스
   • 빌드된 정적 파일을 S3 버킷에 업로드하기만 하면 배포가 완료된다.
   • 이후 수정 사항은 파일만 교체하면 되기 때문에 업데이트 작업이 간편하다.
6. 보안
   • S3는 IAM(Identity and Access Management)을 활용한 세밀한 권한 설정이 가능하다.
   • HTTPS를 통한 안전한 데이터 전송을 기본 지원하며 CloudFront를 통해 추가적인 보안을 적용할 수도 있다.

 

S3에 리액트 배포하기

S3에 리액트를 배포하려면 당연하게도 S3를 먼저 생성해야 한다. 아래 절차를 따라서 S3를 생성해보자.

 

1.  버킷 만들기

"버킷 만들기"를 클릭한다.

 

버킷 이름을 작성하고 객체소유권에 대한 설정을 해주면 된다.

ACL에 대한 내용은 아래 설명을 참고하면 본인에게 맞는 설정으로 변경해주면 된다.

ACL 비활성화됨(권장)

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

ACL 활성화됨

• 버킷 소유자 기본(Bucket owner preferred) – 버킷 소유자가 bucket-owner-full-control 미리 제공 ACL을 사용하여 다른 계정이 버킷에 작성하는 새 객체를 소유하고 완전히 제어합니다.
• 객체 작성자(Object writer) – 객체를 업로드하는 AWS 계정은 객체를 소유하고 완전히 제어하며 ACL을 통해 다른 사용자에게 이에 대한 액세스 권한을 부여할 수 있습니다.

 

 

버킷 퍼블릭 액세스 차단 설정을 해제하고 경고문에 대해 "현재 설정으로 인해 이 버킷과 그 안에 포함된 객체가 퍼블릭 상태가 될 수 있음을 알고 있습니다." 체크

 

여기까지 완료되었다면 아래로 내려가 "버킷 만들기"를 진행한다.

 

2. 버킷 속성 설정하기

생성한 버킷으로 들어가 속성 탭을 누른다.

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

 

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

 

 

3. 버킷 권한 설정하기

버킷의 권한 탭으로 넘어가 "버킷 정책"에 편집을 누른다.

 

 

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

 

정책 생성기에서 아래와 같이 작성했다면 Add Statement 버튼 클릭한다.

• Select Type of Policy : S3 Bucket Policy 선택,
• Effect : Allow 선택,
• Principal : * 작성,
• Actions : GetObject 선택,
• ARN : 위에서 복사한 버킷 ARN 뒤에 /* 붙여서 작성,
  
  

추가가 완료 되었다면 아래로 내려가 Generate Policy를 누른다.

 

생성된 JSON을 전부 복사하고 버킷 정책에 붙혀넣기를 한다. 그리고 버킷 정책 저장을 완료한다.

 

 

3. 빌드 파일 업로드

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

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

 

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

 

지금 까지의 과정으로 S3를 통해 리액트 사이트를 배포하였지만 파일이 변경된다면 매번 업로드 해야하는 번거로움이 존재한다. 다음 글에서는 S3와 React 프로젝트의 CI/CD 자동화를 알아보자.

 

참고 문헌

클라우드 스토리지 | 웹 스토리지| Amazon Web Services

[AWS] 📚 S3 정적 웹 사이트 호스팅 + 도메인 설정