Create React App(CRA) 프로젝트를 AWS S3와 CloudFront를 활용하여 배포하고 Github Action을 통해 CI/CD하기 (1) ~S3 생성 및 프로젝트 배포, CloudFront 연결 까지~

이전 ECS를 구축하다 보니, 정적인 웹(React, Svelte, Vue 등의 프로젝트) 호스팅 자체는 굳이 ECS나 EC2를 활용할 필요가 없다는 것을 깨닫게 되었다. 

AWS에서는 S3(Simple Storage Service) 버킷에서 직접 정적인 웹사이트를 호스팅 할 수 있게끔 도와준다.

즉 Nginx, Apache등이 필요가 없다는 말이다. 

 

이 시리즈에서는 단순히 웹 호스팅을 하는 것만이 목적이 아니라면 Backend도 연결해서 사용해야 하는데 이는 ECS로 ECR컨테이너를 띄워서 ColudFront의 proxy처리(말이 proxy지, AWS는 "동작"이라 표현한다)를 통해 백엔드와 프론트엔드를 연결하고자 한다.

 

일단 S3 버켓을 구성하는 것 부터 시작해보려 한다.

 

1. S3콘솔에 진입하여 버킷 만들기 클릭

 

주의해야할 것은 이 버킷은 전역에서 고유해야 한다는 점이다.

즉 게임 ID처럼 모든 영역에서 겹치지 않아야 한다.

 

이름 정하는 것도 까다롭다.

_, 대문자, 공백은 허용하지 않는단다.

필자의 경우 의도했던 test-bucket이 이미 사용중이라 이름을 저렇게 정했다.

 

AWS 리전은 각자의 리전으로..

 

아래의 ACL의 경우 해당 S3를 다른 AWS계정에서 소유할 수 있게끔 설정하는건데

필자는 현재 계정으로만 관리할것이므로 권장사항인 비활성화를 선택하겠다.

 

 

이 프로젝트의 목적은 정적인 웹사이트 공유에 있으므로 당연히 퍼블릭 엑세스를 허용해야 한다.

체크를 모두 해제하면 (맨 위에거만 해제하면 나머지도 다 해제됨) 경고창이 표시되며

이에 체크를 표시해야 한다.

 

버킷 버전관리의 경우 잘못 커밋하여 에러가 발생할경우 롤백하기에 유용할테니 테스트가 아닌 경우 활성화 체크하길 권장.

 

암호화는 무엇을 하든 상관 없으니 기본값으로 놔두고 버킷 만들기 클릭

 

잘 생성됐다

액세스에 "객체를 퍼블릭으로 설정할 수 있음"이라는 매혹적인 문구가 보인다.

낼름 들어가서 설정해주자.

 

해당 버킷 이름을 클릭하여 상세 페이지로 이동..

 

2) 객체 업로드하고 퍼블릭으로 공개하기

응애 나 신생 버켓

일단 이 아무것도 없는 공간에 우리가 빌드한 정적 웹 파일을 올려주자.(html + js + css...)

필자는 CRA 프로젝트를 구성했기에 이를 올려주겠다.

 

만일, 간단하게 띄울만한 것이 필요하다면 아래 필자의 깃헙에서 React 프로젝트를 받아도 무방하다.

본 포스팅을 따라가는데에 도움이 될것이라 예상된다.

https://github.com/kokomai/base_react

GitHub - kokomai/base_react: base_react for any project

※ CRA 프로젝트 빌드 방법

일단 위 리포지토리를 받은 뒤, vscode를 실행하여

npm install을 실행해 해당 프로젝트에서 필요한 패키지를 다운받는다.

이 후, npm run build를 실행해 해당 프로젝트를 빌드한다.

빌드하면 참 이쁘게 프로젝트 구조가 나온다.

필자는 js소스파일의 경우 외부로 노출되는 것이 좋지 못하다고 판단하였기에

package.json에서

build시 GENERATE_SOURCE_MAP=false 옵션을 주었다.

또한 해당 옵션값이 OS에따라 문법이 달라지기에 리눅스 빌드 윈도우 빌드를 구분하여 작성했으며

default는 window build이다.

 

빌드 완료!

아름답게 빌드가 되었다 이제 이걸 올려보자.

 

"업로드" 버튼 클릭 (위에건 아래건 상관 없다)

 

 

 

파일 추가해서 "src"폴더를 제외한 파일들을 올려주고,

폴더 추가를 눌러 src폴더 전체를 올려준다.

 

이후 "업로드"클릭

 

성공!

"닫기"를 눌러 나가면

 

짜잔~

 

이제 이 파일의 html을 호스팅 해야 한다.

 

