s3 이미지 저장 관련 프론트 vs 백엔드 고민

Question

질문 내용과 구현 의도가 너무 미흡한 것 같아 조금 더 자세히 적습니다. 죄송합니다.우선 제가 구현하고자 하려고 하는 것은 okky나 블로그처럼 게시글의 중간에도 사진이 삽입되어 있는 게시물입니다. 프론트와 백 개발을 모두 혼자 하고 있습니다.현재 저는 에디터에 이미지가 올라오면 이미지를 바로 저장하는 것이 아닌 submit 되었을 때 이미지와 게시물을 저장하고 있습니다. 또한 submit 시점에 프론트에서 본문과 비교하여 file을 필터링하고 있습니다. 아래 코드가 기존에 제가 질문하였던 방법 1입니다.: 게시글 작성 버튼 클릭 > 이미지를 먼저 s3에 저장(api) > 반환 받은 url을 게시글 본문에 삽입 > 게시글 저장(api) const [uploadedImages, setUploadedImages] = useState<{ id: string; file: File }[]>([]); ... const handleSubmit = async (data: z.infer) => { ... // 본문과 일치하는 이미지 file들을 filtering합니다. const matchedImages = findMatchedImages(data.content, uploadedImages); // 이미지를 먼저 업로드합니다. if (matchedImages.length > 0) { const s3Response = await uploadImagesToS3( token, matchedImages, me.user.id! ); if (s3Response.status !== 201) { console.log("Failed to upload images to S3."); return; } const imageUrl = await s3Response.json(); // 본문 이미지태그들의 src를 대체합니다. data.content = updateImageSrc(data.content, imageUrl); } ... 게시글 저장 };이 과정은 네트워크 통신이 FE -> BE(이미지 업로드) -> FE(주소 반환) -> BE(게시글 업로드) 이렇게 일어난다고 생각했습니다.이것에 대해서, 그렇다면 그냥 file과 이미지를 한번에 서버로 전달해서 서버에서 처리하면 네트워크 통신 횟수를 줄일 수 있지 않나?라는 생각에서 시작된 질문입니다. 해당 의견이 방법 2입니다.: 게시글 작성 버튼 클릭 > 이미지와 게시글을 함께 백엔드 서버에 전송 > 백서버에서 s3에 이미지 저장 > 반환 받은 url로 게시글 이미지 수정 > 게시글 저장질문입니다.방법 1을 선택해서 요청을 별도로 진행할지, 방법 2를 선택해서 이미지와 게시글의 업로드를 통합하고 서버에서 한번에 처리할지는 댓글을 읽으며 조금 더 고민 중에 있습니다. 지금 현재 코드가 괜찮은 방법인지, 혹은 방법 1, 2에 대해서 다시 의견 주시면 정말 감사하겠습니다.저는 댓글에서 말씀들 해주신 임시 폴더에 저장에 대해서 이렇게 이해했는데요.. [file을 임시 폴더에 저장 > 게시물이 저장될 때 file을 실제 폴더로 이동 > 게시물에 반영 후 저장 ] 의 과정. 제 생각에 만약 이 과정이 맞다면, 임시 폴더를 사용하는 경우는 파일이 에디터에 삽입되었을 때 바로 서버로 보내고, 제가 프론트에서 하는 작업을 서버에서 진행하기 위함이라고 생각듭니다. 그런데 그렇다면 이 과정이 결국 저장 후 반영이라는 관점에서 방법 1의 과정과 크게 다른 점을 모르겠습니다.혹시나 제가 현재 방법은 바꾸기 싫거나 고집부리려고 하는것은 절대 아닙니다! 현업분들은 어떻게 하시는지 더 좋은 방법이 있는지 궁금해서 잘문남깁니다ㅠ 감사합니다..기존 질문. 방법 1:게시글 작성 버튼 클릭 > 이미지를 먼저 s3에 저장 > 반환 받은 url을 게시글 본문에 삽입 > 게시글 백엔드 전송 저장방법 2:게시글 작성 버튼 클릭 > 이미지와 게시글을 함께 백엔드 서버에 전송 > 백서버에서 s3에 이미지 저장 > 반환 받은 url로 게시글 이미지 수정 > 게시글 저장두 가지 방법 중 고민입니다.현재 방법 1 을 선택하여 구현했었습니다만, 데이터 일관성 부분에서 고민이 생겼습니다.방법 2번의 경우 서버에서 트랜잭션을 걸어 일관성을 보장할 수 있지만 백엔드 서버가 부담 할 리소스가 커진다는 단점이 있고,방법 1의 경우 일관성을 보장하고자 하면 s3에 추가적인 접근이 필요하다는 단점이 있지만 백엔드 서버의 부담비용이 줄어든다고 생각합니다.어떤 방법이 더 합리적일지 고민입니다.

집킨 · Answer

게시글 작성 버튼 클릭 -> 이미지 업로드 API 호출 -> API 에서 s3에 업로드 후 URL 리턴 -> 리턴받은 URL 포함 게시글 저장 API 호출이렇게 하면 됩니다프론트에서 s3에 직접 이미지를 저장한다는건, 프론트가 s3 access key를 가지고 있겠다거나 s3 의 정책을 Any로 오픈한다는건데 이건 위험하죠더군다나 s3 기본 정책상 5GB 인가 넘어가면 Credential 은 무조건 있어야 합니다그냥 백엔드 통하시는게 맞습니다

genonfire · Answer

프론트엔드는 그냥 백엔드에서 제공하는 API 만 사용한다는 개념으로 구현하는게 좋습니다. 심하게 말해 그냥 UI 만 만진다고 생각하는게 좋아요.데이터, 3rd party API 이런 건 다 백엔드에서 하는게 구조적으로나 효율적으로나 보안으로나 훨씬 좋습니다. 그러라고 백엔드가 있는거죠.

chytonpide · Answer

닥2, s3 주소 실제로 노출시키는 서비스 거의 없는걸로 알고 있습니다.(요청마다 비용이 발생하기 때문에) 보통 cdn 으로 변환해서 돌려줍니다. 백엔드를 거치는 편이 보안, 제어면에서 이점이 더 큽니다.> 반환 받은 url로 게시글 이미지 수정FE 스택을 잘 몰라서 그러는데, 이 과정이 꼭 필요한가요? 이미지 첨부시점에서 그냥 화면에 preview로 표시하면 될것 같은데..> 게시글 저장그다음에 이 스탭에서 이미지를 base64로 인코딩해서 게시물 본문과 함께 리퀘스트를 하면 되지 않을까용?export type ArticleCreation = { title:string content:string attachiments: File[] } export type File = { base64payload: string ext: string }

압구정개발자 · Answer

프론트에서 s3에 직접 이미지를 저장한다는건, 프론트가 s3 access key를 가지고 있겠다거나 s3 의 정책을 Any로 오픈한다는건데 이건 위험하죠이 답변은 아주 허무맹랑한 얘기입니다. 이런식으로 구성할리가 없을 뿐더러 IdP를 통해 서버 없이도 충분히 접근에대한 제어가 가능합니다.클라우드 네이티브 구성이 아닌 레거시 구성에 갇혀있는 발상입니다.

장독깨기 · Answer

저 같으면 본글의 방법2, 댓글의 방법 2로 하겠습니다.이미지가 있든 없든 글쓰기는 하나의 트랜잭션입니다.이걸 어떤 식으로든 분리를 하면 여러 예외 상황에 대비하기 힘들고, 정합성을 위해 추가 작업이 필요할 수도 있습니다.그리고, 이 정도로 서버 부담을 걱정할 필요는 없어 보이구요,다만, 대용량 이미지를 여러개 첨부할 경우 부담이 좀 될 수도 있는데요,이 경우를 대비해서 클라이언트(브라우저) 에서 이미지 크기를 조정하면 될 거 같습니다.

chytonpide · Answer

게시물 중간에 파일 위치를 어떻게 특정할지, 복수개의 파일을 어떻게 다룰지, cdn을 어떻게 설정할지는 전부 제외하고 파일 첨부 메카니즘만 보면 다음 그림과 같습니당.

2948284 · Answer

사용자친화적인 설계는 당연히 게시글 작성중에 이미지가 임시업로드처리 되는것이죠 ㅎㅎ 잠시만 기다려 주세요...글을 등록하는 중입니다...상상만 해도 벌써 보기 싫네여..

Jang-namu · Answer

presigned url을 찾아보는것도 괜찮은 옵션이 될 것 같아요

AskeTeddy · Answer

서버에서 미디어를 처리한다면 OOM 문제가 생길수 있죠(서버는 사진이나 영상보다 큰 메모리를 램에서 추가 사용해야합니다)프론트에서 pre signed url 쓰는게 여러 문제를 회피합니다공부 목적이라면 두 방식 모두 해보시는걸 추천합니다OOM 을 만들어보고 해결하는 방법도 충분히 있어서(etag, 미디어 캐싱, cdn 업로드 등) 간단하게 공부하는것도 좋구요

rarity · Answer

이걸 FE에서 할지 BE에서 할지 고민하는게 실패한겁니다.FE에서는 이걸 고민하면 안됩니다.FE가 고려할것은 정적서버 배포를 S3에 업로드 하는 경우 정도지..이건 아닙니다. 모든건 백엔드로 던지세요

키보드난타 · Answer

저는 에디터 작성 내용의 이미지 src들을 게시글 저장할 때 s3 이미지 주소로 교체하는 작업이 더 궁금하네요

한안아 · Answer

프론트에서 바로 s3 로 올리면 안됨…

s3 이미지 저장 관련 프론트 vs 백엔드 고민

12개의 답변

#s3 목록