S3 : 이미지 업로드를 위해 S3를 활용해보자

필자가 만들고 싶어 하던 프로젝트에서는 이미지를 업로드를 해야 합니다.

그래서 회사에서도 가장 많이 사용하는 걸로 알고 있는 AWS S3로 공부하기 위해 해당 서비스로 선택하게 되었습니다.

 

 

먼저 S3에 대해서 알아야 하겠죠?

S3는 Simple Storage Service로 단순 File을 저장하는 서비스를 의미합니다. S3의 특징은 다음과 같습니다.

• 객체(파일)만 저장이 가능하다.
• 프로그램 설치는 불가하다.
• 파일의 안정성을 거의 보장한다.
• 무제한 용량으로 1개의 파일이 5TB까지 가능하나, 사용한 만큼 과금이 붇는다.
• Static Web Hosting 이 가능하다.
• 버전 관리가 가능하다.
• Bucket 단위로 관리하며, 이름은 유니크해야 한다.
• 암호화가 가능하며, 보안 설정이 가능하다.

데이터를 저장하고 보호할 수 있는 공간을 우리는 이미지 저장을 위해 사용하려고 합니다. 그럼 이제 AWS에서 버킷을 만들어보도록 합시다.

AWS에서 S3검색 -> 버킷 만들기 클릭

AWS에서 S3를 검색을 한 후, 버킷을 만듭니다. 그럼 아래와 같은 화면이 나옵니다. 그러면 버킷 생성을 클릭합니다. 그럼 아래 이미지처럼 버킷 만드는 페이지가 나옵니다.

 

첫 번째로 버킷 이름은 내 버킷 내에서는 고유하게 설정해야 합니다. 더 자세한 이름 규칙을 '버킷 이름 지정 규칙'을 클릭해서 확인하면 됩니다. 아래는 버킷 이름 예제입니다. 간략하게 쉽게 알아보게 정리를 했습니다.

( O ) bucketname1
( O ) bucket-name
( O ) bucket.name
( X ) BucketName
( X ) bucket-Name-
( X ) bucket_name

버킷 만들기 - 일반 구성, 객체 소유권

객체 소유권은 처음에 ACL 비활성화를 진행하였는데, 실제로 테스트를 할 때에 에러가 발생하여서 이 부분은 바꾸었습니다. (아직은 이 부분은 정확히 무엇을 의미하는 건지는 더 찾아보겠습니다.)

 

버킷 만들기 - 이 버킷의 퍼블릭 액세스 차단 설정

이 부분은 다른 블로그마다 다 다르게 설정이 되어있어서 정확히 어떤의미인지는 계속 써보면서 알아가야 할 것 같습니다. 어떤 블로그에서 보기를 모두 해제를 해야지 읽고, 쓰고, 올리고, 지우기를 자유롭게 할 수 있는 게시판에 쓰이기 좋다고 하여서 일단 필자는 해제를 하였습니다.

 

그 외에는 기본으로 설정해두겠습니다.

버킷 만들기 - 기본 암호화, 고급 설정

 

 

 

그렇게 버킷을 만들었습니다.

버킷 생성 완료

그럼 이렇게 버킷 생성이 완료된 것을 알 수 있습니다.

버킷에서 직접 객체를 업로드를 할 수 있다.

이처럼 버킷을 클릭하면 직접 객체를 업로드를 할 수 있습니다. 직접 업로드를 하게 되어 클릭하여 보면 해당 이미지의 링크로 불러올 수 있는 URL을 받을 수 있습니다. 하지만 아래처럼 이미지는 보이지 않게 될 것입니다.

이미지가 아닌 요상한 코드가 나온다.

 

그래서 우리는 몇가지를 추가적으로 더 설정을 해주어야 합니다.

 

우리는 S3를 접근하기 위해서는 특정 키 값이 필요하며 정책을 설정해주어야 합니다. 먼저 AWS에서 IAM을 검색해줍니다.

IAM 검색

 

여기서 좌측의 사용자를 클릭한 후

IAM -> 사용자 -> 사용자 추가

 

사용자 이름은 해당 버킷과 연결지어 기억할 수 있는 내용으로 저장을 합니다. 그리고 액세스 유형은 액세스 키 방식으로 체크합니다.

사용자 추가

그러면 액세스 키가 생성이 되어 나중에 보여줄 것입니다. 다음으로 넘어가서 정책은 AmazonS3FullAccess를 검색하여 체크를 해주시기 바랍니다.

정책 AmazonS3FullAccess 검색

그러면 아래처럼 액세스 키 ID 값과 비밀 액세스 키 값을 받을 수 있습니다. 여기서 주의할 점은 여기서 액세스 키와 비밀 액세스 키값은 꼭 따로 저장을 하되 외부에 노출이 되어서는 안 됩니다. 과금을 유도하게 될 수 있으며, 이 페이지를 넘어가게 되면 비밀 액세스 키를 다시 확인할 수 없게 됩니다.

사용자 추가 액세스 키 발급 완료

 

두 개의 키값은 잘 저장해둡니다.

 

다음으로 설정할 것은 버킷 정책 입니다. 정책 생성기를 열기 전에 버킷 ARN을 복사해둡니다.

버킷 정책 편집

새 탭으로 버킷 정책을 만들 수 있는 곳이 나오는데,  정책은 S3로 골라줍니다.

버킷 정책 편집

Effect는 Allow, Principal은 *로 해도 되고, 좀 전에 만든 사용자의 ARN을 복사해서 넣어도 되는 것 같더라고요. 필자는 일단 *로 해두었습니다. 그리고 Action은 GetObject를 클릭을 합니다.

버킷 정책 편집 ARN

마지막으로는 아까 복사한 것을 가져온 후 /* 이 두가지만을 추가적으로 적어줍니다.

예를 들어 필자의 ARN은 arn:aws:s3:::cosmetic-bucket에서 arn:aws:s3:::cosmetic-bucket/*로 설정합니다.

버킷 정책 설정

그렇게 generate Policy를 클릭하게 되면 정책이 생성이 되는 것을 확인할 수 있습니다. 복사합니다.

정책 편집 및 복사

복사를 한 후 이전 탭으로 돌아와 붙여넣은 후 저장을 합니다.

 

마지막으로는 CORS 설정을 합니다.

 

 

버킷 권한 카테고리

그리고 아래로 쭈욱 내리다 보면 CORS가 있습니다. 

권한에서 CORS를 설정할 수 있는 화면

이제 편집을 누르고 아래 코드를 복사하여 붙여 넣기를 합니다.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

그리고 저장을 합니다.

CORS 리소스 편집 하여 저장한다.

 

 

이 S3를 이해를 위해서 며칠을 찾아 해맸습니다.

하지만 아직도 잘 모르는 부분도 없잖아 있었습니다. 그래서 계속 보충하여 찾게 되었고,

설명을 누구나 이해하기 쉽게 넣고 싶었지만, 필자도 이해가 잘 되지 않는 부분이 있어

미흡한 점이 많이 있습니다. 이점 양해 부탁드립니다.

 

이렇게 하면 일단 준비는 모두 완료가 되었습니다.

다음에는 실제로 노드와 리액트에 적용을 해보려고 합니다.

이상 여기까지 S3를 개설하는 방법이었습니다.

감사합니다.

 

혹여 막히시는 부분이 있다면, 필자가 해결이 되었던 방법가 얼추 비슷하게 되면 최선을 다해 도와드리겠습니다.

(물론, 저보다 다른 분들에게 물어보는 게 더 나을 수도...)

 

22. 06. 11 첫 업로드

22. 06. 25 부족한 부분 추가 업로드