[Springboot] AWS S3 버킷을 이용한 PresignedUrl로 이미지 업로드 구현하기

도입하게 된 과정

사용자가 이미지를 업로드해야하는 상황 발생했다.

프론트 개발자들과 이미지 업로드 구현을 Multipart 자체를 주고 받는 것으로 논의를 했다가, 해당 구현은 문제점이 있었다.

 

서버 부하가 올 가능성이다.

현재 우리 서버는 ec2 micro2를 사용하고 있으며, 이미 메모리 부족 이슈가 발생하고 있다.

이미지 파일용량 자체가 매우 크기에, 이미지 업로드가 백엔드 서버를 거치게되면 백엔드 서버가 금방 죽게 된다.

해당 문제에 대한 해결 방법으로 Presigned-url을 사용한다고 한다.

 

기존의 방식

1. 서버가 클라이언트에게 이미지 자체를 받는다.

2. 서버가 보안절차를 거친다.(AWS sdk secret key를 활용해 s3접속)

3. 서버가 버킷에 이미지를 올린다.

이렇게 구현된 이유는 보안이슈 때문이다. 아무나 이미지를 업로드하게 하면 안되기에, 서버를 거쳐 이미지 업로드를 구현했었다. 

 

PresignedUrl이란? 

모든 객체는 기본적으로 비공개이며, 객체 소유자만 객체에 액세스 할 수 있다. 객체 소유자는 필요할 경우 자신의 보안 자격 증명을 사용하여 일정기간 동안 객체 다운로드를 허가하는 미리 서명된 URL 을 만들어 다른 사용자와 객체를 공유할 수 있다. 

이 Presigned-Url을 통해 클라이언트는 백엔드 서버를 거치지 않고, 바로 S3로 업로드가 가능해진다.

위의 기존 방식 2번절차를 서버가 하고, 3번을 클라이언트가 하는 방식이다.

백엔드는 presignedUrl을 생성해줘 보안절차 작업을 진행해주고, Client는 이를 받아 AWS S3로 바로 업로드가 가능해진다.

 

PresignedUrl을 이용하게 되면

1. 사용자가 이미지 업로드를 한다.

2. 클라이언트는 서버에 filename을 보내며 PresignedUrl 요청을 보낸다.

3. 서버는 응답값으로 PresignedUrl과 파일 이름뒤에 날짜가 추가된 filename을 보낸다.

4. 클라이언트는 PresignedUrl에 Put 메소드로 file을 함께 넘겨주면 업로드가 완료된다. 

5. 업로드 후 받은 이미지 경로를 String 형태로 서버에 전달한다.

---

구현 과정 

1. S3에서 버킷 생성하기 

저희 서비스는 모든 사용자가 업로드한 파일을 Public하게 접근할 수 있어야한다.

버킷을 생성할때 퍼블릭 엑세스 차단 설정을 해제함.

이렇게 설정하고 나면 버킷 생성완료!

 

버킷 생성한 후, 정책 설정을 하기 위해 버킷을 편집

버킷 > 권한탭의 정책 편집을 클릭

1 - 1 . 정책생성

 

버킷 ARN 복사하고 뒤에 /* 붙이기

 

 

Effect: Allow

Principal: *

AWS Service: Amazon S3

Actions: Get*, Put*

ARN : arn:aws:s3:::{bucket_name}/*

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:Put*",
                "s3:Get*"
            ],
            "Resource": "arn:aws:s3:::wish-image-bucket/*"
        }
    ]
}

1 - 2. CORS 에러 방지 설정

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

---

2. IAM 권한 생성

S3버킷에 접근할 수 있는 사용자를 통해 API 내에서 파일을 버킷에 업로드할 수 있도록 IAM 서비스에 접근 가능한 사용자를 추가해야한다.

사용자 이름 입력 > 직접 정책 연결 옵션 선택 AmazonS3FullAccess권한을 추가하고 사용자를 추가한다.

엑세스키를 만들고, CSV 파일을 꼭 꼭 저장해야한다!!!!!!!!!!!!!!!!!

---

3.  Springboot 프로젝트 적용하기

의존성 추가

implementation 'software.amazon.awssdk:s3:2.17.285'

Properties 파일

cloud:
  aws:
    region: ap-northeast-2
    credentials:
      access-key: {IAM access-key}
      secret-key: {IAM secret-key}
  s3:
      bucket: {버킷이름}

Config 파일 생성

package com.sopterm.makeawish.config;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import software.amazon.awssdk.auth.credentials.AwsBasicCredentials;
import software.amazon.awssdk.auth.credentials.AwsCredentials;
import software.amazon.awssdk.auth.credentials.StaticCredentialsProvider;
import software.amazon.awssdk.regions.Region;
import software.amazon.awssdk.services.s3.S3Client;
import software.amazon.awssdk.services.s3.presigner.S3Presigner;

@Configuration
public class S3Config {
    @Value("${cloud.aws.region}")
    private String region;

    @Value("${cloud.aws.credentials.access-key}")
    private String accessKey;

    @Value("${cloud.aws.credentials.secret-key}")
    private String secretKey;

    @Bean
    public AwsCredentials basicAWSCredentials() {
        return AwsBasicCredentials.create(accessKey, secretKey);
    }

    @Bean
    public S3Presigner s3Presigner(AwsCredentials awsCredentials) {
        return S3Presigner.builder()
                .region(Region.AP_NORTHEAST_2)
                .credentialsProvider(StaticCredentialsProvider.create(awsCredentials))
                .build();
    }

    @Bean
    public S3Client s3Client (AwsCredentials awsCredentials) {
        return S3Client.builder()
                .region(Region.AP_NORTHEAST_2)
                .credentialsProvider(StaticCredentialsProvider.create(awsCredentials))
                .build();
    }
}

 

https://github.com/Make-A-Wish-Sopt/Make-A-Wish-Server/pull/110/files

[FEAT] 이미지 업로드 구현 by yujindonut · Pull Request #110 · Make-A-Wish-Sopt/Make-A-Wish-Server