프론트엔드 React 프로젝트 S3로 배포하기

Devel-Up 프로젝트에서 프론트 팀원들과 힘을 합쳐 프론트엔드 S3 배포를 하기로 했다.

개인적으로 공부한 뒤, 이번주 내로 배포하여 이미 구축된 CI/CD까지 연결하는 것이 목표!

 

잠시 프로젝트 소개를 하자면..

개발자 취준생 상호 성장을 위한 플랫폼을 개발하고 있다.

취준생들이 느끼는 불안감을 문제 상황으로 인식했고, 이 불안감을 해소할 수 있는 방법이 무엇이 있을까 고민하다 첫 번째 방법으로 코드 리뷰 서비스를 제공하기로 했다.

2주 스프린트 단위로 나누어 아주 작은 기능부터 만들면서 8주 간 규모를 키워가려고 한다!

 

 

왜 S3를 사용하여 배포하지?

프론트에서 Amazon S3를 통해 배포한 이유는, React 같이 SPA 프로젝트의 경우 서버가 필요 없고, 정적 웹 사이트 호스팅이 가능하여 간단하게 배포할 수 있기 때문이다.

추가로 배포를 하는 이유를 설명하자면, 사람들이 우리 사이트에 접속하여 서비스를 자유롭게 이용할 수 있게 하기 위해서다.

현재 서버는 CI/CD가 구축된 상황이고, 프론트 배포만 남은 상태다.

 

 

 

여기서 정적 웹 사이트 호스팅이란?

 

웹 애플리케이션에 의해 생성되는 동적 웹 페이지와는 반대로, 정적 웹 사이트는 정확히 저장된 그대로 사용자에게 제공되는 웹 사이트입니다. 정적 웹 사이트는 작성자가 소수이고 콘텐츠 변화가 비교적 드문 사이트에 적합합니다. 정적 웹 사이트의 흔한 사용 사례로는 개인용 웹 사이트나 간단한 마케팅용 웹 사이트를 들 수 있습니다. 정적 웹 사이트는 HTML, JavaScript, 이미지, 동영상 및 기타 파일을 저장된 그대로 웹 사이트 방문자에게 단순히 제공할 뿐이며 애플리케이션 코드를 포함하지 않습니다.

출처 :  https://aws.amazon.com/ko/getting-started/hands-on/host-static-website/faq/

 

👉 정적 웹 사이트 호스팅은 우리가 미리 작성해 놓은 코드를 그대로 웹 사이트에 띄워주는 것

 

 

 

배포 방법

1. Amazon S3 로그인

 

Amazon S3

 

2. 버킷 생성

- 버킷 이름 설정

 

 

- 그대로 두기

 

 

 

 

- 모든 퍼블릭 액세스 차단 해제

프로젝트를 사람들이 이용할 수 있도록 공개할 것이기 때문에 모든 퍼블릭 액세스 차단은 해제하여 공개한다.

 

 

이후 버킷 만들기 버튼 클릭하여 버킷 생성

 

 

 

3. 버킷 정책 편집

- 속성에서 버킷 ARN 복사

 

 

 

- 권한으로 들어가서

 

 

 

- 하단의 버킷 정책 편집 클릭

 

 

 

- 정책 생성기 클릭

 

 

 

- 위와 같은 창이 뜰 텐데

1. Policy Type을 S3로 설정하고,

2. Principal에 모두 적용을 의미하는 *를 입력하고

3. Actions에 Get Object를 설택한 뒤

4. ARN에 아까 복사해둔 값을 붙여 넣고 Add Statement를 클릭

 

- 하단에 위와 같은 창이 뜨면

1. 모달에 나오는 JSON을 복사한 뒤 버킷 정책 편집 내용에 붙여넣는다.

2. 여기서 주의할 점은, JSON 내용 중 Resource에 주소가 있을 텐데, 끝에 /*를 붙여준다

3. 변경사항 저장

 

 

4. 빌드 파일 업로드

버킷 정책을 설정했으니 이제 파일을 업로드하러 가보자.

 

4-1. 프로젝트 빌드

 

React 프로젝트이기 때문에,

npm run build

 혹은 프로젝트에 맞는 빌드 명령어를 입력하여 빌드한다.

 

 

 

4-2. 파일 업로드

 

정상적으로 빌드가 완료되면 dist 폴더 내부에 여러 파일들이 생성된다.

위 네 개의 파일은 예시일 뿐이며, 프로젝트에 따라 빌드 파일 종류 및 개수가 달라질 수 있다!

 

dist 내부의 파일들을 모두 버킷에 업로드한다.

위 창에서 빌드 파일을 업로드하면 된다.

 

 

 

 

업로드 성공!

 

 

5. 정적 웹 사이트 호스팅 설정하기

빌드 파일이 호스팅 되도록 설정해주어야 한다.

 

 

 

- 속성 하단의 정적 웹 사이트 호스팅 편집을 클릭한다.

 

- 아래와 같이 호스팅을 활성화해 준 뒤, 인덱스 문서명을 입력해 준다.

- 인덱스 문서명은 프로젝트 시작지점이 되는 문서를 입력하면 된다.

- 오류 문서는 오류 발생 시 반환되는 파일을 입력하면 되는데, 난 배포 연습 중이라 따로 만들어 둔 파일이 없어서 그냥 index.html로 했다. 참고로 선택 사항이니 꼭 작성하지 않아도 된다!

 

 

 

배포 성공!

 

 

 

 

 

 

 

 

연습이 끝나면 꼭 버킷을 삭제한다 (중요)

 

 

 

 

참고 자료

https://aws.amazon.com/ko/getting-started/hands-on/host-static-website/faq/

https://www.onetrust.com/integrations/amazon-s3/

https://velog.io/@crab4862/AWS-S3로-프론트엔드정적-웹사이트-배포하기

https://ksha0628.tistory.com/95