CloudFront9 [이미지 렌더링 최적화] HTTPS 페이지 내 HTTP 로드 이미지 문제 (혼합 콘텐츠(Mixed Content)) 이미지 렌더링 최적화 작업이 전에 모두 완료되었다.헌데! 테스트 과정에서 발생했던 이슈가 있었어서 아래에 정리해둔다. [문제 상황]1. 페이지에서 특정 이미지를 호출 하는 과정이 있었음2. 이미지가 페이지에 렌더링되지 않음3. 이미지 경로에 파일이 없어서 그런 것인 줄 알고, 이미지 URL을 직접 호출했으나 이미지가 정상적으로 존재하고 있었음 [이슈 해결]1. HTTPS(암호화된 사이트)에서 HTTP(암호화되지 않은 텍스트) 리소스를 호출할 경우 Mixed Content 오류가 발생함=> HTTP에서 HTTPS 리소스 호출 가능하나, HTTPS에서 HTTP 리소스 호출 불가능함. mixed content란?"혼합 콘텐츠 오류"는 웹 페이지에서 보안 연결(HTTPS)을 통해 제공되는 페이지에 비해 보안.. 2025. 2. 23. [이미지 렌더링 최적화] CloudFront 비용절감 트러블 슈팅 (설계 및 플로우) 개편 이후 기준인 위 설계도로 수정하게 되면, 아래와 같은 목적들을 달성할 수 있다.CloudFront 의 비용 최적화 (이미지 서빙 용량 개선으로 인해)이미지 렌더링 속도 최적화 (낮아진 서빙 용량 및 캐싱으로 인해)작품 커버 이미지 화질 개선 (S3에 저장할 때 리사이징 후 저장하는 방식이 아닌, 원본 그대로를 저장함으로 인해)API 서버 리소스 부하 개선 (S3에 이미지 저장하는 주체를 클라이언트로 변경함으로 인해) 해당 결과물을 이루어내기 위해, 해야하는 작업은 간략하게만 뽑아내면 아래와 같다(기존 이미지 정책 및 하이브리드 앱의 상황을 고려했을 때 해야하는 작업이 많으나, 작업의 큰 줄기만 뽑아내면 아래와 같다)[작업 우선순위]Lambda@edge 코드 작성 (이미지 변환 및 메모리 설정)신규 .. 2025. 1. 7. [이미지 렌더링 최적화] CloudFront 비용절감 트러블 슈팅 [이슈 상황]- 1번 상황현재 CF에서 발생하는 비용이 꽤 크다> 모든 이미지를 jpg, png로 반환하는 상태인데, 이로 인해 서빙되는 바이트가 너무 높게 책정됨으로써 OutBound관련 비용이 크게 나오고 있다 (1달 기준으로, 꽤 크게 나오고 있다...) - 2번 상황작품 썸네일 이미지 화질이 좀 낮은 상태이다.> 현재 파일 이미지 등록은 API에서 해당 이미지 데이터를 받아서 S3에 올리고 있는데, 해당 과정에서 리사이징 및 압축을 진행하고 있다. 이로 인해 이미지 화질이 낮아질 때가 잦다. [해결을 위한 설계 내용 요약]- 1번 결론> 클라이언트에 데이터를 제공하는 OutBound 시점에, 압축률이 더 큰 WEBP 형식으로 변환하여 응답하도록 조정진행.* WEBP형식은 위 이미지 포맷형식들보다 .. 2024. 12. 17. Lambda@Edge / CloudFront / S3 프로젝트 최종정리 (이미지 파일 관리 개선 프로젝트) 프로젝트가 모두 완료되었다. 그 내용을 추후에 참고하기 좋게 정리 차, 글을 올리게 되었다. 프로젝트를 진행하며 실제로 작업한 내용은 ★ 프로젝트 + 트러블 슈팅 ★ 에 올려두었다. 작업내용 GCP 서버 디스크에 존재하는 이미지 파일을 AWS S3로 이관 구성도 1. Cloudfront 구성을 의도하고 설계한 이유 기존 GCP 설계구조 상, 서버 Scale-Out의 어려움 기존 GCP설계구조상, 이미지를 저장하고 있는 Disk는 단일 서버에 종속적이였음. 이로 인해 추후 이용자가 증가하여 Scale-Out을 고려해야하는 상황이 왔을 때, 이를 시행하기에 까다로운 환경임 그리고, 이미지 조회 및 업로드에 서버 리소스가 온전히 사용되고 있음. 이를 다른 쪽으로 우회시키는 게 운영상 좋다고 판단이 되었음 ⇒ .. 2024. 2. 4. [이미지 보안 이슈] pre_signed_url / CloudFront / S3 트러블 슈팅 (5) Signed Url & pre-signed url 초기 구상은 하나의 s3 버킷에 대해 Cloudfront url을 통해 get과 put을 모두 수행하는 방향으로 진행하였다. 이미지 업로드 방식은 Signed Url을 통해 업로드 하였다. 이를 위해 아래 이미지와 같이 Cloudfront와 연결된 S3의 정책을 s3:getobject와 s3:putobject 모두 가능하게 설정하였는데, 위 두 정책이 한 버킷에 포함됨으로써, get을 위해 발급된 Cloudfront url을 이용하여 put도 가능해져버리는 보안 이슈가 발생하였다. 즉, 사용자가 이미지 GET을 위해 응답해준 URL을 바탕으로, 임의로 다른 이미지를 PUT해버릴 수 있는 이미지 보안 이슈가 발생하는 거였다. 그래서 버킷정책에서 s3:put.. 2024. 1. 30. [Cache 무효화] CloudFront / S3 트러블 슈팅 (4) 이슈 이미지를 등록하고 한번 Get 조회하여 Cloudfront에 Cache로 등록한 후, 해당 이미지를 수정한 후에 다시 조회할 경우 수정되기 전의 이미지가 이미 Cache되어 있기 때문에 변경된 이미지의 조회가 불가능하였다. 이는, 컨텐츠의 최신화를 즉각적으로 반영하지 못하는 것을 의미하기 때문에 해당 이슈를 해결하는 것이 필요하였다. 해결방안 아래와 같은 방법을 도출하였다. 1. Cloudfront의 무효화 탭에서 무효화가 필요할 때마다 무효화 생성진행 (Lambda@Edge를 통해 해당 과정을 자동화할 수 있음) 2. Cloudfront의 캐시 키 및 원본요청에서 쿼리 문자열 지정 처음에는 1번 사항으로 진행하는 게 편할 거라 생각하였으나, 다시 생각을 해보니 매 요청마다 무효화 생성을 진행하는.. 2024. 1. 11. 이전 1 2 다음
