🚩최종 프로젝트 - S3를 이용한 파일(이미지) 업로드

AWS S3를 이용한 파일(이미지) 업로드

• S3 : Simple Storage Service 의 약자로 주로 파일 서버로 사용됨.

• 구글 드라이브처럼 파일 저장 서비스이며, 데이터를 온라인 오브젝트 형태로 저장하는 서비스라고 보면 됨!

• 왜 S3를 사용해서 이미지를 업로드 하는가?

  • S3 자체로 정적 웹 서비스 가능
  • S3는 저장 용량이 무한대이고 파일 저장에 최적화되어 있다. 용량을 추가하거나 성능을 높이는 작업이 필요없음.

  • 확장성 : 파일 서버는 트래픽이 증가함에 따라 서버 인프라 및 용량 계획을 변경해야 되는데 S3가 확장 및 성능 부분을 대신 처리해줌.

  • 내구성 : 여러 영역에 여러 데이터 복사본을 저장하므로 한 영역이 다운되더라도 데이터를 사용할 수 있고 복구가 가능함.

  • 결론 : S3는 저장하는 데이터 양에 대한 비용도 저렴하고 저장할 수 있는 데이터 양이 무한에 가까움. 또한 ‘elastic’ 한 성질 때문에 별도의 스토리지 확장, 축소에 신경쓰지 않아도 됨. FTP 서버처럼 단순한 파일 저장 영역으로 사용할 수도 있으며, 다양한 AWS 서비스의 사용 로그 저장, 정적 웹 사이트 호스팅, EBS 스냅샷의 저장 영역 기능 등을 가지고 있음.

  • 하지만 S3는 파일 업로드, 삭제, 업데이트만 가능하고 프로그램을 설치해서 저장하는 기능은 없음.

• S3 관련 용어

  • 객체(Object) : 파일과 파일 정보로 구성된 저장 단위로 파일이라고 생각하면 됨!

    • S3에 저장되는 데이터는 모두 객체라고 부름

    • 각 객체는 데이터와 메타데이터를 지니는데 S3 버킷에 올리는 객체가 바로 데이터이고 최종 수정일, 파일 타입 등의 데이터를 메타데이터라고 함. (메타데이터는 네임-벨류 쌍으로 이우러져 있다.)

    • 객체는 키를 통해서 버킷에서 유일한 것으로 식별될 수 있으며, 버킷에 존재하는 모든 객체는 단 하나의 키를 지닌다.

    = 따라서 S3 내에서 버킷, 키, 버전 ID를 통해 특정 객체를 파악할 수 있다.

  • 버킷(Bucket) : 다수의 객체를 관리하는 컨테이너로 파일 시스템이라고 보면 됨!

    • 만약 Nayoung(버킷 이름)이라는 이름의 버킷에 test.png 객체 파일을 저장하면 http://Nayoung.s3.amazonaws.com/test.png 라는 URL이 생성되게 됨.

    • S3을 구성할때, 버킷(Bucket)이라는 컨테이너를 놓을 리전을 선택하고, 해당 컨테이너 내부에 객체(Object)라는 형태로 데이터를 저장하는 형태로 스토리지를 구축함.

    • 한 계정 당 Bucket은 최대 100개까지 사용이 가능하고, 버킷 단위로 접근 제한을 설정할 수도 있다.

    • 단, Bucket의 소유권은 이전할 수 없기 때문에 주의해야 한다.

• S3 사용 예시

  • 클라우드 저장소 - 구글 드라이브처럼 사용 가능

  • 서비스의 대용량 파일 저장소 - 이미지, 동영상, 빅데이터
  • 서비스 로그 저장 및 분석
  • 서비스 사용자의 데이터 업로드 서버
  • 중요한 파일은 EC2의 SSD에 저장하지 말고 S3에 저장

AWS S3 생성하기

1. AWS 가입하기

2. AWS Console > S3 > 버킷 > 버킷 만들기

• 검색 창에 S3라고 입력하면 됨

• 해당 버킷 만들기 버튼 클릭

• AWS 리전이 “아시아 태평양(서울) ap-northeast-2인지 확인

