[240203] CDN이란?

 

CDN(Content Delivery Network)이란

컨텐츠 전송 네트워크(CDN)는 지리적으로 분산된 서버들을 연결한 네트워크이다.

• 사용자가 웹 사이트를 방문할 때 해당 웹 사이트 서버의 데이터는 사용자의 컴퓨터에 도달하기 위해 인터넷을 통해 이동해야 함
• 사용자가 해당 서버에서 멀리 떨어져 있는 경우 동영상 또는 웹 사이트 이미지와 같은 대용량 파일을 로드하는 데 시간이 오래 걸림
• 웹 사이트 컨텐츠는 지리적으로 사용자와 가까운 CDN 서버에 저장되며 컴퓨터에 훨씬 빨리 도달 가능

 

 

---

CDN의 장점

페이지 로드 시간 단축

대역폭 비용 절감

• 캐싱 및 기타 최적화를 통해 CDN은 서버가 제공해야 하는 데이터의 양을 줄임

컨텐츠 가용성 ⬆️

• 더 많은 웹 트래픽을 처리하고 웹서버의 로드를 줄일 수 있음
• 하나 이상의 CDN 서버가 오프라인으로 전환되면 다른 운영 서버가 해당 서버를 대체하여 서비스가 중단되지 않도록 할 수 있음

트래픽 급증 대응

• 로드 밸런싱을 사용하여 트래픽을 여러 서버에 분산시킴으로써 하나의 서버에 과부하가 일어나는 것을 방지

웹사이트 보안 강화

• 디도스 공격은 대량의 가짜 트래픽을 웹 사이트로 전송하여 애플리케이션이 작동 중지되도록 만들기 시도
• CDN은 분석 및 자동화 툴을 활용하여 이러한 공격에 대응

 

---

CDN의 단점

CDN은 캐시 서버이다.

• 즉 본서버의 변경 내용을 바로 반영하지 못한다.
• 최신 상태 보장 ❌

CDN 서버에 의존적

• 예를 들어 리액트 라이브러리를 CDN으로 가져온다면?
• CDN 서버가 터지면 내 웹사이트도 ..

 

---

해결방법

캐시 무효화

CDN Invalidation

• CDN이 여러 개 있는 경우, 전체 캐시를 날리려면 중간 서버 각각에 대해서 캐시를 삭제해야 함
• 이렇게 한번 저장된 캐시는 지우기 어렵기 때문에 Cache-Control의 max-age 값 신중하게 결정하기

Cache-Control: public과 private

• public - CDN과 같은 중간 서버 캐시 저장 가능
• private - 가장 끝의 사용자 브라우저만 캐시 저장 가능
• Cache-Control: public, max-age=86400 과 같이 콤마로 연결 가능

s-maxage

• 중간 서버에서만 적용되는 max-age 값을 설정
• Cache-Control: s-maxage=31536000, max-age=0 과 같이 설정하면
  • CDN에서는 1년동안 캐시
  • 브라우저에서는 매번 재검증 요청을 보냄

토스에서의 Cache-Control

1. 배포시마다 바뀔 수 있는 HTML 리소스
   • Cache-Control의 값으로 max-age=0, s-maxage=31536000 설정
   • CDN은 계속해서 HTML 파일에 대한 캐시를 가지고 있도록 함
   • 대신 배포가 이루어질 때마다 CDN Invalidation을 발생시켜 CDN이 서버로부터 새로운 HTML 파일들을 받아오도록 설정
2. 빌드 결과물마다 고유한 URL을 가지는 CSS, JS
   • Cache-Control의 값으로 max-age=31536000 설정
   • 같은 URL에 대해 내용이 바뀔 여지가 없으므로!

 

fallback 대응

• CDN 서버에 오류가 발생했을 때를 대비해 fallback을 시킬 수 있을 것이다. 이에 관련된 아티클을 찾으면 업데이트해보자.

 

---

프론트엔드에서 CDN을 쓴다는 것

아래와 같은 정적 컨텐츠들을 CDN에 올릴 수 있다.

 

1. 웹폰트

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />

 

2. 이미지 최적화

• https://imgix.com/ 등의 CDN 서비스를 활용할 수 있다.
• 대부분의 회사에서는 자체 이미지 CDN을 구축하고 있다.

 

3. 동영상

출처: https://d2.naver.com/helloworld/7225347

 

4. HTML, CSS, JS

• 렌더링 방식인 SSG, CSR에서 정적인 파일들을 CDN에 올려 관리할 수 있다.
• SSR 방식은 매 요청마다 생성하기 때문에 CDN 사용 불가

 

---

To-do

✅ 이미지 CDN 직접 구축해보고, 이미 써봤던 Presigned URL과 비교해보기
✅ AWS S3 + Cloudfront로 배포해보기

 

---

참고자료

CDN이란 무엇인가요? - 콘텐츠 전송 네트워크 설명 - AWS

 

CDN(Content Delivery Network)이란? | IBM

 

웹 서비스 캐시 똑똑하게 다루기