[무료 CDN] jsDelivr의 대안 Statically

2년 전쯤에 jsDelivr 이용하기를 포스팅한 적 있습니다.

 

이때 당시에는 오픈소스의 CDN은 jsDelivr보다는 Cloudflare의 CDNJS, Google의 CDN(Google hosted libraries, Fonts), RawGit, UNPKG 등을 많이 사용하던 시절이었다.

2017년 정도부터 jsDelivr이 커가며, 현재는 오픈소스 CDN의 대표급으로 성장하였습니다.

 

요즘 배포되는 많은 오픈소스에서 jsDelivr을 사용하여 쉽게 사용하도록 제공하고 있습니다.

 

이 글에서는 jsDelivr을 대체하여 사용할 수 있는 Statically를 소개해보려고 합니다.

한국어 소개 문서가 하나도 없고 2018년도 시작한 프로젝트이지만, 비슷한 면과 나은 면이 있어 소개해볼 예정입니다.

 

Statically는?

Statically.io

정적 자원을 전달하는 CDN입니다. 주로 JS, CSS를 전달하는 역할을 하죠.

제 생각에는 선발주자인 jsDelivr의 영향을 일부 받아 만들어진 것 같습니다.

 

장점과 형식을 거의 그대로 구현해놨습니다.

 

표로 나타내는 게 아무래도 빠르게 보고 이해하는데 도움 될 것 같아 표로 설명하겠습니다.

내용은 작성일인 2021. 12. 11. 기준으로 작성되었습니다.

 

자세한 내용은 표 아래의 제목을 따라 확인해주세요.

	Statically	jsDelivr
	저장소 지원
Github 지원	O	O
NPM 지원	X	O
워드프레스 지원	O	O
GitLab 지원	O	X
Bitbucket 지원	O	X
	네트워크
한국에서 Main CDN 제공자	Fastly, CloudFlare	CloudFlare
중국 통신가능	△알수없음	O
DNS	이중화(NS1, Constellix)	이중화(NS1, ClouDNS)
최초 캐시 속도	500ms 정도	800ms 정도
캐시 기간	1년	1년
캐시 Purge	별도 채널로 연락	별도 채널로 연락
파일 크기제한	단일파일 30MB	패키지 전체 50MB
	특별한 기능 (API)
여러 리소스 합치기	X	O
Minify	O	O
이미지 전송 최적화	O	X
사이트 스크린샷	O	X
Avatar	O	X
OG Image	O	X

 

저장소 지원

Statically와 jsDelivr 모두 깃허브(Github)와 워드프레스(Wordpress)용 CDN을 제공합니다.

이 글은 Statically를 소개하는 글로 jsDelivr은 이미 알고 있다는 가정하에 작성하였습니다.

jsDelivr을 잘 모르신다면, 먼저 글을 읽고 봐주시면 좋습니다.

 

Statically의 주소 형태는 아래와 같습니다.

 

Github

https://cdn.statically.io/gh/:user/:repo/:tag/:path

jsDelivr의 형태인 /gh/:user/:repo@:tag/:path 와는 약간 다른데,

그러나, https://cdn.statically.io/gh/:user/:repo@:tag/:path 형태도 이용 가능합니다. 

 

사용 예로 https://github.com/mrdoob/three.js/ 를 아래의 CDN에서 로딩 가능합니다.

https://cdn.statically.io/gh/mrdoob/three.js/dev/build/three.min.js

 

캐시는 기본적으로 1년이고 아래의 :tag에 대해서는 1일로 jsDelivr와 유사합니다.

main, master, dev, develop, gh-pages 등 자주 바뀌는 컨텐츠

 

또한 jsDelivr처럼 태그(:tag) 생략도 가능합니다.

 

 

GitLab

https://cdn.statically.io/gl/:user/:repo/:tag/:path

깃허브(gh)와 다르게 깃랩은 gl입니다.

 

 

Bitbucket

https://cdn.statically.io/bb/:user/:repo/:tag/:path

깃허브(gh), 깃랩(gl)과 달리 빅버킷은 bb입니다.

 

깃랩과 빅버킷 보다는 깃허브가 많이 사용되지만 이러한 저장소도 지원하므로, 좀 더 다양하게 선택하여 사용가능할것입니다.

 

 

WordPress

코어

https://cdn.statically.io/wp/c/:version/:file

패키지

https://cdn.statically.io/wp/p/:plugin/:version/:file

테마

https://cdn.statically.io/wp/t/:theme/:version/:file

 

이렇게 jsdelivr과 유사한 형식으로 쉽게 이용할 수 있습니다.

 

 

네트워크

CDN에서 네트워크는 매우 중요한 항목입니다.

믿을 수 있고 안정적인 대역폭을 전달해줄 수 없다면 유지하기 힘듭니다.

 

한국에서 Main Provider

Statically는 현재 한국에서 CloudFlare와 Fastly를 메인으로 CDN을 제공 중입니다.

낮에는 CloudFlare, 밤에는 Fastly를 통하여 전달되는것 같습니다(부정확할 수 있음.)

Fastly는 깃허브, 트위치 등 중대형 사이트에서 사용 중이며 안정적이고 빠른 네트워크 공급이 가능한 사업자입니다.

2021.12.13 이후 전세계에서 클라우드플레어로 변경되었습니다.
한국에서는 현재 Fastly는 거의 안쓰이고 클플이 부하가 많아 Fastly로 연결됐으면 하는데..

 

현재 KT에서는 Fastly가 TTFB가 테스트 파일 기준: 15ms -> 2ms를 내고 있습니다.

