[AWS] S3 버킷을 이용한 이미지 파일 조회

 

---

AWS S3 버킷을 이용한 이미지 파일 조회

---

 

 

1. S3 버킷 만들기

---

S3 버킷은 AWS 에서 파일(객체)를 저장하기 위한 공간이다. (클라우드 상의 폴더 개념이다.)

로컬 환경에서 이미지 담는 폴더를 만들어 개발하다가

클라우드 상의 폴더를 이용하면 추후 배포 때도 편하게 이미지를 관리할 수 있을 것 같아 만들었다.

 

해당 프로젝트는

프론트 : React(vite) + Typescript

백엔드 : SpringBoot 3 + Spring Data JPA

환경에서 진행한 걸 기준으로 작성되었다.

 

또한 서버에서 버킷으로의 파일 업로드가 아닌,

버킷에 업로드된 파일을 프론트에서 조회하는 방식만 작성되어 있다.

 

 

무료 클라우드 컴퓨팅 서비스 - AWS 프리 티어

 

AWS root 사용자 계정으로 로그인한다.

 

 

 

검색창에 S3 검색 후 최상단에 뜨는 S3(클라우드 내의 확장 가능 스토리지) 를 선택한다.

 

 

 

버킷 생성 - 버킷 만들기 버튼을 누른다.

이미 생성된 버킷이 있다면, 버킷 만들기 버튼이 다른 곳에 있을 수도 있다.

 

 

 

버킷 이름을 작성한다.

버킷 이름은 다른 사용자와 중복되지 않는, 고유한 이름이다.

 

 

스크롤하면 버킷의 퍼블릭 액세스 차단 설정이 나온다.

프로젝트의 기본 이미지(기본 제공 프로필, 로고 등) 보관용이기에 인증된 사용자에게만 풀어줄 이유가 없다.

따라서 모든 퍼블릭 액세스 차단을 해제한다.

해제하면 나오는 '현재 설정으로 인해 ~' 란에만 체크해준다.

 

 

 

그외 설정은 디폴트 값을 이용한다.

버킷 만들기 버튼을 눌러 버킷을 생성해준다.

 

 

 

생성한 버킷의 이름을 클릭한다.

 

 

 

권한 탭을 선택한다.

 

 

 

스크롤 내리면 나오는 버킷 정책에서 편집 버튼을 누른다.

 

 

 

오른쪽에 새 문 추가 버튼을 누른다.

 

 

 

검색창에 s3 를 검색 후 나타나는 리스트(사용 가능)에서 S3 를 선택한다.

 

 

 

검색창에 getObject 검색 후 GetObject 선택, 리소스 추가 버튼을 누른다.

GetObject 는 버킷 읽기 권한만을 설정하는 리소스다.

 

 

 

리소스 추가 버튼을 누를 경우 해당 창이 뜬다.

리소스 유형은 나타나는 유형 중 object 를 선택,

리소스 ARN 은 내 버킷이름과 * 를 넣어 수정해준다.

입력 양식 : arn:aws:s3:::{내가 만든 버킷명}/*

 

이후 리소스 추가 버튼을 누른다.

 

 

 

자동으로 작성된 정책에서 Principal 항목의 {} 를 "*" 으로 변경한다.

 

 

 

스크롤해서 오른쪽 하단에 위치한 변경 사항 저장 버튼을 누른다.

 

 

 

2. 접근 제어 설정

---

방금 생성한 버킷은 모든 액세스가 차단 해제되어 누구든 사용할 수 있지만, 아무나 업로드하는 것을 방지하기 위해 버킷 사용자와 액세스 키를 생성하여 접근을 제어해야 한다. 버킷을 사용할 사용자와 그 사용자의 액세스 키 및 비밀 키 생성을 위해 IAM 서비스를 이용한다.

 

 

 

검색창에 IAM 을 검색 후 최상단에 뜨는 IAM 을 누른다.

 

 

 

왼쪽 액세스 관리 카테고리에서 사용자를 선택한다.

 

 

 

오른쪽에 사용자 생성 버튼을 누른다.

 

 

사용자 세부 정보 지정 → 권한 설정 → 검토 및 생성 순으로 진행하여 키를 발급 받을 것이다.

 

 

사용자 이름을 입력 후 다음을 누른다.

 

 

 

권한 옵션에서 직접 정책 연결을 선택한다.

직접 정책 연결 선택 시 뜨는 권한 정책 검색창에 S3Full 을 입력 후 AmazonS3FullAccess 정책을 선택한다.

선택 후 다음 버튼을 누른다.

 

 

 

검토 및 생성에서는 별도의 설정 없이 사용자 생성을 누른다.

 

 

 

생성된 사용자를 선택한다.

 

 

 

보안 자격 증명 탭을 눌러 스크롤을 내리면 액세스 키 부분이 뜬다.

오른쪽에 액세스 키 만들기 버튼을 누른다.

 

 

 

사용 사례로는 AWS 외부에서 실행되는 애플리케이션을 선택하고 다음 버튼을 누른다.

 

 

설명 태그는 빈값으로 두었다.

액세스 키 만들기를 누른다.

 

 

 

액세스 키와 비밀 키가 만들어졌다.

해당 화면을 벗어나면 다시 확인할 수 없으므로 백업을 해두자.

 

이렇게 버킷 생성과 접근을 위한 사용사 생성 및 키 발급을 완료했다.

 

 

 

3. 버킷에 파일 업로드

---

 

이제 버킷에 프로젝트에서 사용되는 파일을 업로드 해보자.

 

 

S3 버킷으로 돌아와 아까 생성한 버킷을 클릭한다.

 

 

 

처음에는 객체란이 비워져있는데, 기본 이미지들을 담는 폴더를 따로 생성해서 관리하고자 폴더를 하나 만들어둔 상태다.

폴더 생성을 위해서는 오른쪽에 폴더 만들기를 누른다.

 

 

 

폴더 이름을 작성하고 폴더 만들기 버튼을 누른다.

 

 

 

생성한 폴더를 선택해 들어간 뒤 업로드 버튼을 누른다.

 

 

 

오른쪽에 파일 추가 버튼을 눌러 프로젝트에 사용되는 이미지 파일을 담는다.

이후 스크롤을 내려 오른쪽 하단에 보이는 업로드 버튼을 누른다.

 

 

 

버킷에 파일 업로드가 완료되었다.

 

 

 

4. 파일 조회

---

프론트에서 버킷에 담겨있는 파일을 가져와보자.

우리는 누구나 조회할 수 있도록 퍼블릭으로 버킷을 생성했기 때문에 별 다른 설정없이 버킷 주소만 작성하면 된다.

 

 

버킷 주소는 파일이 담겨져 있는 폴더로 들어가 속성을 누르고, S3 URI 란에서 확인할 수 있다.

 

const DEFAULT_IMAGE_URLS = [
  'https://skhuring-default-images.s3.ap-northeast-2.amazonaws.com/default-images/cat.png',
  'https://skhuring-default-images.s3.ap-northeast-2.amazonaws.com/default-images/man1.png',
  'https://skhuring-default-images.s3.ap-northeast-2.amazonaws.com/default-images/man2.png',
  'https://skhuring-default-images.s3.ap-northeast-2.amazonaws.com/default-images/man3.png',
  'https://skhuring-default-images.s3.ap-northeast-2.amazonaws.com/default-images/woman1.png',
  'https://skhuring-default-images.s3.ap-northeast-2.amazonaws.com/default-images/woman2.png',
];

 

그렇다. 끝이다.

 

 

파일들이 무사히 불러와진 것을 확인할 수 있다.