최근 진행된 프로젝트에서 이미지 업로드 과정을 프론트 엔드로 진행했다.부트 캠프에서 진행할 때는 백 엔드로 이미지 업로드 과정을 진행했지만 두 과정의 장점과 단점을 찾고 정리하려구.(여기에서는 AWS S3을 이용하고 화상을 업로드하는 방법을 기준으로 정리)☆ 결론 프로젝트의 상황마다 다르지만, 프론트에서 화상을 처리해야 할 경우 보안 관련 이슈는 AWS S3 presigned URL을 통해서 해결될 것 같다.
- 백엔드에서 AWS S3로 이미지 업로드 부트캠프 프로젝트 당시 상품 등록 부분을 담당했었다. 그 당시 백엔드에서 이미지 등록을 담당한다고 하여 API를 통해 이미지를 포함하여 요청을 보내는 방법을 사용하였다. 백엔드에서 AWS S3로 이미지를 업로드하는 플로우는 다음과 같다.
- 1)전단에서 백엔드에 대한 이미지와 함께 API요청(프로젝트 당시 multipart/form-data에 대한 요청으로 이미지를 뒀다.)2)백 엔드에서 받은 화상을 AWS S3에 업로드하는 요청을 진행, 3)AWS S3에 화상이 업로드되자, 백엔드는 ImageUrl을 받고 4)백 엔드 후 프론트 엔드에 ImageUrl을 응답 장점-AWS S3이미지 관리와 DB의 이미지 테이블 관리를 백 엔드로 하기 위한 데이터를 싱크대에 맞추기 쉽다. 단점-백엔드에 이미지 자체를 넣고 요청하기 위해서, 백엔드 서버 자원의 소모가 심하다.-백엔드 서버 자원의 소모가 극심하기 때문에 동시에 복수의 요청이 들어왔을 때 병목 현상이 발생할 수 있다.-네트워크를 여러번 거치면서 프론트 엔드에서 곧 반을 표시할 어려움(유저의 입장에서 로딩 시간이 걸린다)★ 병목 현상이란?시스템 내에서 전체적인 처리 속도를 떨어뜨리는 특정 부분을 가리키는 용어 응답 성능에 대한 병목 현상의 원인으로 네트워크 대역 폭 부족, 하드웨어 자원 부족, 애플리케이션 설계의 문제, 데이터베이스 부하 등이 있다.
- 2. 프론트엔드에서 S3로 이미지 업로드, 기존에 이미지 업로드 과정을 백엔드로 진행하고 프론트엔드로 진행하면 어떤 차이가 있는지 알고 싶어 최근 프로젝트에서는 이미지 업로드 과정을 프론트에서 진행했다.프론트 엔드에서 AWS S3로 이미지를 업로드하는 플로우는 다음과 같다.
- 1) 프론트엔드에서 AWS S3로 이미지 업로드 2) 이미지 업로드 완료 후 ImageUrl 응답을 받는다 3) 해당 ImageUrl을 백엔드가 받아 DB에 저장 장점-프론트엔드에서 AWS S3로 직접 이미지를 전송하고 백엔드 서버에는 Url만 요청하므로 서버 부하가 적다.- 사용자 입장에서 즉각적인 반응을 보이기 쉽다. 단점-프론트엔드에서 AWS S3로 바로 접근하기 때문에 보안 관련 키가 노출될 수 있어 보안 문제가 발생할 수 있다.
- 3. AWS S3 presigned URL을 이용한 업로드 위의 두가지 경우를 보았을 때 서버 부하적 측면이나 유저의 입장에서 보았을 때 프론트 엔드에서 이미지를 업로드 하는 게 좋을 것 같았다.그러나 이 경우 큰 문제인 보안 문제가 발생할 가능성이 있다는 것이다.이를 해결하기 위해서, AWS S3의 presigned URL을 사용할 수 있다.presigned URL이란?AWS자원 접근 권한을 제공하기 위해서 사전에 적절한 권한을 가질 자격 증명에 의해서 서명된 URL을 의미한다.presigned URL을 사용한 화상 업로드 흐름은 다음과 같다.
- 1)전단에서 백 엔드에 presinged URL을 요청 2)백 엔드로 AWS S3에 presigned URL을 요청 3)AWS 3에서 백 엔드에 presigned URL응답 4)응답을 받은 presigned URL를 프론트 엔드에 응답 5)전단에서 해당 presigned URL로 영상을 업로드하면 서버의 부하도 줄일 수 있어 프런트에서 화상 업로드를 진행할 때 문제가 된 보안 문제를 해결하게 된다.참고문헌-https://okky.kr/questions/1301091-https://heewon26.tistory.com/m/377-https://dev.classmethod.jp/articles/create-pre-signed-url-in-s3/-https://ksh-coding.tistory.com/115
