AWS S3를 활용해 프로젝트 구현 : 상품 & 프로필 서비스 이미지 스토리지로 활용하기

도입 취지

파일 스토리지로 사용할 서비스를 찾던 도중, 이미지 스토리지로 많이 활용한다는 AWS S3 서비스에 대해 알게 되었고, 다음과 같은 장점을 근거로 도입하기로 했다

 

장점

1. 확장성: S3를 사용하면 거의 무제한의 데이터를 저장하고 검색할 수 있으므로 빠르게 확장할 수 있는 기능이 필요한 애플리케이션에 적합하다.
2. 보안: S3는 서버 측 암호화, ACL(액세스 제어 목록) 및 버킷 정책을 비롯한 다양한 보안 기능을 제공하여 데이터를 보호하다.
3. 사용 용이성: S3는 사용하기 쉽고 다른 AWS 서비스와 원활하게 통합되므로 확장 가능하고 안정적인 애플리케이션을 구축하려는 개발자에게 적합하다.

구현 기간

02. 28 ~ 03. 03

 

실행 환경

- Spring boot 3.02

- Java 17

- Gradle

- Spring Cloud Starter aws 2.2.6

 

구현한 코드

1. Backend

0) AmazonS3Config

@Configuration
public class AmazonS3Config {


  @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 AmazonS3Client amazonS3Client() {
    BasicAWSCredentials awsCreds = new BasicAWSCredentials(accessKey, secretKey);
    return (AmazonS3Client) AmazonS3ClientBuilder.standard()
        .withRegion(region)
        .withCredentials(new AWSStaticCredentialsProvider(awsCreds))
        .build();
  }

}

 

0) application.properties

# multipart
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB
spring.file-dir=/home/ubuntu/app/src/main/resources
# aws
cloud.aws.credentials.access-key=ENC(SLFPdcj89oNQLKpRBGoFh/uaCmu7/41Z59rnsX6lMdg=)
cloud.aws.credentials.secret-key=ENC(hBKshx6HaHSeeXsGvqYxXC/MNBAQWZNjk5Jrau0+OnTchrj7HL2Pmm3vGkOq35W9twvLVmFqrKE=)
# S3 bucket region
cloud.aws.region.static=ap-northeast-2
cloud.aws.s3.bucket=knock-knock-image-bucket-1

 

1) S3 Controller

@RestController
@RequiredArgsConstructor
public class S3Controller {

  private final S3ServiceImpl s3Service;

  // 이미지 프로필용
  @PostMapping("/api/images/upload/profiles")
  public String imageUploadProfile(@RequestParam("profile") MultipartFile multipartFile) throws IOException {
    String s = s3Service.upload(multipartFile, "knock-knock-image-bucket-1", "profile");
    System.out.println(s);
    return s;
  }

  // 이미지 상품용
  @PostMapping("/api/images/upload/products")
  public String imageUploadProduct(@RequestParam("product") MultipartFile multipartFile) throws IOException {
    String s = s3Service.upload(multipartFile, "knock-knock-image-bucket-1", "product");
    System.out.println(s);
    return s;
  }

}

 

2) S3 Service

@Service
@RequiredArgsConstructor
public class S3ServiceImpl implements S3Service{

  private final AmazonS3Client amazonS3Client;

  @Value("${spring.file-dir}")
  private String fileDirectory;

  // 핵심 비즈니스 로직
  @Override
  public String upload(MultipartFile multipartFile, String bucket, String dirName) throws IOException {
    File uploadFile = convert(multipartFile).orElseThrow(
        () -> new IllegalArgumentException("파일 변환에 실패했습니다")
    );
    String fileName = dirName + "/" + UUID.randomUUID() + uploadFile.getName();
    String putS3 = putS3(uploadFile, bucket, fileName);
    removeFile(uploadFile);
    return putS3;
  }

