React 프로젝트 S3 배포하기

React

React 프로젝트 S3 배포하기

B_Tae 2023. 4. 26. 22:38

React 프로젝트를 S3에 배포하는 방법을 정리하고자 합니다.
AWS에 깊은 지식은 없으며 프로젝트, 회사 내에서 배포를 했던 경험을 바탕으로 정리하는 글임으로 참고하시는 분들은 이점 유의 바랍니다.

피드백은 언제나 환영입니다.

S3 버킷

들어가기에 앞서 AWS 콘솔 로그인 등에 기본적인 과정은 생략하도록 하겠습니다.

버킷 생성

1. S3 접속

S3에 들어가서 우측에 "+ 위젯 추가"를 클릭

2. 버킷 만들기

"버킷 만들기" 클릭

3. 버킷 설정하기

이미지에 작성된 내용을 보기 전 이미지 아래에 각 요소에 대한 간단한 설명을 보시고 상황에 맞게 설정하시면 됩니다.

버킷 이름
버킷 이름은 자유롭지만 도메인과 연동할 예정이라면 동일 혹은 비슷하게 작성해 주는 게 좋습니다. 버킷이 쌓이다 보면 구분하기 어려워질 수 있어요.

AWS 리전
리전은 대기 시간, 요금, 규정 준수 등을 고려해서 정하면됩니다.
한국에서만 서비스를 하는데 미국으로 리전을 설정하면 비교적 응답 시간이 길어지며, 각 리전별로 요금이 다르기 때문에 서비스 상황에 맞게 적용하면 됩니다.

객체 소유권
대부분은 ACL 비활성화를 합니다.
차이로는 객체에 대한 권한을 버킷 소유자에게 줄 것인지, AWS 계정에게 줄 것인지 차이가 있습니다. 정확한 정보는 아닐 수 있지만, 비활성화할 경우 계정 간에 객체를 공유하거나 마이그레이션 할 경우에 유용하고, 소유자에게 권한을 준다면(ACL 활성화) 소유자가 액세스를 제어할 수 있습니다.

퍼블릭 엑세스 차단 설정
S3객체 및 버킷에 대한 퍼블릭 엑세스를 방지하는 보안 기능입니다.
여기서는 차단을 해제하겠습니다.

버킷 버전 관리, 태그, 기본 암호화
해당 내용에 대해서는 깊게 공부하지 않았습니다. 상황에 맞게 설정을 변경해 주시면 됩니다.

4. 프로젝트 업로드

위 과정까지 끝났다면 버킷이 하나 있을 것입니다.

저는 react로 개발한 웹페이지를 업로드하겠습니다.

버킷에 이름을 클릭하여 버킷에 들어갑니다.

객체 메뉴에서 업로드 버튼 클리 후 build 해둔 파일을 드래그 앤 드롭으로 올리면 됩니다.

CRA로 프로젝트를 생성했다면 yarn build 명령어를 통해 build를 할 수 있습니다.

위 명령어를 실행하면 프로젝트 root 폴더 내에 build 폴더가 생성됩니다.

build 폴대 내에 있는 모든 파일을 업로드합니다.

이렇게 업로드가 끝났다면 하단에 "업로드" 버튼을 눌러 저장합니다.

5. 호스팅 활성화

다시 버킷에서 속성 메뉴로 들어갑니다.

제일 밑에 정적 웹 사이트 호스팅을 보면 비활성화되어있는데, 이걸 활성화할 예정입니다. 우측에 편집을 눌러주세요.

호스팅 유형에는 2가지가 존재합니다.
- 정적 웹사이트 호스팅 : 해당 버킷을 웹사이트 주소로 사용한다는 의미로 받아들일 수 있습니다.
- 리디렉션: 리디렉션(이하 리다이렉션으로 표기하겠습니다.) 도메인 혹은 다른 버킷으로 리다이렉션을 한다는 의미입니다.

리다이렉션에 대해 제가 사용한 간단한 사용방법으로는 xxxxx.com으로 접속하게 되면 자동으로 www.xxxxx.com으로 이동시키는 방식으로 하나의 도메인에서 관리를 할 수 있도록 했습니다.
시간이 된다면 이 부분은 따로 정리하도록 하겠습니다.

우선 여기서는 정적 웹사이트 호스팅 방법으로 적용하겠습니다.