[Spring Boot + Amazon S3] - 이미지 업로드, 조회 방법

🌈 개발 환경

이번 프로젝트에서 이미지 파일을 Amazon S3에 업로드(저장) / 조회 / 삭제 하는 기능을 개발하게 되었다.

 

참고로 프론트엔드에서는 Next.js 를 사용하고, 백엔드에서는 Spring Boot 를 사용하여 개발을 진행하고 있다.

 

따라서 Spring Boot, Amazon S3 를 사용하여 이미지 파일을 업로드(저장)하고 다시 조회 및 삭제하는 방법에 대해 차근차근 적어보려 한다.

비슷한 환경에서 개발하는 사람들에게 도움이 되었으면 하는 마음이다!

 

🔥 전체적인 Flow

1. 프론트엔드에서 이미지 파일을 Form data 로 포장하여 백엔드에게 전달

2. 백엔드에서 해당 이미지를 Amazon S3 에 업로드, 업로드된 이미지 정보를 DB에 저장

3. 프론트엔드에서 이미지 조회시, 백엔드에서는 S3에 저장된 해당 이미지의 URL 을 생성

4. 생성된 이미지 URL을 프론트엔드에게 전달

5. 프론트엔드에서 해당 URL로 이미지를 표시하거나 다운로드

 

 

참고로 구현에 앞서 S3 버킷 생성과 IAM 사용자 설정을 해야 한다. 필자는 이 링크를 참고했다.

다만, 현재는 IAM 사용자 생성을 완료한 이후에 추가로 액세스 키를 만들어야 한다.

중요한 것은 버킷에 접근하기 위해 필요한 액세스 키(.csv 파일)를 반드시 저장해두어야 한다는 점이다!!

 

추가로 S3 버킷의 Cors 설정은 이 링크와 AWS 공식 문서를 참고했다.

 

 

이제, 본격적으로 Spring Boot 에 구현해보자.

 

🌈 build.gradle

implementation 'org.springframework.cloud:spring-cloud-starter-aws:2.2.6.RELEASE'

 

🌈 application-aws.yaml

우리 프로젝트에서는 여러개의 설정파일(application-database.yaml 등)을 사용하고 있기 때문에 S3 관련 설정은 application-aws.yaml 파일을 만들어서 해주었다.

 

이러한 설정 파일은 절대! 깃허브에 노출되면 안되기 때문에 .gitignore 에 추가해주고, 깃허브 Actions 의 Secrets 에 application-aws.yaml 파일 내용을 추가했다.

 

spring:
  servlet:
    multipart:
      max-request-size: 10MB
      max-file-size: 10MB
cloud:
  aws:
    credentials:
      access-key: {액세스 키}
      secret-key: {시크릿 키}
    s3:
      bucket: {버킷 이름}
    region:
      static: ap-northeast-2
    stack:
      auto: false

 

🌈 IntelliJ 설정

 

Spring Cloud AWS 의존성을 추가한 후 애플리케이션을 실행하면 콘솔에 에러메세지가 출력된다.

이를 방지하기 위해 [Run] > [Edit Configurations] 에서 VM 옵션에 아래 내용을 추가하자.

 

-Dcom.amazonaws.sdk.disableEc2Metadata=true

 

 