SKT에서는 Fastly가 20% 정도 느렸으나 체감상 클플이나 패스틀리나 안정적으로 빠른 CDN을 무료로 제공한다는 점에 감사하게 생각하고 있습니다.

 

 

중국 통신 가능

중국은 폐쇄적인 인터넷망으로 외부에서 CDN 공급이 어렵습니다.

jsDelivr은 QUANTIL이라는 중국 네트워크 사업자를 통해 지원하나, Statically는 따로 내용이 없는 것으로 보아 지원하지 못한다고 볼 수 있습니다.

 

테스트를 해보니 불안정합니다.

cdn.staticaly.com 도메인은 fastly를 향하는데, 이건 괜찮은것 같네요.

 

 

DNS

DNS는 당연히 이중화되어 있습니다.

jsDelivr과 동일하게 NS1이 메인 DNS 제공자이고, 서브로는 Constellix(jsDelivr은 ClouDNS)를 사용 중입니다.

 

 

 

최초 캐시 속도

깃허브 기준 속도입니다.

정확히는 알 수 없으나, 아마도 과정이 단순해 더 빠른 것 같습니다.

jsDelivr은 많은 단계를 거칩니다.

 

 

 

캐시 기간

캐시 기간은 기본적으로 1년, 변경될 수 있는 파일은 1일, 1달 등입니다.

 

 

 

캐시 Purge

캐시 Purge는 jsDelivr과 동일하게 별도 채널로 연락하도록 하고 있습니다.

 

 

 

파일 크기 제한

파일 크기 제한은 단일 파일에 대해서만 30MB로 제한하고 있습니다.

이렇게 파일크기가 크면 악용 가능할 수 있는데, 이 부분은 관리가 될지 모르겠네요.

 

 

 

특별한 기능 (API)

특별한 기능을 소개합니다.

 

 

여러 리소스 합치기

jsDelivr은 /combine 주소를 이용해 여러 파일을 합칠 수 있습니다.

파일을 합치면 장점 : HTTP는 헤더 크기 때문에 요청수를 줄이는 게 좋습니다. (성능에 도움)

Statically는 이런 기능을 별도로 지원하지 않습니다.

 

 

Minify

jsDelivr과 동일하게 js, css 등의 파일의 이름을 script.js에서 script.min.js로 요청 시 파일이 없다면 Minify 하여 제공됩니다.

 

 

이미지 전송 최적화

https://cdn.statically.io/img/:domain/:params/:file

기존 이미지 주소를 이용해서 CDN을 통해 전달 가능합니다.

 

https://staticsite.fun/dog.jpg를  https://cdn.statically.io/img/staticsite.fun/h=100/dog.jpg 로 요청 시 높이가 100px인 파일로 변환되어 전송되며 캐시 기간은 1년입니다.

 

:params

• w: width(가로 px)
• h: height(세로 px)
• f: format(파일 변환)
  • f=auto 설정시: WebP지원 브라우저에서 자동으로 WebP파일로 응답
  • f=webp 설정시: 브라우저와 상관없이 WebP파일로 응답
• p: percentage(이미지 퀄리티: 10-100이며 기본적으로 85)

대충 예시를 써보면 https://cdn.statically.io/img/:domain/w=100,h=100,f=auto,p=100/:file 

 

 

사이트 스크린샷

필요할지 잘 모르겠는 기능이지만, 사이트를 스크린샷 찍을 수 있습니다.

https://cdn.statically.io/screenshot/:params/:url

:params

• device=mobile
• full=true
• pdf

이 :params도 콤마(,)를 이용해 여러 개를 사용할 수 있습니다.

 

단점 중에 한글 폰트에 따라 깨지는 경우가 있습니다.

아마도 폰트 파일 로딩이 차단되어 그런 것으로 생각됩니다.

제가 여러 번 실험해 본 결과 Google fonts, jsDelivr등에서 불러오는 폰트는 정상적으로 보이는 것으로 추정됩니다.

 

full=true 설정 시 무한 스크롤이 적용된 웹페이지라면 중간에 끊기거나 Timeout으로 500번대 서버 에러가 발생할 수 있습니다.

 

 

Avatar

아바타(프로필)를 생성 가능합니다.

https://cdn.statically.io/avatar/:params/:text

단점으로는 두 글자만 가능 + 한글 인코딩(URI 인코딩 되어 %E 뭐 이렇게 뜹니다.)

 

 

 

OG Image

오픈그래프용 미리 보기 이미지 생성이 가능합니다.

https://cdn.statically.io/og/:params/:text.jpg

이 역시 서버 내부에 한글 폰트가 없어 한글 렌더링이 불가하며, 깨진다는 단점이 있습니다.

아이디어 자체는 좋은 것 같습니다.

 

 

https://statically.io/

The CDN for developers

 

Statically 보충설명

위에서 소개하지 못한 내용 보충.

 

html 파일 처리

*.html 파일은 jsDelivr과 다르게 403으로 전송하지 않습니다. (별도 요청/승인 필요)

반면 jsDelivr은 Content-type헤더를 이용해 실행되지 않는 단순한 텍스트(text/plain) 형태로 보낸다.

 

 

업무 및 처리?

jsDelivr은 Prospect One이라는 미국과 폴란드에 회사가 있고,

Statically는 개인이 유지 보수하는 것 같다. 인도네시아에 있다.

Community가 있으나, 유저수가 적고 관리자는 거의 읽지 않는게 단점.

 

 

추가적으로, 함께 봐도 좋은 내용

https://hi098123.tistory.com/273