[AWS] 웹 프론트, S3 저장소를 통해 배포하자

 

✅ 개요

 

팀프로젝트 (백-프론트) 협업을 할 때

 

백엔드에서 API가 만들어지며 제대로된 프론트의 개발이 시작될 수 있기도 하고,

프론트는 유저와 직접 만나는 부분을 개발하기 때문에 잔버그를 해결하는 과정이 필수적이라서

 

프론트의 배포를 백엔드가 맡게 되는 경우가 많은것 같다.

 

이런 이유로 나도 부트캠프에서 프로젝트 2번 다 프론트 배포를 함께 맡았었다.

 

 

오늘은  간단하게 프론트 파일을 S3에 올리고, 접근하는 방법을 알아보자.

 

++ S3에 파일을 올리게 되면, S3주소로 접근할 수 있게 되는데 이후 도메인을 구매해서 CloudFront를 적용한다던지 하면 우리가 일반적으로 사용하는 웹 도메인 URL을 통해 접근할수도 있게 된다!

 

---

 

 

✅ S3 버킷 만들기

 

1) 버킷 이름 규칙을 보고, 간단하게 이름을 정한다.

 

2) 모든 퍼블릭 액세스 차단 체크를 풀어준다.

 

 

3) 버킷만들기 버튼을 누른다.

 

 

4) 버킷이 생성되면, 속성을 클릭한다.

 

5) 정적 웹사이트 호스팅 편집에서, 활성화해준다.

 

 

인덱스문서와 오류문서를 둘다 index.html로 설정했다.

 

6) 버킷엔드포인트가 생성되는데, 앞으로 이 주소를 통해 웹 프론트에 접근할 수 있게 된다!

 

이제 프론트 파일을 S3 버킷에 올려보자.

 

 

✅ 객체 업로드를 위한 프로젝트 빌드

 

먼저 프론트 프로젝트의 가장 상위 디렉터리로 이동한다.

 

해당 프로젝트를 build하고, 빌드된 파일을 업로드 해주면되는데...

 

 

 

👩‍💻 build 명령어

npm run build

 

 

나는 react-scripts : command not found가 나와서

 

 

아래 명령어를 입력해서 해결했다.

npm install react-scripts --save

 

 

 

빌드가 잘 되면 frontend 아래에 build 디렉터리가 생기고, static한 파일들도 생겨난다. 

이제 올릴 객체에 대한 준비는 끝났다!

 

 

 

build 폴더 내부에 있는 모든것을 드래그해서

업로드한다.

 

 

 

 

---

 

✅ S3 버킷 정책 설정

 

이제 마지막 단계이다! 

 

1) 권한으로 이동

 

2) 버킷 정책 편집 클릭

 

3) 버킷 ARN 복사

4) 정책생성기 클릭

 

5) 정책 생성

 

Select Type of Policy - S3 Bucket Policy

Principal - *

Actions - GetObject

Amazon Resource Name (ARN) - 복사한ARN값/*

 

 

Add Statement를 누르면 아래에 상태가 생기고,

값이 정확한지 확인 후   Generate Policy를 눌러주면 된다.

 

나온 값을 복사한다

 

 

6) 정책 붙혀넣기

아래 정책 1 부분에 붙혀넣기해주고 변경사항 저장 누르면 끝

 

 

 

---

 

S3 링크로 들어가서 확인해보면 정상적으로 화면이 나오는것을 볼 수 있다.