CDN ( Github & jsdelivr )

CDN이란?

Content Delivery NetWork의 약자인 CDN은 지리적 제약이 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있도록 하는 콘텐츠 전송 기술을 의미한다. CDN은 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠의 로딩에 소요되는 시간을 최소화한다.

CDN은 각 지역에 캐시 서버(PoP)를 분산 배치해, 근접한 사용자의 요처에 원본 서버가 아닌 캐시 서버가 콘텐츠를 전달하게 한다.

 

CDN를 필요한 경우

• 웹 사이트에서 그래픽 이미지, 동영상 파일 등 콘텐츠를 제공하는 경우.
  • 동영상 스트리밍, 게임, 파일 전송, 용량이 큰 이미지를 다루는 서비스를 제공. ( Netfilx, Airbnb )
• 먼 지역의 사용자까지 안정된 서비스 환경을 제공하는 경우.
  • NC 소프트나 카카오게임즈 같은 온라인 게임 기업은 CDN를 활용해서 북미나 유럽까지 서비스를 제공.

 

📌 그러나 특정 국가나 지역에만 타깃으로 하는 웹 서비스를 운영한다면 CDN는 오히려 불필요한 연결 지점이 늘어나 웹 사이트의 성능 저하를 불러 올 수 있다.

 

반응형

---

CDN 사용 - jsDelivr

jsDelivr를 활용하여 오픈소스를 CDN으로 연결할 수 있다. 이는 무료로 제공하며 빠른 속도와 자동화로 편리까지 제공하고 있다.

오픈소스를 제공하는 Github, npm, Workpress를 대상으로 CDN을 제공하고 있다. 그 중에서도 Github에 대해서만 얘기해보려고 한다.

---

Github CDN

Github CDN를 활용해서 이 블로그 포스트에 CSS를 넣어보려고 한다.

https://github.com/kyoowon/blog

GitHub - kyoowon/blog

위와 같이 Github 링크가 있다고 할 때, 다음과 같은 정보들이 필요로 한다. 

• User : kyoowon
• version : main ( 브랜치 )
• repositoy : blog
• file_name : themes/dark.css

https://cdn.jsdelivr.net/gh/[User]/[repositoy]@[version]/[file_name]

// ex) https://cdn.jsdelivr.net/gh/kyoowon/blog@main/themes/dark.css

위와 같은 URL를 다음과 같이 HTML에 삽입만 하면 된다.

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/kyoowon/blog@main/themes/dark.css">