• 버킷 이름 입력하고 액세스 차단 설정을 해제

  • 애플리케이션은 파일 조작 권한을 갖게 하고 권한 변경 필요 시에는 애플리케이션에 요청을 보내는 클라이언트의 파일 조작 권한은 스프링 시큐리티 권한 설정으로 하면 됨.

• 원래 ACL을 비활성화 했었는데 다음과 같은 오류로 인해 활성화로 변경함

 : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed: 
 com.amazonaws.services.s3.model.AmazonS3Exception: The bucket does not allow ACLs (Service: Amazon S3; Status Code: 400; Error Code: 
 AccessControlListNotSupported; Request ID: CQP6Y0Z9A93YXA1W; S3 Extended Request ID: 
2NqX1W81AanB67RTBGMPwbJxsEDAIl9FnsYuVOv9qLQFieLv7sNYubR9WzP5zVmC+/bbGBPD+q8XNr9Tn385cQ==; Proxy: null), S3 Extended Request ID: 2NqX1W81AanB67RTBGMPwbJxsEDAIl9FnsYuVOv9qLQFieLv7sNYubR9WzP5zVmC+/bbGBPD+q8XNr9Tn385cQ==] with root cause

• 이 오류는 Amazon S3 버킷이 액세스 제어 목록(ACLs)을 지원하지 않기 때문에 발생하는 문제. ACL 활성화 했지만 조금 더 찾아봐야 될 듯!

• 하지만 S3 공개설정은 S3에 업로드 된 파일을 파일 소유자가 아닌 다른 사람이 볼 수 있어, 데이터 유출사고 가능성이 높아짐.

▶ 보안사고 사례1: https://www.asiatime.co.kr/article/20220707500294

▶ 보안사고 사례2: https://m.boannews.com/html/detail.html?mtype=1&idx=108196

AWS는 S3 공개설정으로 보안 사고를 줄이기 위해. 23년 4월부터 생성한 S3는 공개설정을 비허용하고 ACL를 비활성화했음.

• 결론 : 비활성화해서 오류를 다른 방법으로 수정해야함.

multipartFiles.forEach(file -> {  
    String originalFilename = file.getOriginalFilename();  
    String fileName = createFileName(originalFilename);  
    String extension = getFileExtension(originalFilename);  
  
    ObjectMetadata objectMetadata = new ObjectMetadata();  
    validateFileSize(file.getSize(), extension);  
    objectMetadata.setContentLength(file.getSize());  
    objectMetadata.setContentType(file.getContentType());  
  
    try (InputStream inputStream = file.getInputStream()) {  
        amazonS3.putObject(new PutObjectRequest(bucket, fileName, inputStream, objectMetadata)  
                .withCannedAcl(CannedAccessControlList.PublicRead));  
    } catch (IOException e) {  
        throw new CustomException(ErrorCode.PUT_OBJECT_EXCEPTION);  
    }  
  
    String fileUrl = amazonS3.getUrl(bucket, fileName).toString();  
  
    // 파일 정보 데이터베이스에 저장  
    File fileEntity = new File(fileName, fileUrl, file.getContentType(), file.getSize());  
    fileRepository.save(fileEntity);  
    // 해당 엔티티를 리스트에 추가하고 반환
    fileEntities.add(fileEntity);  
});  
  
return fileEntities;

• 해당 코드에서 .withCannedAcl(CannedAccessControlList.PublicRead)) 해당 부분 제거하여 오류 해결

• 해결한 방법 : 이 오류는 현재 S3 버킷이 ACL을 지원하지 않기 때문에 발생하는 것으로 해결 방법은 코드를 수정하여 CannedAccessControlList를 제거함으로써 S3 버킷의 ACL 비활성화 설정과 일치하게 되었고 S3 버킷이 ACL을 사용하지 않도록 설정되어 있거나, 버킷 정책이 적절히 설정된 경우 ACL 없이도 파일 업로드가 정상적으로 진행됨!

3. 사용자 생성

• AWS console > IAM > 액세스 관리 > 사용자 > 사용자 추가 클릭

• 사용자 이름을 입력하고 다음을 클릭