  // S3로 업로드 ~ PutObjectFile 타입: 버킷 업로드 목적으로 만드는 객체의 URL을 반환
  // cannedAcl : 버킷 객체를 버킷 정책에 맞게 설정
  @Override
  public String putS3(File uploadFile, String bucket, String fileName) {
    amazonS3Client.putObject(new PutObjectRequest(bucket, fileName, uploadFile)
        .withCannedAcl(CannedAccessControlList.PublicRead));
    return amazonS3Client.getUrl(bucket, fileName).toString();
  }

  // 로컬에 저장된 이미지 지우기
  @Override
  public void removeFile(File savedLocalFile) {
    if (savedLocalFile.delete()) {
      System.out.println(savedLocalFile.getName() + "이 삭제되었습니다");
    } else {
      System.out.println(savedLocalFile.getName() + "이 삭제되지 않았습니다");
    }
  }

  // 이미지를 File 타입으로 변환하여 Optional로 반환
  @Override
  public Optional<File> convert(MultipartFile multipartFile) throws IOException {
    if(multipartFile.isEmpty()) return Optional.empty();

    // 파일 이름 조회
    String originalFilename = multipartFile.getOriginalFilename();

    // 이름변경, 형식을 file로 변경 후 파일 타입 변환
    File file = new File(fileDirectory + createStoreFileName(originalFilename));
    multipartFile.transferTo(file);

    return Optional.of(file);
  }

  // 파일 이름을 기존 파일과 겹치지 않도록 UUID를 사용하여 만들고 확장자를 뒤에 붙여 이미지 확장자를 유지한다
  @Override
  public String createStoreFileName(String originalFilename) {
    return UUID.randomUUID() + "." + extractExt(originalFilename);
  }

  // 사용자가 업로드한 파일에서 확장자를 추출
  @Override
  public String extractExt(String originalFilename) {
    int pos = originalFilename.lastIndexOf(".");
    return originalFilename.substring(pos + 1);
  }
}

 

2. Frontend

1) product.js

// 사진 등록하기
$('#uploadPhoto').click(function(event) {
  event.preventDefault();
  var fileInput = document.getElementById("fileInput");
  var file = fileInput.files[0];
  var formData = new FormData();
  formData.append("product", file);
  
  $.ajax({
    url: URL_VARIABLE + "api/images/upload/products",
    type: 'POST',
    data: formData,
    headers: {
      Authorization: userToken
    },
    processData: false,
    contentType: false,
    success: function(response) {
      console.log(response)
      document.getElementById("image-url").value = response
      let image_preview = response 
      let temp_html = `<img src=${image_preview} style="width: 300px; height: 300px;">`
      
      $('#image-preview').append(temp_html);
    },
    error: function() {
      alert("An error occurred while uploading the file.");
    }
  });
});

 

2) addProduct.html

<tr>
        <th><label for="productPhoto">상품사진</label></th>
        <td><input type="file" id="fileInput" name="fileInput" /></td>
        <td><button class="form-control" id="uploadPhoto">사진 업로드</button></td>
      </tr>

 

Sequence Diagram을 활용한 기능 흐름

 

트러블 슈팅

- 파일명을 중복되지 않게 변환하고 이를 S3에 업로드하기 전에 저장하는 로직인데, 이를 배포하기 위해서 우분투를 활용해야 했다. 최종 프로젝트에서는 우분투로 연결해서 배포하는 부분을 내가 직접 구현한 것은 아니기 때문에 이후 개인 프로젝트에 추가로 연습해봐야겠다.

소감

간단하다면 간단하고, 까다롭다면 까다로울 수도 있는 기능 구현이었다. 다만 이를 통해 AWS와 더욱 친숙해질 수 있었다. 클라우드를 데이터베이스로 활용하는 것이 점점 더 자연스러워지고 대세가 되고 있는 환경의 앞선 기술 중 하나를 구현할 수 있던 기회를 얻을 수 있어 값진 시간이었다.