Github Pages + CloudFlare 같이 쓰지 마세요

Github Pages는 이전에도 여러 번 소개한 적 있는 프론트엔드를 올려두기 좋은 서비스다.

 

깃허브 페이지스는 최근 1년사이에 한국에서 접속 시 속도가 향상되었다.

기존에도 캐시서버 업체로 Fastly를 이용했는데, 기존 hnd(하네다공항: 일본)에서 icn(인천공항: 한국)으로 캐시서버가 바뀌었다.

 

현재 한국의 Fastly 서버는 널널한 편으로 정적인 Asset을 캐싱한 경우 보통 내부 처리는 1~5ms 정도밖에 걸리지 않는다.

 

국내에서 가장많이 사용되고 있는 CloudFlare는 많은 업체에서 사용 중이고 가동률이 높은지..

최근 들어 속도가 조금 저하되어 기존 10ms이내에 로딩하던 게 20ms까지도 걸리기도 한다.

(이는 단순히 내가 지속적으로 보던 크롬 개발자 모드에서 네트워크의 TTFB시간 기준이다.)

 

 

Github Pages의 캐싱정책

깃허브 페이지스는 기본적으로 600초(10분) 동안 Fastly라는 CDN 업체에 캐시되어 제공된다.

이 시간은 길다면 길수도 있지만, 짧다고 볼 수 있는데.

 

일단 캐싱되면 속도가 매우 빨라진다. (Fastly의 한국지점 서버에서 응답)

 

캐싱이 만료되었거나 캐시가 없다면, 속도상으로 미국 서버에서 한국 서버로 응답하는 것으로 보인다.

 

대략 150ms~200ms가 소요되기에 미국 서부나 중부지방의 서버로 추정된다.

(이 속도도 느린 건 아니다.)

 

 

 

CloudFlare 사용 시

한국에서 CloudFlare 사용 시 엔터프라이즈 플랜으로 트래픽 계약을 맺은 상태가 아니라면, 한국서버를 주지 않는다.

 

Github Pages + CloudFlare 조합으로 사용시 사용하는 인터넷에 따라 다르겠지만..

 

Github Pages(일본캐시 + 미국원본) + CloudFlare(일본)으로 연결될 가능성이 크다.

(또는 Github Pages(미국) + CloudFlare(미국))

 

 

이럴 거면 같이 쓰지 마세요

일단 먼저 네트워크 처리과정을 보자.

 

CloudFlare 사용 시

1. 사용자 요청
2. 클라우드플레어(일본:캐시 안됨)
3. 패스틀리(일본:캐시 안됨)
4. 깃허브 원본서버

특징: 패스틀리에서 캐싱하는 10분 동안은 아래의 절차만 실행된다.

1. 사용자 요청
2. 클라우드플레어(일본:캐시 안됨)
3. 패스틀리(일본:캐시 됨)

 

Github Pages만 사용 시

1. 사용자 요청
2. 패스틀리(한국:캐시 안됨)
3. 깃허브 원본서버

특징: 패스틀리에서 캐싱하는 10분 동안은 아래의 절차만 실행된다.

1. 사용자 요청
2. 패스틀리(한국:캐시 됨)

 

위 내용을 보면 알 수 있겠지만, 단순히 과정을 1개 늘리고 일본서버를 경유해서 더 느릴 수밖에 없다.

또한 트래픽 10GB가 적다고 쓰는 것일 텐데 기본값으로 프록시(주황색구름) 사용 시 의미가 하나도 없어진다.
클플의 기본은 html 캐시 안 함, 사용자별 다른 캐시 등으로 깃허브 페이지에서 CloudFlare를 사용하지 않는 상태와 다를 바가 없다.

 

 

제대로 쓰는 법

1. CloudFlare에서 페이지 규칙을 수정한다.

   

   신규 레이아웃 - 좌측

   

   구 레이아웃 - 상단

2. 규칙을 생성해서 배포한다.

   

   에지 캐시 TTL과 브라우저 캐시 TTL을 조금 더 큰 값으로 변경한다.

이렇게 에지 캐시를 늘려야 제대로 효과를 볼 수 있다.

페이지가 자주 바뀌지 않는다면, 최대값으로 사용해도 무방하다.

 

이 설정만 한다면, 트래픽은 무제한 수준이 되고 + 평균 로딩속도도 클플 지점에 따라 다르지만 일본으로 잡히는 경우 30~200ms정도다.

 

그런데, 이렇게 해도 단점이 있다.

페이지를 수정했을 때 캐시를 제거해야만 변경된 페이지를 로딩할 수 있다.

 

이때는 클플 대시보드에서 Caching - 구성 - 모든 캐시 제거로 캐시를 모두 제거한다면, 업데이트될 것이다.

API로 사용한다면 좀 더 편리하게 만들 수 있다. 이 부분은 알아서 찾아보시기 바랍니다.

Cloudflare API v4 Documentation