• 직접 정책 연결을 선택하고 AmazonS3FullAccess를 선택 후 다음을 클릭하고 사용자 생성 버튼을 누르면 사용자가 생성됨!

4. 액세스 키 생성

• 외부에서 접속할 수 있도록 사용자의 액세스 키를 만들어 주어야 함.

• AWS console > IAM > 액세스 관리자 > 사용자 > 생성한 사용자 이름 클릭 > 보안 자격 증명 > 액세스 키 만들기 클릭!

• 아무거나 클릭하고 다음을 클릭 ( 클릭하면 액세스 키 사용 사례와 대안을 하단에 띄워주는 기능만 하기 때문에 무엇을 골라도 상관없음)

• 태그를 입력하고 액세스 키 만들기 클릭!

• 액세스 키 생성 완료 화면에서 생성된 공개키와 비밀키를 확인할 수 있음 (해당 화면이 아니면 비밀 액세스 키를 볼 수 없기 떄문에 .csv 파일로 받아두는 것이 좋음)

5. 스프링 연동

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

• build.gradle에 의존성 추가

cloud:  
  aws:  
    credentials:  
      accessKey: ${AWS_ACCESS_KEY}  
      secretKey: ${AWS_SECRET_KEY}  
  
    region:  
      static: ${AWS_REGION}  
      auto: false  
  
 stack:  
      auto: false  
  
 s3:  
      bucket: ${AWS_BUCKET_NAME}

• .env 파일을 만들어서 환경변수에 추가함

• stack.auto : false : EC2에서 Spring Cloud 프로젝트를 실행시키면 기본으로 CloudFormation 구성을 시작하기 때문에 설정한 CloudFormation이 없으면 프로젝트 실행이 되지 않기 때문에 해당 기능을 사용하지 않도록 false로 설정.

• S3Config.java

@Configuration  
public class S3Config {  
  
    @Value("${cloud.aws.credentials.accesskey}")  
    private String accessKey;  
    @Value("${cloud.aws.credentials.secretkey}")  
    private String secretKey;  
    @Value("${cloud.aws.region.static}")  
    private String region;  
  
    @Bean  
  public AmazonS3Client amazonS3Client() {  
        BasicAWSCredentials awsCredentials= new BasicAWSCredentials(accessKey, secretKey);  
        return (AmazonS3Client) AmazonS3ClientBuilder.standard()  
                .withRegion(region)  
                .withCredentials(new AWSStaticCredentialsProvider(awsCredentials))  
                .build();  
    }  
  
}

6. Postman API 테스트

• muitipart 데이터를 전송해야 하므로 Body 유형을 form-data로 선택하고 KEY 속성을 File을 선택함.

• s3에서 정상적으로 이미지가 저장된 것을 확인할 수 있음.

• DB에서 정상적으로 이미지가 저장된 것을 확인할 수 있음.

코드 분석

@Getter  
@Setter  
@NoArgsConstructor  
@Entity  
@Table(name = "files")  
public class File extends TimeStamped {  
  
    @Id  
 @GeneratedValue(strategy = GenerationType.IDENTITY)  
    private Long id;  
    private String fileName;  
    private String fileUrl;  
    private String fileType;  
    private long fileSize;  
  
    @ManyToOne(fetch = FetchType.LAZY)  
    @JoinColumn(name = "marker_id")  
    private Marker marker;  
  
    public File(String fileName, String fileUrl, String fileType, long fileSize) {  
        this.fileName = fileName;  
        this.fileUrl = fileUrl;  
        this.fileType = fileType;  
        this.fileSize = fileSize;  
    }  
  
}

• 파일 엔티티는 id, fileName, fileUrl, fileType, fileSize를 필드로 선언하고 markerId와 연관관계를 맺음. fileId가 자동으로 생성되고 몇 번의 marker와 연결되어있는지 확인하기 위함

@Slf4j  
@Service  
@Transactional  
@RequiredArgsConstructor  
public class FileService {  
  
    private static final long MAX_IMAGE_SIZE = 10 * 1024 * 1024; // 10MB  
  private static final long MAX_VIDEO_SIZE = 200 * 1024 * 1024; // 200MB  
  
