Spring boot , aws S3 버킷에 이미지 업로드

 S3 버킷에 이미지를 업로드 할 일이 생겨서 이것저것 찾아보았습니다. 

다른 블로그 분의 게시글을 참고하여 작성하였고 추후에 Rest로 구현해보겠습니다. 

 

* AWS 관련 설정은 생략합니다.

 

0. 가장 먼저 access key, secret key를 발급받습니다.

우측 "내 보안 자격 증명"을 클릭합니다.

 

키를 생성합니다.

 

 

1. 필요한 라이브러리 셋팅

// AWS S3
implementation platform('com.amazonaws:aws-java-sdk-bom:1.11.1000')
implementation 'com.amazonaws:aws-java-sdk-s3'

// html,  렌더링
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

 

2. 파일 업로드 뷰 [ resources/templates/index.html ]

<input type="file" id="file">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossOrigin="anonymous"></script>
<script>
    $(function() {
        $('#file').on('change', function () {
            var formData = new FormData();
            var userImg = $('#file');
            var originalFileName = userImg[0].files[0].name;

            formData.append('userImg', userImg[0].files[0], originalFileName);

            $.ajax({
                type: 'post',
                url: '/apis/upload-img',
                data: formData,
                dataType: 'json',
                processData: false, // 파일 전송할 때는 false(query string을 만들지 않기 위함)
                contentType: false, // default ->  "application/x-www-form-urlencoded; charset=UTF-8", false -> "multipart/form-data"
                error: function (xhr, status, error) {
                    alert('파일 업로드 실패');
                },
                success: function (json) {
                    alert('파일 업로드 성공');
                }
            });
        });
    });
</script>

 

3. application-aws.yml 저장

cloud:
  aws:
    s3:
      bucket: [ 버킷명 - arn 콜론 맨 끝 위치해 있는 이름입니다. ]
    region:
      static: ap-northeast-2
    stack:
      auto: false
    credentials:
      instanceProfile: true # AWS CLI에서 aws configure list 정보 반영 확인 여부
      accessKey: [ access key를 적어줍니다. ]
      secretKey: [ secret key를 적어줍니다. ]

 

4. .gitignore에 application-yml 추가 

application-aws.yml

 

5. application.yml에 프로필 추가

spring:
  profiles:
    include:
      - aws

 

6. Service 코드

@Slf4j
@Service
@RequiredArgsConstructor
public class AwsS3Service {

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

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

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

	private AmazonS3 s3Client;

	// 생성자 생성 이전에 S3 정보를 생성
	@PostConstruct
	public void setS3Client() {
		AWSCredentials credentials = new BasicAWSCredentials(this.accessKey, this.secretKey);

		s3Client = AmazonS3ClientBuilder.standard()
			.withCredentials(new AWSStaticCredentialsProvider(credentials))
			.withRegion(Regions.AP_NORTHEAST_2)
			.build();
	}

	// s3 sdk를 이용하여 실제 이미지를 업로드하는 부분
	public String uploadImage(MultipartFile file) {
		String fileName = file.getOriginalFilename();

		try {
			s3Client.putObject(new PutObjectRequest(bucket, fileName, file.getInputStream(), null)
				.withCannedAcl(CannedAccessControlList.PublicRead));
		} catch (IOException e) {
			e.printStackTrace();
		}

		return s3Client.getUrl(bucket, fileName).toString();
	}
}

 

 

7. controller 코드

@Slf4j
@Controller
@RequiredArgsConstructor
public class AwsS3Controller {

	@Autowired
	private final AwsS3Service awsS3Service;

	// >> pt 5. thymeleaf 모듈이 있어야 포워딩 가능
	@GetMapping("/apis/upload")
	public String getMainPage() {
		log.info("log");
		return "index";
	}

	@PostMapping("/apis/upload-img")
	@ResponseBody
	public ResponseEntity<ApiResponseMessage> uploadImage(@RequestParam("userImg") MultipartFile file) {

		String imageUrl = awsS3Service.uploadImage(file);

		if (imageUrl == null) {
			ApiResponseMessage message = new ApiResponseMessage("Fail", "Upload Fail", "", "");
			return new ResponseEntity<>(message, HttpStatus.BAD_REQUEST);
		}
		ApiResponseMessage message = new ApiResponseMessage("Success", imageUrl, "", "");

		return new ResponseEntity<>(message, HttpStatus.OK);
	}
}

 

8. 반환될 응답 메시지 형식 (자유) 

@Data
@AllArgsConstructor
@NoArgsConstructor
public class ApiResponseMessage {

	private String status;
	private String message;
	private String errorMessage;
	private String errorCode;
}

 

 

9. 실행 후 파일 업로드 하면 S3에 올라간 것을 확인할 수 있습니다. 

 

 

 

 

 

[참고 코드]

[1] https://cbw1030.tistory.com/m/335?category=1067183