(참고: https://thalals.tistory.com/289 , https://kim-jong-hyun.tistory.com/79)

 

🌈 AwsS3Config 작성

import com.amazonaws.auth.AWSStaticCredentialsProvider;
import com.amazonaws.auth.BasicAWSCredentials;
import com.amazonaws.services.s3.AmazonS3;
import com.amazonaws.services.s3.AmazonS3ClientBuilder;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class AwsS3Config {

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

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

    @Value("${cloud.aws.region.static}")
    private String region;

    @Bean
    public BasicAWSCredentials basicAWSCredentials() {
        return new BasicAWSCredentials(accessKey, secretKey);
    }

    @Bean
    public AmazonS3 amazonS3(BasicAWSCredentials basicAWSCredentials) {
        return AmazonS3ClientBuilder.standard()
                .withRegion(region)
                .withCredentials(new AWSStaticCredentialsProvider(basicAWSCredentials))
                .build();
    }
}

 

🌈 AwsS3Controller 작성

awsS3Service.upload() 의 두번째 인자는 버킷 하위에 생성할 폴더 이름이다.

즉, 새로운 이미지 파일을 업로드 하면 {버킷 이름}/test/ 폴더 안에 생성된다.

 

import repick.repickserver.domain.product.domain.AwsS3;
import repick.repickserver.domain.product.application.AwsS3Service;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;

@RestController
@RequestMapping("/s3")
@RequiredArgsConstructor
public class AwsS3Controller {

    private final AwsS3Service awsS3Service;

    @PostMapping("/resource")
    public AwsS3 upload(@RequestPart("file") MultipartFile multipartFile) throws IOException {
        return awsS3Service.upload(multipartFile,"test");
    }

    @DeleteMapping("/resource")
    public void remove(AwsS3 awsS3) {
        awsS3Service.remove(awsS3);
    }
}

 

🌈 AwsS3Service 작성

S3 에 이미지 파일을 업로드 하는 Flow 는 다음과 같다.

 

1. MultipartFile 을 File 로 변환해서 현재 프로젝트 경로에 업로드 한다.
2. 변환된 File 을 S3에 업로드 한다. (이때 파일명은 UUID를 붙여 새롭게 정해준다.)
3. S3에 업로드 된 파일의 key 와 path 를 반환한다. (아래에서 설명)
4. 변환 과정에서 현재 프로젝트 경로에 생성된 파일을 제거한다.

여기서 key 는 객체 이름(파일명) 이고, path 는 객체 URL 이다.

예를 들어, key 는 "example.jpg" 이고, path 는 "https://my-s3-bucket.s3.ap-northeast-2.amazonaws.com/example.jpg" 이다.

 

import com.amazonaws.services.s3.AmazonS3;
import com.amazonaws.services.s3.model.AmazonS3Exception;
import com.amazonaws.services.s3.model.CannedAccessControlList;
import com.amazonaws.services.s3.model.PutObjectRequest;
import repick.repickserver.domain.product.domain.AwsS3;
import lombok.RequiredArgsConstructor;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Optional;
import java.util.UUID;

@Service
@RequiredArgsConstructor
public class AwsS3Service {

    private final AmazonS3 amazonS3;

    @Value("${cloud.aws.s3.bucket}")
    private String bucket;

    public AwsS3 upload(MultipartFile multipartFile, String dirName) throws IOException {
        File file = convertMultipartFileToFile(multipartFile)
                .orElseThrow(() -> new IllegalArgumentException("MultipartFile -> File 변환 실패"));

        return upload(file, dirName);
    }

    private AwsS3 upload(File file, String dirName) {
        String key = randomFileName(file, dirName);
        String path = putS3(file, key);
        removeFile(file); // 로컬에 생성된 File 삭제 (MultipartFile -> File 변환 할 때 로컬에 파일 생성됨)

        return AwsS3
                .builder()
                .key(key)
                .path(path)
                .build();
    }

    private String randomFileName(File file, String dirName) {
        return dirName + "/" + UUID.randomUUID() + file.getName();
    }

    private String putS3(File uploadFile, String fileName) {
        amazonS3.putObject(new PutObjectRequest(bucket, fileName, uploadFile)
                .withCannedAcl(CannedAccessControlList.PublicRead));
        return getS3(bucket, fileName);
    }

    private String getS3(String bucket, String fileName) {
        return amazonS3.getUrl(bucket, fileName).toString();
    }

    private void removeFile(File file) {
        file.delete();
    }

    public Optional<File> convertMultipartFileToFile(MultipartFile multipartFile) throws IOException {
        File file = new File(System.getProperty("user.dir") + "/" + multipartFile.getOriginalFilename());

        if (file.createNewFile()) {
            try (FileOutputStream fos = new FileOutputStream(file)){
                fos.write(multipartFile.getBytes());
            }
            return Optional.of(file);
        }
        return Optional.empty();
    }

    public void remove(AwsS3 awsS3) {
        if (!amazonS3.doesObjectExist(bucket, awsS3.getKey())) {
            throw new AmazonS3Exception("객체 " +awsS3.getKey()+ " 이/가 존재하지 않습니다.");
        }
        amazonS3.deleteObject(bucket, awsS3.getKey());
    }
}

 

🌈 AwsS3 작성

import lombok.Builder;
import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class AwsS3 {

    private String key; // 파일명
    private String path; // 파일 경로 (객체 URL)

    public AwsS3() {

    }

    @Builder
    public AwsS3(String key, String path) {
        this.key = key;
        this.path = path;
    }
}

 

🌈 테스트

이제 Postman 으로 테스트 해보자.

 

이미지 업로드를 위한 POST 요청을 보내고,

 

 

AWS 에 가서 버킷을 확인해보면 짜잔! test 폴더 안에 이미지가 잘 업로드 되었다. 🙌

 

 

객체 이름을 선택해서 객체 URL을 누르면, 

 

 

이렇게 방금 올린 사진이 잘 보인다 😽

 

 

Postman 응답으로는 방금 업로드한 이미지 파일의 key 와 path 가 잘 오는 것을 확인할 수 있다!!

 

 

 

 

 

참고:

https://sennieworld.tistory.com/122

https://kim-jong-hyun.tistory.com/78