  @Value("${cloud.aws.s3.bucket}")  
    private String bucket;  // 파일이 저장될 S3 버킷의 이름. 애플리케이션 프로퍼티에서 주입됨
    private final AmazonS3 amazonS3; //S3와 상호작용하는 AWS S3 클라이언트
    private final FileRepository fileRepository;  //파일 메타데이터와 상호작용하는 JPA 레포
  
    // 여러 파일을 S3에 업로드하고 파일 메타데이터를 DB에 저장하는 메서드
    public List<File> uploadFile(List<MultipartFile> multipartFiles) {  
  
        List<File> fileEntities = new ArrayList<>();  
  
        multipartFiles.forEach(file -> {  
            String originalFilename = file.getOriginalFilename();  
            String fileName = createFileName(originalFilename);  
            String extension = getFileExtension(originalFilename);  
  
            ObjectMetadata objectMetadata = new ObjectMetadata();  
            validateFileSize(file.getSize(), extension);  
            objectMetadata.setContentLength(file.getSize());  
            objectMetadata.setContentType(file.getContentType());  
  
            try (InputStream inputStream = file.getInputStream()) { 
                // amazonS3.putObject()를 통해 파일을 S3에 업로드 
                amazonS3.putObject(new PutObjectRequest(bucket, fileName, inputStream, objectMetadata));  
            } catch (IOException e) {  
                throw new CustomException(ErrorCode.PUT_OBJECT_EXCEPTION);  
            }  
  
            String fileUrl = amazonS3.getUrl(bucket, fileName).toString();  
  
            // 파일 정보 데이터베이스에 저장  
  File fileEntity = new File(fileName, fileUrl, file.getContentType(), file.getSize());  
            fileRepository.save(fileEntity);  
            // 해당 엔티티를 리스트에 추가하고 반환
            fileEntities.add(fileEntity);  
        });  
  
        return fileEntities;  
    }  
  
    // 고유한 파일 이름 생성하는 메서드
    private String createFileName(String fileName) {  
        // fileName이 원래 파일 이름
        return UUID.randomUUID().toString().concat(getFileExtension(fileName));  
    }  
  
    // 원래 파일 이름에서 파일 확장자를 추출
    private String getFileExtension(String fileName) {  
          
        try {  
            validateImageFileExtension(fileName);  
            return fileName.substring(fileName.lastIndexOf("."));  
        } catch (StringIndexOutOfBoundsException e) {  
            throw new CustomException(ErrorCode.FILE_NAME_INVALID);  
        }  
          
    }  
    
    //파일 확장자가 허용된 목록에 있는지 검증함.
    private void validateImageFileExtension(String filename) {  
  
        int lastDotIndex = filename.lastIndexOf(".");  
  
        if (lastDotIndex == -1) {  
            throw new CustomException(ErrorCode.EXTENSION_IS_EMPTY);  
        }  
  
        String extension = filename.substring(lastDotIndex + 1).toLowerCase();  
        List<String> allowedExtensionList = Arrays.asList("jpg", "jpeg", "png", "avi", "mp4", "gif");  
  
        if (!allowedExtensionList.contains(extension)) {  
            throw new CustomException(ErrorCode.EXTENSION_INVALID);  
        }  
  
    }  
  
    // 파일 크기 검증하는 메서드
    private void validateFileSize(long size, String extension) {  
  
        if (isImageFile(extension) && size > MAX_IMAGE_SIZE) {  
            throw new IllegalArgumentException("이미지 파일 크기는 10MB를 초과할 수 없습니다.");  
        } else if (isVideoFile(extension) && size > MAX_VIDEO_SIZE) {  
            throw new IllegalArgumentException("비디오 파일 크기는 200MB를 초과할 수 없습니다.");  
        }  
  
    }  
  
    // 파일 확장자가 이미지 파일인지 확인
    private boolean isImageFile(String extension) {  
  
        return extension.equals("jpeg") || extension.equals("jpg") || extension.equals("png");  
    }  
  
    // 파일 확장자가 비디오 파일인지 확인
       private boolean isVideoFile(String extension) {  
  
        return extension.equals("mp4") || extension.equals("avi") || extension.equals("gif");  
    }  
  