속성 탭 클릭

속성탭으로 가서 아래로 쭉 내리면..

우리가 원하는 그것이 보인다!

편집으로 이동

 

가운데 안내 문구가 뭔가 쎄하긴 하지만..!

CRA 빌드시 index.html에서 모든 js, css리소스를 가져와서 보여주기에 index.html만 바라보게 해준다면 끝이다..

변경 사항 저장클릭!

 

자 이제 "속성"탭의 맨 밑으로 다시 가보자!

 

주소가 보인다 보여!

주소가 보인다!

클릭해서 가볼까!?

 

호에에에엥

 

말도안돼!!

 

가 아니다

 

아까 정적 웹사이트 호스팅 설정 도중 안내문구가 쎄했던 이유가 있었다.

 

403 에러는 권한과 관련된 HTTP ERROR이다.

 

"권한" 탭으로 가보자..

역시는 역시 역시군

 

"퍼블릭으로 생성할 수 있음" 이 문구는 아직 퍼블릭으로 생성이 안되어있다는 말인데..

 

이는 아래의 버킷 정책으로 가능하다. 

버킷 정책 옆 "편집" 버튼을 클릭해보자

 

뭐가 뭔지 모르겠네

뭐가 뭔지 모르겠지만 일단 "정책 생성기"를 클릭하면

새로운 탭으로 이동

 

 

위 사이트에서

principal => * 입력

Actions =>GetObject를 선택

ARN => 아래 사진 참고

 

네모네모를 눌러주면 복사가 된다

ARN => Bucket -> 속성 -> ARN 복사 후 끝에 /* 붙여주기

 

 

Add Statement 클릭시 아래와 같이 뭔가 나온다..!

 

 

Generate Policy 클릭

 

 

위 Json 형식을 복사!

 

 

이후 버킷 -> 권한 -> 버킷정책 -> 편집에 들어가

 

정책란에 해당 json을 복사한 후

 

변경사항 저장 클릭

 

그러면 아래와 같이 뭔가 바뀐다..

 

??? : 붉은색 ~ 푸른색~

빨간색으로 퍼블릭 액세스 가능이라고 하니 뭔가 무서워 보인다..

무시하고 일단 이전에 403Error로 실패했던 URL에 접속해준다.

 

짜잔

 

잘 올라간것을 확인할 수 있다!

 

3. S3와 Cloud Front를 연동

 

먼저 지금 그냥 S3로배포하면 되는것 아닌가? 싶지만

Cloud Front를 연결하는 이유는 다음과 같다.

 

1) 빠르다!

Amazon CloudFront는 .html, .css, .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스입니다. CloudFront는 엣지 로케이션이라고 하는 데이터 센터의 전 세계 네트워크를 통해 콘텐츠를 제공합니다. CloudFront를 통해 서비스하는 콘텐츠를 사용자가 요청하면 지연 시간이 가장 낮은 엣지 로케이션으로 요청이 라우팅되므로 가능한 최고의 성능으로 콘텐츠가 제공됩니다.

2)  proxy의 역할을 해줄 수 있다!

 

필자같은 경우엔 2번의 이유로 Cloud Front를 사용하기로 결정했다. 

이제 Cloud Front를 구성해보겠다.

 

"배포 생성" 클릭

아까 생성한 S3가 보인다

Amazon S3 카테고리 내부에 아까 생성한 버킷을 클릭!

 

뭔가 경고가 나오는데.. 웹 사이트 엔드포인트를 사용하는 것이 좋다고..? 그렇다면!

당연히 클릭!

 

클릭 후 HTTP포트는 80으로 할것이기에 그대로 나두고 밑으로 내려갑니다.

 

나머지는 다 default로 놓은 뒤 

밑으로 쭉 내린 뒤 

"배포 생성" 클릭

 

생성 완료!

 

이제 Cloud Front에서 접속하려면 

배포 도메인 이름 복사!

 

잠시 후 들어가 보면...!

두근두근!

오셨군요!

이제 Cloud Front의 퍼블릭 도메인을 통해 접속이 가능!

 

다음 포스팅은 S3에 깃헙을 연동하여,  깃헙 main branch에 커밋 시 자동으로 빌드 / 배포 되게끔 설정해볼 예정이다!

 

다음 포스팅 :

 

Create React App(CRA) 프로젝트를 AWS S3와 CloudFront를 활용하여 배포하고 Github Action을 통해 CI/CD하기 (2) ~S3 와 Github Action 연결~

Create React App(CRA) 프로젝트를 AWS S3와 CloudFront를 활용하여 배포하고 Github Action을 통해 CI/CD하기 (2)