[기능 요청] S3 Presigned URL 사용하여 이미지 업로드 방식 개선 #203
Description
💡 개요
- 참고 자료 : 블로그 링크
📌 S3 URL 예시
- S3 imageURL :
https://pnu-comon-s3-bucket-v2.s3.ap-northeast-2.amazonaws.com/team_recruit/a8a8075a-b073-47de-9fa9-fcfdb8109884.jpg - S3 Presigned URL :
https://pnu-comon-s3-bucket.s3.ap-northeast-2.amazonaws.com/article/5fa93f5b-ff0d-41a2-9af1-7d42b019c6c4_test-image.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20250315T054253Z&X-Amz-SignedHeaders=content-type%3Bhost%3Bx-amz-acl&X-Amz-Expires=600&X-Amz-Credential=AKIA3FLDZ67HE2QVKN2X%2F20250315%2Fap-northeast-2%2Fs3%2Faws4_request&X-Amz-Signature=d2b14f29d7c4bc9146ceea3be7bd96bd484ebe3a1291db0abf628abb1ece0850
현재 코드몬스터에서 이미지 업로드가 사용되는 4곳의 성능을 개선해봅시다-!
- Article - 게시글
- Member - 멤버 프로필 이미지
- Team - 팀 이미지
- TeamRecruit - 팀 모집글
🔄 기존 방식 vs 새로운 방식
🥲 기존 방식
기존에는 Multipart를 통해 백엔드로 이미지를 전달하여 백엔드에서 S3에 이미지를 put하고 S3 imageUrl을 생성하여 따로 image 테이블에 저장해주는 방식이었습니다.
🤩 새로운 방식
S3 Presigned URL을 사용한 방식은 프론트에서 S3 Presigned URL을 백엔드로부터 발급 받아, S3에 이미지를 직접 put하여 프론트에서 S3 imageUrl을 생성하는 방식입니다.
저는 해당 기능을 도입하려고 했을 때 다음과 같은 것들이 궁금했습니다!
(1) 프론트에서 S3에 이미지를 넣든, 백엔드에서 S3에 이미지를 넣든 똑같은 거 아닌가?
S3 Presigned URL을 사용하는 가장 큰 이유 중 하나는 Multipart 방식의 비효율성때문입니다! Multipart로 무거운 이미지 파일이 서버로 운반되는 과정 자체가 너~~무 메모리를 많이 잡아먹기에 느릴 수밖에 없어요! 비록 S3에 이미지를 put하는 시간은 비슷할지 몰라도 이미지 파일을 백엔드로 운반하지 않는다는 거만으로 엄청난 이득이에요!
(2) 백엔드로부터 S3 presigned URL을 발급 받는데 시간이 많이 소요되지 않을까?
S3 Presigned URL를 발급 받는 API는 굉장히 라이트한 API이기에 너무 많은 시간을 소요하지 않습니다!
🚀 S3 Presigned URL을 사용한 상세 구현 방안
1️⃣ 게시글 (Article)
게시글에 위와 같이 이미지를 넣을 수 있습니다!
저희 코몬에서는 게시글 본문을 articleBody로 html 모두를 데이터베이스에서 저장하는데요! 사용자가 게시글에 이미지를 넣어 저장하게 되면 프론트 단에서는 articleBody의 img src에 정확한 이미지 URL을 넣을 수 없기에 일단 ?를 집어넣습니다. 이후 백엔드에서 S3에 이미지를 Put하고 이미지 URL을 articleImage라는 테이블에 저장하여 관리하였어요! 이후 해당 게시글에 GET요청을 할 때 ?에 S3 이미지를 매핑시켜 반환하는 방식이랍니다!
이는 구조상으로도 너무 복잡하고 시간도 많이 걸리니깐 앞으로는 사용자가 게시글에 이미지를 저장하려고 한다 -> S3 Presigned URL 발급 -> 프론트에서 직접 S3 imageURL 사용 -> img src 로 곧바로 사용 가능! -> articleImage 필요 없음
2️⃣ 팀 모집글 (TeamRecruit)- 1️⃣ 게시글 (Article) 방식과 똑같은 방식으로 리팩토링해야합니다!
3️⃣ 멤버 프로필 이미지 (Member)
'마이페이지 - 계정정보 - 이미지'를 통해 프로필 사진을 바꿀 수 있습니다! 이 경우 또한 사용자가 이미지 업로드를 통해 프로필 사진을 바꾸려고 한다면, S3 Presigned URL을 발급하여 프론트에서 이미지를 S3에 업로드하고 S3 imageURL을 백엔드에게 전달하는 방식으로 바꿔주세요!
4️⃣ 팀 이미지 (Team)
팀을 생성하거나 팀 정보를 수정할 때 3️⃣과 마찬가지로 이미지 업로드가 가능합니다! (3)과 같이 리팩토링해주세요!
✅ To-do
- 게시글 본문에서 이미지 업로드 방식 S3 Presigned URL 사용하여 리팩토링
- 멤버 이미지 업로드 방식 S3 Presigned URL 사용하여 리팩토링
- 팀 모집글 이미지 업로드 방식 S3 Presigned URL 사용하여 리팩토링
- 팀 이미지 업로드 방식 S3 Presigned URL 사용하여 리팩토링