    public void deleteFile(String fileUrl) {  
        // 파일 URL로 S3에서 삭제  
        String key = getKeyFromFileAddress(fileUrl);  
  
        try {  
            amazonS3.deleteObject(new DeleteObjectRequest(bucket, key));  
            // 파일 URL로 데이터베이스에서 삭제  
            fileRepository.deleteByFileUrl(fileUrl);  
        } catch (Exception e) {  
            log.error("Error occurred while deleting the file", e);  
            throw new CustomException(ErrorCode.IO_EXCEPTION_ON_IMAGE_DELETE);  
        }  
  
    }  
  
    // 파일 URL에서 S3키를 추출
    private String getKeyFromFileAddress(String fileAddress) {  
  
        try {  
            // url을 URL 객체로 변환
            URL url = new URL(fileAddress);  
            String decodingKey = URLDecoder.decode(url.getPath(), StandardCharsets.UTF_8);  
            return decodingKey.substring(1); // 맨 앞의 '/' 제거하여 S3키를 얻음
  } catch (MalformedURLException e) {  
            e.printStackTrace();  
            throw new CustomException(ErrorCode.IO_EXCEPTION_ON_IMAGE_DELETE);  
        }  
  
    }  
  
}

• 원래 FileService에서 상기의 내용을 처리하고 MarkerController와 MarkerService에서 하기의 내용을 처리하려고 함.

• 추가로 파일 저장은 MarkerResponseDto로 반환하려고 함. 왜냐하면 위도, 경도, 글 내용 등의 내용도 프론트에 같이 보내기 위함.

// 파일 저장  
@PostMapping("/markers/files")  
public ResponseEntity<CommonResponseDto<List<MarkerResponseDto>>> uploadFile(@RequestPart(value = "file", required = false) List<MultipartFile> multipartFiles) {  
    List<MarkerResponseDto> responseDto = markerFileService.uploadFiles(multipartFiles);  
  
    return new ResponseEntity<>(new CommonResponseDto<>(201, "파일 업로드에 성공하였습니다. 🎉", responseDto), HttpStatus.CREATED);  
}  
  
// 파일 삭제  
@DeleteMapping("/markers/{markerId}/files")  
public ResponseEntity<CommonResponseDto<String>> deleteFile(  @PathVariable Long markerId,  
                                                              @RequestParam String fileUrl){  
    markerFileService.deleteFile(markerId, fileUrl);  
  
    return ResponseEntity.ok(new CommonResponseDto<>(200, "파일 삭제에 성공하였습니다. 🎉", null));  
}

• 해당 오류 발생 : 순환 참조(circular reference) 문제를 해결하기 위해 MarkerService와 FileService 간의 의존성을 끊어야 함. 순환 참조는 두 개 이상의 빈이 서로를 참조할 때 발생.

• 이를 해결하기 위해 MarkerSevice에서 파일 관련 작업을 수행하는 로직을 별도의 서비스로 분리함 > MarkerFileService

• MarkerFileService에서 uploadFile 처리랑 해당 리스트를 MarkerResponseDto로 반환되게 수정해서 해결함.

S3 권한 정책 수정

• AmazonS3 > 버킷 > [버킷name] > 에 들어와서 속성 객체 URL에 접속하면 다음과 같은 에러가 뜸

This XML file does not appear to have any style information associated with it. The document tree is shown below.  
<Error>  
<script/>  
<script/>  
<script/>  
<Code>AccessDenied</Code>  
<Message>Access Denied</Message>  
<RequestId>9F6RK80ZW51YE3F2</RequestId>  
<HostId>0L7lglmFWQNleQGjCw5NF9itdEkjhzS+itwhMeNxNpyNHKshc1GmwUthSaU/w3IyCFGrDJMlzDU=</HostId>  
</Error>

• AmazonS3 > 버킷 > 권한에서 버킷 정책 수정

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[버킷name]/*"
        }
    ]
}

• 다음과 같이 수정하면 객체 URL에 접속할 때 정상적으로 이미지가 뜸!