모바일 기기에서 S3에 이미지 업로드할 때 발생한 이슈 해결

이슈 발생

로컬 서버에서 S3에 이미지 업로드 API를 테스트할 때 정상 작동하던 API를 운영 서버에서 사용할 때, 에러가 발생했다. 모바일 기기에서 서비스를 이용해 이미지를 업로드하는 과정 중 이미지가 전송되지 않고, 413 Request Entity Too Large라는 에러를 리턴했다.

해결 과정

원인으로 원본 이미지가 너무 커서 그렇지 않을까 싶어 이미지를 리사이징하고 올리기로 결정했다.

// 변경전
public String upload(MultipartFile multipartFile) throws IOException {
        String contentType = multipartFile.getContentType();
        if (ObjectUtils.isEmpty(contentType)) {
            throw new InvalidFileContentException();
        }
        String s3FileName = UUID.randomUUID() + "-" + multipartFile.getOriginalFilename();

        ObjectMetadata objMeta = new ObjectMetadata();
        objMeta.setContentLength(multipartFile.getInputStream().available());

        amazonS3Client.putObject(bucket, s3FileName, multipartFile.getInputStream(), objMeta);

        return findFile(s3FileName);
    }

// 변경 후
public String upload(MultipartFile multipartFile) throws IOException {
        String contentType = multipartFile.getContentType();
        if (ObjectUtils.isEmpty(contentType)) {
            throw new InvalidFileContentException();
        }
        String s3FileName = UUID.randomUUID() + "-" + multipartFile.getOriginalFilename();
        String fileFormatName = multipartFile.getContentType()
                .substring(multipartFile.getContentType().lastIndexOf("/") + 1);
        MultipartFile resizedFile = resizeImage(s3FileName, fileFormatName, multipartFile);

        if (resizedFile.getSize() > 15000000) {
            throw new ResponseStatusException(HttpStatus.INTERNAL_SERVER_ERROR, "이미지 사이즈가 커 업로드 할 수 없습니다.");
        }
        ObjectMetadata objMeta = new ObjectMetadata();
        objMeta.setContentLength(resizedFile.getSize());
        objMeta.setContentType(resizedFile.getContentType());

        try (InputStream inputStream = resizedFile.getInputStream()) {
            amazonS3Client.putObject(bucket, s3FileName, inputStream, objMeta);
        } catch (IOException e) {
            throw new ResponseStatusException(HttpStatus.INTERNAL_SERVER_ERROR, "이미지 업로드에 실패했습니다.");
        }
        return findFile(s3FileName);
    }

하지만 이 방법만으로는 에러를 해결할 수 없었다.

구글링을 통해 더 알아보니 nginx를 사용 중일 때 파일 용량 제한에 에러가 발생할 수 있다는 글을 확인할 수 있었다.

아무런 설정을 하지 않을 시에 허용치가 1Mbyte라고 하며, 이를 넘을 경우 413 Request Entity Too Large 에러를 발생한다고 한다.

바로 nginx.conf파일에 다음 설정을 추가해주었다.

client_max_body_size 10M;

그러나 이 방법으로도 해결되지 않아 하루종일 구글링만 하고 있다가 혹시 몰라 프론트엔드 측에 상황을 설명하고, 방법이 없을지 물어보니 프론트엔드 서버에서도 nginx를 작동 중이라고 했다.

그래서 프론트엔드 서버에도 마찬가지로 위 설정을 추가해주니 업로드가 되지 않던 이미지들이 정상적으로 올라가는 것을 확인할 수 있었다.

느낀점

이번 에러를 해결하면서 안되는 것을 혼자서 해결하려고 끙끙 앓는 것보다는 할 수 있는 것을 다 해보고 나서도 안되면 내 현재 상황을 주변 팀원들에게 전파를 하는 것 또한 중요하구나라고 생각하게 되었다.

Reference

https://earth-95.tistory.com/129

https://velog.io/@cookncoding/iOS-이미지-용량-문제-gx7qjwp6