jsdelivr CDN 이용하기

jsdelivr CDN

jsdelivr은 전세계적으로 이용할 수 있고, 해외에서 접근하기 어려운 중국에서도 빠른속도로 제공할 수 있습니다.

 

전세계적으로 빠른속도를 제공할 수 있는 이유로는 jsdelivr을 사용하면, 여러 CDN중에서 가까운(또는 가장 빠른)곳에서 파일을 전송하게 됩니다.

전 세계 서버위치

 

 

 

제공 과정

먼저 DNS가 이중화 되어있습니다.

그리고 CDN을 통하는데 Cloudflare, Fastly, StackPath, QUANTIL중에 가장 빠른 위치로 접속하게 됩니다.

만약에 이 4개 네트워크가 마비시, 아마존 S3서버를 통하게됩니다.

 

매우 안정적이고 빠를수밖에 없는 구성입니다.

 

한국에서는

jsdelivr은 한국에 서버가있는 Cloudflare와 StackPath로 부터 데이터를 전송하게 됩니다.

티스토리 업로드와 속도비교?
티스토리와 로딩 속도는 비슷합니다.
다만, 캐시 설정에 차이가 있어 웹브라우저에서는 티스토리(daumcdn)는 30분마다 재로딩, jsdelivr은 12시간마다 재로딩을 하게됩니다.
당연히 12시간 마다 재로딩을 하는게 속도측면에서 더 좋습니다.
또한 jsdelivr은 한국에 두 회사에서 분산하여 제공하고 있기 때문에 더 안정적입니다.
DNS까지 따지면 두 회사가 추가되고 Cloudflare와 StackPath이 모두 접속불가한 상황이 되어도 원본서버로 연결되기 때문에 더 안정적입니다.

위에 Cloudflare와 StackPath이 모두 접속불가한 상황이라는 가정은 전세계 인터넷의 50% 이상이 마비된 상황입니다.

 

 

 

이용 약관

중요한 내용으로 jsDelivr 사용은 개인 및 상업용 모두 무료입니다. 라는 내용이 될것 같습니다.

다만, 이미지 CDN용으로 + 대용량 파일전송용으로 이용시 약관위반입니다.

• using jsDelivr is free for both personal and commercial use
• using jsDelivr as a storage for all uploaded images

jsDelivr - A free, fast, and reliable CDN for Open Source

 

 

주의할 점

1. 작성일 기준으로 Github나 NPM 저장소 특정버전 용량이 50MB를 넘으면 파일전달에 실패하고 오류안내가 뜹니다.

   Package size exceeded the configured limit of 50 MB.

   타당한 프로젝트라면, jsDelivr에 문의하여 제한을 늘릴수 있고, 대부분의 경우는 용량을 줄여서 이용해야됩니다.

2. 최초 로딩시 시간이 좀 걸립니다.

   안정성을 위해 아래의 과정을 거쳐서 전달되는데 중간 서비스들이 많아 최초로딩에 시간이 걸립니다.

   • 최초로딩 과정
     1. 코드 저장소(Github/NPM)
     2. Amazon AWS
     3. jsDelivr 원본 서버
     4. CDN(CloudFlare, Fastly, Stackpath, QUANTIL)
     5. 사용자
   • 한번 로딩된 이후로는, 이미 CDN에 캐싱되었다면?
     1. CDN(CloudFlare, Fastly, Stackpath, QUANTIL)
     2. 사용자
   • CDN에 캐싱안된 경우?
     1. jsDelivr 원본 서버
     2. CDN(CloudFlare, Fastly, Stackpath, QUANTIL)
     3. 사용자
3. 실제 사용할 코드고 코드변경이 없을 예정이라면 release버전을 꼭 이용하세요.

   release버전으로 올리면, 캐시시간이 6시간이 아닌 거의 무한으로 올라가서 항상 캐시가 되어버립니다.

 

 

 

 

활용 방법

Github 활용법

1. 깃허브에 레포지토리를 생성한 이후 CDN에 올리고 싶은 파일을 올립니다.
2. 다음의 경로로 접근가능합니다.

   https://cdn.jsdelivr.net/gh/깃허브아이디/레포지토리/파일경로

아래의 예시 깃허브에서 dist폴더의 jquery.min.js파일에 접근하려면

https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js 이렇게 url이 생성됩니다.

jquery/jquery

 

 

알고있을 내용

• URL에 한번 접속(최초접속)시 파일이 캐시됩니다. (= 처음에 깃허브에서 불러오므로 느림)
• 기본적으로 12시간동안 캐시되므로 변경사항이 바로 적용되지 않음에 주의하세요.

 

추가 활용법

• https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js 과 같이 레퍼지토리명 뒤에 버전정보 기입가능
  • @latest
  • @3.2.1
  • @a503c69

    

  • @a503c691dc06c59acdafef6e54eca2613c6e4032

6자리 커밋코드 또는 풀코드 모두 활용가능합니다.

버전을 이용하면 캐시되지 않은 url이므로 새로 캐시하게 되어 기존 버전에 급하게 업데이트가 필요시 버전정보를 이용할 수도 있습니다.

 

 

 

NPM 활용법

NPM에 빌드한 이후 다음의 경로에서 파일을 불러올 수 있습니다.

https://cdn.jsdelivr.net/npm/package@version/file

역시 버전정보는 필수가 아닙니다.

 

추가 활용법

위와 동일하게 버전정보를 입력가능합니다.