[s3] frontend에서 s3 bucket에 이미지 바로 올리기

dev stefanCho·2022년 1월 22일
1

s3

목록 보기
1/1

s3 bucket을 생성하고 이미지를 바로 업로드하는 방식을 설명합니다.

아래 설명은 Youtube를 보고 그대로 따라한 것입니다. 영상에서는 빠르게 지나가기때문에 참고용으로 작성하였습니다. 간단한 예제에 대한 소스코드 또한 영상의 설명란에서 확인할 수 있습니다.
순차적으로 끝까지 따라해서 정상동작하는 것을 2022년 1월 22일 기준으로 확인하였습니다.


1. s3 bucket 생성

bucket 생성은 s3에 들어가서 하나씩 차례로 진행해줍니다.
일단 생성시에 테스트용이기 때문에, public access를 풀어주도록 합니다. (아래처럼 체크해제)

2. Permission 설정

2-1) bucket policy 설정

다른건 변경사항없이 쭉 진행해줍니다.
bucket의 정책을 설정해줘야합니다. (Edit button click)

2-2) bucket policy 자동생성

여기서 정책을 선택사항에 따라 자동으로 생성해주는 것이 있습니다. (아래 버튼 클릭)

아래처럼 해주면 됩니다.
Actions에는 putObject를 선택하였습니다.
ARN포맷은 arn:aws:s3:::<bucket-name>을 입력해주면 됩니다. Add Statement를 하고

2-3) bucket policy 복붙하기

Generate Policy를 해서 2-1)의 Bucket Policy에 복붙해줍니다.
저장이 되지 않는다면, Resource 끝에 /*이 되어있는지 확인해봅시다.

2-4) bucket CORS 설정

아래처럼 입력해줍니다.

위 이미지에서 저는 ExposeHeaders에 Date를 추가하였습니다. response.headers.get('Date')로 날짜 값을 받아오기 위해서 입니다.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "HEAD",
            "GET",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "Date"
        ]
    }
]

3. IAM 설정

IAM은 AWS의 무료서비스로 User에 대한 각 AWS의 권한을 설정할 수 있습니다. User는 IAM에 설정한 policy에 따라서 api를 사용할 수 있습니다. 예를 들면 EC2에서 S3를 사용하기 위해서는 IAM에서 Role을 만들어서 EC2에 넣어줄 수도 있습니다.(영상 참고)
1,2번에서 생성한 s3 정책에 대한 사용자 접근권한을 만들게 됩니다.

3-1) Policies 생성

생성을 클릭합니다.

3-2) Policies 설정하기

아래처럼 하나씩 Service, Actions, Resources를 선택해줍니다.

Resources는 Specific으로 선택해서 아래처럼 해주면 됩니다.

2단계 Tags는 그냥 넘어가고 3단계인 Review에서는 Name만 입력해주면 됩니다. 이름은 bucket이름과 동일하게 만들어주도록 합시다. (이름이 다르면 헷갈리닌깐)

3-3) Users 생성

유저를 추가하는 단계입니다.

3-4) Users 설정

User name은 마찬가지로 bucket이름으로 통일해줍시다.(예제에서는 API키만 사용할 예정이라, bucket이름으로 했습니다. 실제로는 아무이름이나 하셔도 상관없습니다.) Access type에서는 Programmatic access를 선택합니다. 여기서 나오는 access key ID와 secret access key를 backend의 .env에 넣을 예정입니다.

policy는 위에서 만들어준 policy를 찾아서 선택하면 됩니다. (이거때문에 Policy부분을 설정한 것입니다.)

참고사항

  • API를 사용하기 위해서 Programmatic access를 선택한 것이고, AWS console에 로그인하는 User를 생성하기 위해서는 AWS Management Console access를 선택하면 됩니다. Management Console access를 선택하면 IAM User로 로그인할 수 있습니다.

3-5) access key ID와 secret access key를 사용

이제 완료가 되게 되면 key가 생성되게 됩니다. 해당키를 이용해서 s3 bucket에 접근할 수 있습니다. key를 갖고 있는 사용자에 한해서 s3를 이용할 수 있게 된 것입니다.

예제

간단하게 예제를 만들어봤습니다.
사진올리기를 클릭하여, 여러개의 이미지를 업로드하면, Upload 버튼 아래에 preview 이미지가 생성이 됩니다. preview 이미지가 맞다면 Upload(submit)버튼으로 s3에 파일을 저장하게 됩니다.
마지막으로 저장한 이미지에 대한 데이터를 우리서버에 저장할 수 있게 데이터를 만들어 줍니다.(POST로 저장하는 과정은 코드에 없습니다.)

소스코드를 참고해주시기 바랍니다.

profile
Front-end Developer

0개의 댓글