[AWS] S3 프론트엔드 배포하기

AWS S3 프론트엔드 배포하기

부트캠프에서의 1차 프로젝트 배포가 끝났다하여(드디어) 프론트엔드 배포과정을 기록하는 포스트이다.

우선 나는 aws s3 버킷을 이용하였다.

S3란 무엇인가?

Amazon Simple Storage Service(Amazon S3)는 업계 최고의 확장성, 데이터 가용성, 보안 및 성능을 제공하는 객체 스토리지 서비스입니다. 모든 규모와 업종의 고객은 Amazon S3를 사용하여 데이터 레이크, 웹 사이트, 모바일 애플리케이션, 백업 및 복원, 아카이브, 엔터프라이즈 애플리케이션, IoT 디바이스, 빅 데이터 분석 등 다양한 사용 사례에서 원하는 양의 데이터를 저장하고 보호할 수 있습니다. Amazon S3는 특정 비즈니스, 조직 및 규정 준수 요구 사항에 맞게 데이터에 대한 액세스를 최적화, 구조화 및 구성할 수 있는 관리 기능을 제공합니다.

이라고 아마존에서 설명하는데 솔직히 처음 배포하는 과정을 찾아봤을때는 이해가 잘 안되고 어려웠었다.

내가 찾아보고 정리한 바로는 s3는 객체 스토리지 서비스로 원하는 양의 데이터/파일들을 저장, 검색, 삭제 할 수 있는 저장소이다.

여기서 정적 웹 사이트 호스팅 기능을 이용하기 위해서는 해당 저장소에 빌드된 컨텐츠를 업로드 해야한다. 그리고 그러한 빌드 결과물/데이터들을 저장하기 위해서는 S3내에 bucket을 생성해야한다.

우선 호스팅 과정을 알아보기전에 객체와 버킷에 관해 알아봐야한다. AWS S3에서 객체(Object)와 버킷(Bucket)은 중요한 개념인데,

객체

• 객체란 데이터 파일을 나타낸다. 일반적으로 객체는 파일(예: 이미지, 동영상, 문서 등)을 의미하지만, 실제로는 임의의 데이터를 포함할 수 있다.
• 객체는 S3 버킷에 저장된다. 각 객체는 고유한 키(Key)를 가지며, 이 키를 사용하여 객체에 액세스할 수 있다.
• 객체는 기본적으로 사이즈, 최종 수정일, 메타데이터 등의 속성을 가질 수 있다.
• S3 객체는 버전 관리, 복구, 액세스 제어 등의 기능을 제공하여 데이터의 보존과 보안을 지원한다.

버킷

• S3 버킷은 객체의 컨테이너로서, 객체를 저장하는 공간이다. 또한 버킷은 전역적으로 고유한 이름을 가져야 한다.
• 버킷은 AWS 계정 내에서 생성되며, 다수의 객체를 포함할 수 있다. 버킷은 계층적인 디렉토리 구조를 가지지 않고, 단순히 객체를 포함하는 단위를 말한다.
• 버킷은 지역적인 속성을 가지며, 지역에 따라 데이터 저장 위치와 액세스 성능이 달라질 수 있다.

객체와 버킷은 S3의 기본 구성 요소이며, 객체는 버킷 내에 저장되고 관리된다. 버킷은 객체를 그룹화하고 객체에 대한 권한 및 속성을 설정하는 데 사용된다.

프로젝트 호스팅 과정

1. 프로젝트 빌드 준비하기

프로젝트 루트에서 npm run build를 실행하면 배포할 때 활용할 수 있는
build 디렉토리가 생성된다.

2. S3 bucket 생성하기

s3는 저장소이기 때문에 정적 웹사이트 호스팅을 위해서는 저장소에 빌드된
데이터를 업로드 해야한다. 그리고 빌드 결과물과 같은 데이터들을 저장하기 위해서는 먼저 s3내에 버킷을 생성해야한다.

• 첫번째로 S3 버킷을 생성한다.
• 생성할 버킷이름을 지정하고, 빌드한 프로젝트를 공유해서 업로드해야하니 퍼블릭으로 오픈한다.

3. 빌드한 파일 업로드 및 웹 호스팅 활성화

빌드한 파일 업로드

• 생성된 버킷에서 업로드 버튼을 클릭하고, 빌드된 파일을 전부 드래그해
  집어넣는다. 여기에서 중요한건 build 폴더를 통채로 넣는 것이 아니라 폴더 안의 파일들을 넣어야한다.
  처음 배포하려고 냅다 빌드 폴더를 한꺼번에 넣어서 잘 되지 않았던 경험이 있었지..

이렇게 파일 업로드가 성공적으로 완료되었다면, 이제 정적 웹사이트 호스팅 설정을 해보자

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

• 속성 탭을 누르고 스크롤 하단의 정적 웹 사이트 호스팅 편집에 들어가 위 이미지 처럼 설정하고 변경사항을 저장해준다.
• 다시 속성탭으로 돌아와 잘 활성화 되었는지 확인한다.

4. 버킷 권한 설정하기

1. 생성한 버킷 이름으로 이동한다.
2. 속성 탭을 클릭한 후 Amazon 리소스 이름(ARN) 내용 복사

ARN이란?
ARN이란 Amazon Resource Number의 약자로 서비스에서 생성되는 리소스의 고유 값이다. Bucket ARN은 해당 Bucket만을 의미하는 Amazon 고유 ID를 의미한다.

3. 권한 탭 클릭한 후 버킷 정책 편집의 정책 생성기로 이동한다.

• 아래 처럼 설정한 후 Add Statement 버튼을 클릭한다.

• 그럼 아래 처럼 generate policy 버튼이 생성된다.

• Generate Policy 클릭하면 생성되는 버킷정책 JSON Document를 버킷 정책 편집에 복사 붙여넣기 하기

여기에서 코드 블럭 내 resource의 value는 본인의 버킷 arn을 작성하면된다. 그리고 뒤에 /*을 붙여서 마무리한다!!

5. 버킷 엔드포인트 주소 확인하기

• 마지막으로 버킷 웹 사이트 엔드포인트를 클릭한 후 배포가 잘 되었는지 확인한다.