GCP CDN 적용하기

by seunghwan

목적 : 워드프레스로 만들어진 페이지에 이미지와 같은 정적리소스를 캐시하여 클라이언트 요청에 빠르게 반응하고 원서버에 부하를 줄이는 인프라를 구축

CDN(content delivery network) 은 전 세계에 분산된 서버를 사용하여 사용자와 가까운 위치에 부하 분산 콘텐츠의 사본을 캐시한다.

캐싱을 통해 정적 요소의 요청을 줄일수 있다. 또한, 캐시된 요청을 전송하므로 클라이언트 요청에 대한 응답 시간을 줄일 수 있다.

gcp 에서 제공하는 cdn을 이용하였다 우선은 gcp 부하 분산를 만들어야한다.

부하 분산 추가하기를 누르면 백엔드 프론트엔드 이 두 부분을 설정해야한다. 백엔드는 리소스들을 저장할 스토리지를 지정하면 되는데 버킷추가하기를 통해할수있다.

프론트는 해당 load balanace의 요청을 받는곳이다. 이곳에서 http/https를 선택하고 ip를 지정해줄수 있다.

워드프레스에서 사용을 하려면 https를 사용을 해야해서 SSL이 필요한데 SSL을 발급받기 위해서는 domain이 필요해서 domain을 만들어야 하지만 domain을 지정하기위해서는 ip가 필요하기 때문에 우선은 아무 SSL을 선택해서 프론트까지 설정을 하고 부하분산을 추가하여 해당 ip를 가지고 domain을 만들것이다. cloud DNS를 통해 domain을 만들어주자. 그리고 이 domain을 이용하여 SSL을 발급받을 수 있다. SSL은 부하 분산에서 고급설정을 클릭하면 인증서라는 탭에서 만들 수 있다. domain값을 넣어주고 SSL의 이름을 설정하고 신청을하면 짧게는 5분 길게는 30분정도면 만들어진다.

미리 만들었던 부하 분산의 프론트엔드에서 SSL을 교체하면 CDN을 사용할 준비는 끝이 난다.

워드프레스 세팅하기

이전에는 SP-stateless라는 플러그인을 이용하였다. 하지만 해당 플러그인에서는 리소스의 url의 도메인을 임의대로 설정할수가 없어 cdn을 활용할수가 없다. (이 부분은 당시에 잘못 이해를 해서 할수 없다고 생각했지만, SP-stateless로도 url을 임의로 설정이 가능하다. 하지만 파일명에 한글이 포함되어 있으면 해당 글자를 제거해서 파일명이 임의로 변경 되서 오류를 발생시킬수 있다. 이러한 문제때문에 처음에 SP-stateless를 적용했을때 매칭이 되지않아 직접 찾아서 url에서 파일명부분을 변경해준경험이 있다. media cloud는 이러한 문제도 없어서 이부분만 고려한다면 좋은 교체였던거같다.)

무료 이면서 이러한 기능을 제공하는 Media Cloud라는 플러그인을 사용할 것이다. 이전에 사용하던 플러그인에 세팅 해놓았던 PROVIDER SETTINGS을 그대로 옮겨올수 있다. cdn을 이용하기 위해 이미지 파일이 가지는 url의 domain값만 세팅을 해주면 된다. 이 값은 앞에서 부여한 도메인값을 적으면 되는데 앞에 https://를 넣어주자 넣어주지 않는 경우 해당 이미지를 불러오는 곳의 도메인이 앞에 들어가는 버그나 http가 들어가서 cors정책에 막혀서 그림을 불러오지 못하는 경우가 있었다.

이렇게 세팅을 하고 워드프레스에서 그림을 업로드하면 GCP 스토리지에 해당 이미지가 저장되는것을 확인할 수 있고 이 이미지를 이용하고 해당 페이지를 보면 캐시된 이미지가 올것이다. cdn에 캐시가 되고 그것을 잘받아서 사용중인지 확인하는 방법은 GCP 로그 기록에서 확인 가능하다. 여기서 위에서 만든 부하 분산를 선택하고 최근에 내가 사용한 이미지를 부르는 요청을 열어보면 확인할수 있는데.

요청을 열어보면 이런 json값이 있다 이중에 cacheHit 와 cacheLookup이 true 이고 statusDetails에 response_from_cache라고 있으면 cdn에 캐싱이 잘되고 그것을 잘받아와서 사용하고 있다는것을 확인할수 있다.