이미지 업로드를 위해 AWS S3 사용해보기1

김범기·2024년 4월 3일

AWS

목록 보기

2/5

개요

Node.js를 배우던 중 이미지 업로드 기능이 필요해서 이미지 업로드 기능을 수행하기 위해 AWS의 S3를 이용해보려한다.
구글 클라우드나 네이버 클라우드도 있다지만, 나중에 AWS를 이용해서 배포도 할 거니까 AWS를 사용해보자.

시작

우선 아래 화면 처럼 뜨게 될텐데 상단에 보면 오하이오라고 적혀있는 것을

서울로 바꿔보자.

사용자 생성/ 액세스키 발급하기

사용자 생성하기

상단 검색창에 iam을 치면 나오는 IAM을 눌러들어가보자.

들어가면 나오는 왼쪽에서 액세스 관리-사용자

사용자 계정을 만드는 이유는 내 AWS계정을 사용할 수 있는 하위계정을 만드는 것 되겠다. 우측 상단의 사용장 생성 버튼을 누르자.

그러면 다음 창이 나온다.
사용자 이름을 적어주고 다음 버튼을 눌러주자.

권한 설정 창이 나온다.
권한 옵션에서 직접 정책 연결을 눌러보면 각종 권한이 나온다.

S3를 사용할 거니까 S3를 검색하고, AmazonS3FullAccess를 체크하고, 다음을 눌러주자.

검토 및 생성 페이지에서 확인을 해주고, 사용자 생성을 눌러주자.

그러면 사용자 페이지가 나오면서 생성한 사용자를 확인할 수 있다.

액세스 키 만들기

내가 방금 만든 사용자를 눌러서 들어가면 액세스 키 만들기가 있다. 눌러보자.
액세스 키는 내가 현재 클릭한 사용자의 아이디비밀번호라고 생각하면 되겠다.

1단계

현재 본인은 로컬에서 사용하기 때문에 로컬 코드를 선택했다.
만약 다른 방식으로 사용한다면 다른 방식을 선택하면 된다.

그리고 다음 버튼을 누르면 된다.

2단계

설명 태그 설정
태그 입력은 옵션, 바로 액세스 키 만들기 선택

3단계

액세스 키 검색
액세스 키와, 비밀 액세스 키를 발급해주는데 서버 코드를 작성할 때 이 2개를 사용할 것이기 때문에 잘 저장해야한다.

S3 셋팅하기

상단 검색바에 S3를 검색하고 제일 위의, S3를 눌러보자.

버킷만들기

들어가면 아래처럼 창이 뜬다. 버킷만들기를 누르자.
버킷은 하나의 하드디스크라고 생각하자.

버킷만들기 창이 나온다.

버킷 이름은 unique하게 작명!

AWS리전은 가까운 곳으로 나는 아시아 태평양(서울)로 했다.

객체 소유권은 ACL 비활성화됨.

이 버킷의 퍼블릭 엑세스 차단 설정: 우선은 모두 차단 해제. 모든 테스트 완료 후에는 위에 2개는 다시 차단을 눌러주자.

그 외 나머지는 건들지 말자.

맨 하단의 버킷 만들기 버튼 클릭

그러면 이미지를 업로드 할 수 있는 버킷이 생성된 것을 확인할 수 있다.
하지만, 권한을 설정해주자. 버킷이름을 눌러주자.

버킷 권한 설정하기

객체,속성,권한,지표,관리,액세스지점 탭 중 권한을 눌러주자.

어떤 사람들이 이 버킷에 이미지를 업로드 할 수 있는지
어떤 사람들이 이 버킷에서 이미지를 읽을 수 있는지

에 대한 권한을 설정.

설정 방법 2가지가 있다.

버킷 정책으로 설정

ACL(액세스 제어 목록)으로 설정

근데 최근엔 버킷 정책으로 설정하라고 권장한다. ACL은 옛날 방식?이라고 할까나.

따라서 버킷 정책에서 편집을 눌러보자.

버킷 정책 편집 창이 나온다.

아래 코드를 입력하자.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::해당버킷명/*"
        },
        {
            "Sid": "2",
            "Effect": "Allow",
            "Principal": {
                "AWS": "해당ARN"
            },
            "Action": [
                "s3:PutObject",
                "s3:DeleteObject"
            ],
            "Resource": "arn:aws:s3:::해당버킷명/*"
        }
    ]
}

우선 Actions 항목에서

자료 읽기는 s3:GetObject
쓰기는 s3:PutObject
삭제는 s3:DeleteObject

위 코드를 해석하면
1반 정책과 2번 정책으로 정책을 2개 만들었다.
1번 정책은 아무나 버킷의 데이터를 읽을 수 있음.
Action을 보면 누가 get할 수 있는지를 적어놨는데, principal에서 '*'를 이용해서 모두라고 해놨음.
2번 정책에서 Action을 보면 Put과 Delete를 누가 할 수 있는지(이미지, 추가-수정-삭제)를 principal에서 보니 이 arn을 가진 사람만 할 수 있다라고 명명 해놨다.

더 수정할 게 있다면 각자 수정해보고, 변경 사항 저장을 누르면 정책 저장이 되었다.

이제 CORS 설정도 손봐주자. 편집을 누르자.
(어떤 도메인에서 이 도메인을 가져다 쓸 수 있는지를 설정)

CORS를 설정할 수 있는 창이 뜬다.

아래 코드를 입력해주자.
그리고 변경 사항 저장을 눌러주자.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ]
    }
]