배포를 공부해보려고 하는 이유

기존의 오즈의 제작소 프로젝트에서의 배포 방식은 프론트 팀(우리)이 만들어 놓으면, 그 파일을 백엔드 개발자가 배포해주는 방식이었다.
남이 해주는 것..
보다 값진건 나 스스로 해보는 것이라 믿고있기에 처음부터 프론트엔드 배포에 대해 공부해보고자한다.

프론트엔드 배포하기

기본 로직은 다음과 같습니다.
프론트엔드 스택으로만 구성된 정적(static) 어플리케이션을 따로 배포하는 방식

cloudfront를 왜 사용하는가

s3를 퍼블릭 액세스로 사용해서 배포하는 방법도 있다. 하지만 그렇게 하면 그 s3 저장소는 모두에게 모든 방식으로 열려있다.(GET,POST,PUT---)

GET방식으로만 정적 웹사이트를 전송하기 위해서 cloudfront를 사용한다. 더불어 https를 적용하기 위해서도 cloudfront가 필요하다.

React App을 배포해보자

우선 npm run build를 수행한다.(CRA) 그럼 다음과 같이 build 내용물이 생성되는 것을 확인할 수 있다.

그 다음 aws s3에 들어간다. s3로 와서 버킷을 하나 생성한다. 생성하고 build에 파일을 올리면 다음 작업은 cloudfront이다.

cloudfront

aws s3란?

aws docs 를 참고하여 적어봅니다.🙏

Amazon Simple Storage Service(Amazon S3)는 인터넷 스토리지 서비스입니다.
Amazon S3에서 제공하는 단순한 웹 서비스 인터페이스를 사용하여 언제든지 웹상 어디서나 원하는 양의 데이터를 저장하고 검색할 수 있습니다.

개발자들이 높은 확장성, 신뢰성, 경제성을 가진 데이터 스토리지 인프라에 액세스 할 수 있도록 해준다.

• 버킷 : 데이터를 저장하는 버킷(컨테이너)을 만든다. 버킷은 데이터 스토리지를 위한 S3의 기본 컨테이너.

• 데이터 저장 : 버킷에 데이터를 무한정 저장한다.

  Amazon S3 버킷에 객체를 원하는 만큼 업로드할 수 있으며, 각 객체에 최대 5TB의 데이터를 포함할 수 있습니다.

• 데이터 다운로드 : 언제든지 데이터 직접, 다른 사람을 통해 다운로드 할 수 있다.

• 권한 : 데이터를 버킷으로 업로드, 다운로드하려는 사용자에게 권한 부여, 거부 가능하다.

• 표준인터페이스 : 모든 인터넷 개발 도구 키트에서 사용할 수 있도록 REST, SOAP 인터페이스를 사용한다.

더 자세한 내용은 여기를 보자