AWS는 우리가 서버를 고려하지 않고 애플리케이션을 구축하고 실행할 수 있게 해주는(서버리스) 여러가지 서비스를 제공하고 있습니다. 그 중에 S3(Amazon Simple Storage Service)는 안정성과 확장성이 뛰어난 객체 스토리지를 제공하여 웹 어디서나 원하는 양의 데이터를 저장하고 검색할 수 있는 서비스입니다. 즉, 사용한 만큼 돈을 내는 웹하드라고 생각하시면 이해가 편합니다. 또 이 S3를 AWS의 다른 서비스와 연동하여 사용하기 시작한다면 그 확장성과 편리함은 이루말할 수가 없습니다. 예로, S3와 클라우드 프론트를 연결하여 전세계 어디서나 빠르게 접속 가능한 웹을 배포할수도 있습니다.
애플리케이션 관리자만이 파일을 올리고 불러온다면 AWS S3 관리자 화면에서 직접 파일을 업로드하고 관리하면 되지만 실제 어플리케이션 사용자들이 직접 파일을 올리고 관리해야하는 경우라면 조금 상황은 달라지겠죠? 예를 들어 사진 앨범을 저장하는 애플리케이션을 만든다고 하면, AWS S3관리자 화면이 아니라 우리의 애플리케이션 내에서 사용자가 직접 자신이 가지고 있는 사진을 올리고, 지우기도 해야하니까요. 이를 구축하는 방법은 여러가지가 있겠지만 오늘은 웹 브라우저 안에서 javascript를 통해 직접 파일을 올리고 관리할 수 있는 방법에 대해 알아보도록 하겠습니다.
(원문 가이드: https://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html)
시나리오 요약
우리는 웹 브라우저를 통해 직접 S3 버켓내에 사진 앨범을 만들고 사진을 올리거나 지울수 도 있는 심플한 HTML 파일을 하나 만들겁니다.
이 브라우저의 script는 Amazon S3 버켓과 연결하기 위해 JavaScript를 위한 SDK를 사용하게 됩니다.
준비사항 1- 버킷만들기
먼저 실제로 사진이 저장될 S3 Bucket을 만들어봅시다. Amazon S3 console에서 버킷을 만들어주세요.
다른 옵션들에 대한 이해가 없으시다면 추후에 설정을 바꿀 수 있는 것이 대부분이라 일단 이름과 리전만 정하시고 다음버튼만 누르셔도 무방합니다. 중간에 public 액세스에 관한 옵션을 제외하면 요금이나 파일 관리의 엄격성에 관한 것들 입니다. 위의 세팅들을 마치고 나면, 짠! 아래와 같이 버킷이 생성된것을 보실 수 있습니다.
생성한 버킷을 클릭하셔서 들어가보시면 아래와 같이 파일을 업로드하거나, 폴더를 만드는 등 파일관리를 하실 수 있습니다.
하지만 이는 Amazon S3 콘솔에서만 가능하기 때문에 실제 어플리케이션의 사용자가 해당 버킷에 파일을 올리고 관리하려면 몇가지 설정이 더 필요합니다.
준비사항 2- 버킷 CORS 설정하기
브라우저의 script를 통해 Amazon S3 Bucket에 접근하려면 우리는 S3 Bucket의 CORS를 설정해주어야합니다. CORS란 Cross Origin Resource Sharing의 줄임말로, Cross-Site Http Request를 가능하게 하는 표준 규약입니다. 간단히 이야기하면 다른 도메인에서 어떤 http request가 들어왔을 때 이에 어떻게 반응할지를 결정해주는 규칙 문서라고 생각하시면 됩니다.
방금 만든 S3 Bucket을 클릭하여 들어온뒤 권한>CORS 구성 페이지로 오면 아래와 같이 CORS 구성을 편집할 수 있습니다.
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>위의 CORS 구성을 복사하여 붙여넣은 뒤 저장해줍시다.
준비사항 3- 자격 증명 풀 생성하기
여기서부터는 용어가 굉장히 직역+영어원어 혼합체라 내가 읽는게 한글인지 고어인지 알수가 없긴 합니다만 잘 이해가 가지 않는 것은 용어를 풀어서 최대한 기술하도록 하겠습니다. 자격 증명 풀을 생성하기 위해서는 AWS 중 Amazon Cognito를 사용해야합니다. Amazon Congnito란, 웹 및 모바일 앱에 대한 인증, 권한 부여 및 사용자 관리를 제공하는 서비스입니다. Amazon Congnito는 두 가지 주요 구성 요소로 이루어져 있는데 이는 “사용자 풀(User pools)”과 “자격 증명 풀(Identity pool)”입니다. 사용자 풀은 앱 사용자의 가입 및 로그인 옵션을 제공하는 사용자 디렉터리(묶음 정도로 이해하시면 될 것 같습니다.)이며, 자격 증명 풀은 기타 AWS 서비스에 접근할 수 있는 권한을 사용자에게 부여할 수 있습니다. 즉 우리는 “자격 증명 풀"을 통해 우리가 만든 애플리케이션에 접속한 사용자가 우리의 S3 Bucket에 접근할 수 있는 권한을 부여하려고 하는 것입니다. 이를 위해선 먼저 Amazon Cognito console에서 자격증명 풀을 생성해야합니다.
Amazon Congnito console 페이지에 접속하여 자격증명 풀 관리를 클릭합니다. 이때 중요한 것은 클릭하기 전에 우측 상단에서 리전을 선택해야 한다는 것입니다. 이때 리전은 우리가 아까 만들어둔 S3 Bucket과 같은 리전이어야합니다.
원하는 자격증명 풀 이름을 적고, 아래에서 인증되지 않은 사람에게도 자격을 부여할 것인지를 묻는 체크 박스를 체크합니다.
그리고 나오는 페이지에서 세부정보 숨기기를 펼치면 아래와 같은 입력폼을 확인하실 수 있습니다. 여기에서 우리는 unauthenticated identities의 정책을 편집해줍니다. 이를 통해 역할을 부여받으면 어떠한 권한들이 부여되는지를 설정해줄 수 있습니다.
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"s3:*"
],
"Resource": [
"arn:aws:s3:::BUCKET_NAME/*",
"arn:aws:s3:::BUCKET_NAME"
]
}
]
}위의 정책을 복사하셔서 붙여 넣으시되 BUCKET_NAME부분을 아까 우리가 만들어준 S3의 Bucket 이름으로 바꿔주시면 됩니다.
준비사항 4- 자격증명 얻기
이제 우리가 만든 자격증명 풀의 키값들을 얻어야합니다. 다시 Amazon Congnito console 페이지에 접속하여 자격증명 풀 관리를 클릭합니다. 그러면 아까와는 달리 이미 우리가 만든 자격증명 풀이 뜰 것 입니다. 이를 클릭합니다.
** 주의. 만약 아래와 같은 대시보드가 뜨지 않는다면 현재 선택되어 있는 리전이 자격증명 풀을 만들때의 리전과 같은지 확인하세요.
좌측 메뉴에서 “샘플코드"를 클릭한 뒤 우측에서 플랫폼을 “JavaScript”로 선택해줍니다. 그리고 아래에 AWS 자격 증명 얻기의 내용을 어딘가에 복사해 둡시다. 이후 코드 작성 시 리전과 IdentityPoolId가 필요하게 됩니다.
이제 AWS에서 설정해 주어야하는 것은 다 설정해주었습니다. 실제로 코드를 만들어 봅시다.
The Web Page
사진을 업로드하는 어플리케이션을 만드는 HTML은 기본적으로 div 태그 안에 앨범에 대한 내용이 나오게 됩니다. 그리고 첫번째 script는 aws-sdk를 CDN으로 불러온 것입니다.
Configuring the SDK
app.js의 상단부에는 우리가 아까 만든 자격 증명에 대한 내용이 들어갑니다. albumBucketName에는 S3의 Bucket 이름을 넣어주시고 해당 버킷의 리전을 bucketRegion에 적어주세요. 그리고 마지막으로 IdentityPoolId를 넣어주시면 됩니다.
Listing Albums in the Bucket
Bucket 안에 있는 앨범을 리스트업 하는 코드입니다. S3 bucket내에 저장되어 있는 오브젝트들 중 /로 시작하는 것들을 앨범으로 리스트업하게 되며 이는 폴더로서의 기능을 하게 됩니다.
Creating an Album in the Bucket
Amazon S3 버킷에 앨범을 만들기 위해, createAlbum 함수를 사용합니다.
Viewing an Album
앨범 안에 있는 사진을 보여주기 위해 viewAlbum 함수를 사용합니다.
Adding Photos to an Album
사진을 업로드 하기 위해 addPhoto 함수를 사용합니다.
Deleting a Photo & Deleting an Album
사진과 앨범을 지우기 위해 각각 deletePhoto 함수와 deleteAlbum 함수를 사용합니다.
