이미지 최적화 - 1. CDN

신예찬·2024년 12월 29일

AWS 이미지 최적화

목록 보기
1/3

웹 서비스를 사용하다보면 텍스트로만 이루어진 화면을 보게 되는 일은 잘 없을것이다

그도 그럴것이 글만 많은 컨텐츠보다는 그림이나 사진이 들어간 컨텐츠가 집중도를 더 오래 유지할 수 있기 때문이다

그렇기에 화면 구축이 중심되는 서비스들은 이미지를 어떻게 처리할것인지에 대한 고민이 필요하다

CDN

애플리케이션에서 이미지를 전달하는것은 상당히 큰 비용을 요구한다

일반적인 텍스트보다 밀도가 매우 높기 때문에 전송 속도가 상대적으로 느리다

이는 서비스 경험이 저하되기 쉽상이기에 다른 대체 방식이 제안되었다

CDN(Content Delivery Network)은 웹페이지나 이미지등 리소스를 전달하는 전송 네트워크다

사용자에게 물리적으로 가까운 위치에 리소스를 배치해 높은 가용성과 성능을 제공한다

클라우드 환경에서 사용하는 프록시 서버정도로 이해해도 좋을거 같다

Why CDN?

  1. 성능
    • 원본 서비스에서 리소스를 가져오는것 보다 물리적으로 가까운 위치에서 가져오는것이 더 빠르다
    • 컨텐츠를 캐싱하는 위치를 엣지로케이션(Edge Location)이라고한다
  2. 원본 서버 부하 경감
    • 컨텐츠를 원본서버가 아닌 CDN에서 먼저 부하를 받기 때문에 원본서버의 부하가 경감된다
  3. 보안
    • 컨텐츠를 원본 서비스에서 요청하는것이 아니기 때문에 보안적 이점을 얻을 수 있다

CDN common sence

CDN을 사용하기 전에 CDN과 관련된 상식에대해 간략히 알아보자

  • TTL: 캐시에 컨텐츠가 잔류할 시간
  • Cache Key: 컨텐츠에 대한 index
    - 통상 url, domain, query string을 사용
    - region 포함 가능
    - user agent를 식별해 사용 가능
  • Purge & Evict
    - Purge: 캐싱된 컨텐츠를 더이상 제공받지 못하게하여 원본 컨텐츠를 요구하도록 유도
    - Evict: Edge server에 공간적 여유를 확보하기 위해 사용하지 않는 컨텐츠를 캐시에서 제거
  • Client Cache: clinet단의 캐시와 CDN의 캐시를 분리하여 고려

CDN 써보기

AWS 외에도 여타 IaaS에서도 CDN을 구축할만한 서비스들을 제공한다고는 알고 있지만 주로 사용하는 클라우드 서비스가 AWS인지라 AWS를 예시로들어 설명하겠다

1. CloudFront 구축

AWS에서는 컨텐츠를 캐싱하기 위한 서비스로 CloudFront를 제공한다

프리티어 범주 내에서 사용 가능하니 참고하면 좋을거같다



일단 CloudFront 배포를 생성한다

원본 컨텐츠의 위치(like S3)를 연결해준다

배포가 꽤 오래걸린다(15분정도?)

다른것들을 설정해줘도 좋지만 나중에 설정해줘도 되니 일단 패스..


2. 이미지 업로드

적당히 이미지 몇개를 업로드해보자

Amazon what-is CDN
라인개발실록

3. 이미지 조회

조회 시도시 응답 헤더를 통해 캐싱이 제대로 된걸 확인할 수 있다

최초 조회되는 이미지는 CloudFront에 없기 때문에 cache miss되는것을 볼 수 있다

하지만 리로드 이후 조회 시도시 cache hit임을 확인할 수 있다

조회 속도도 유의미한 수준으로 빨라진다

조회 속도가 빨라진 이유가 응답 대기시간이 줄어들어서임을 확인할 수 있다
Edge Location에서 컨텐츠를 가져오기에 가능한 일이다

0개의 댓글