﻿ 워드프레스 WP Fastest Cache 플러그인에 CDN 적용하기 | 아이콘 포스트
홈 » aws » 워드프레스 WP Fastest Cache 플러그인에 CDN 적용하기
워드프레스 WP Fastest Cache 플러그인에 CDN 적용하기
카테고리 aws, 강좌, 워드프레스, 플러그인
날짜 2018년 3월 17일
W3 Total Cache와 WP super Cache는 워드프레스의 대표적인 캐시 플러그인입니다. 그러나 복잡한 플러그인 사용법 덕에 만지기가 쉽지 않아 대부분은 캐시 플러그인을 제대로 사용하지 못하고 있죠. 이 때문에 아주 가볍고 간편하게 캐시를 설정할 수 있는 WP Fastest Cache 플러그인 또한 많은 사람들이 애용하고 있습니다. 캐시 설정 페이지에서 사용이 필요한 부분만 간단하게 체크해주면 되니까요.
많은 사람들이 모르고 계시는 것 같은데 WP Fastest Cache 플러그인도 CDN 설정이 가능합니다.
오늘은 WP Fastest Cache 플러그인을 이용하여 포톤을 사용하는 방법, 타사의 CDN을 사용하는 방법 등 2가지 방법에 대해 설명합니다. 만약 당신이 WP Fatest Cache 플러그인을 사용하고 있다면 이 글을 참고하시기 바랍니다.
1 포톤(Photon)으로 무료 이미지 CDN 이용하기
2 타사의 CDN 사용하기
포톤(Photon)으로 무료 이미지 CDN 이용하기
워드프레스는 포톤이라는 이미지 CDN을 지원합니다. 무료 CDN이고 압축 기술 또한 포함되어 있습니다. 워드프레스에서 올린 JPG, GIF 등의 이미지 데이터는 ‘wp-content/upload/’ 경로로 업로드되고 i0.wp.com 경로로 캐시 됩니다.
만약 개인 블로그에서 이미지를 많이 사용하고 있다면 포톤을 적극 추천합니다. 일정 트래픽을 사용하면 이미지 로딩이 다소 느려진다는 단점이 있기는 하지만 무료로 호스팅의 트래픽을 아낄 수 있고 서버의 과부하를 줄일 수 있습니다.
만약 포톤 때문에 젯팩을 설치하고 계신다면 다소 무거운 젯팩을 삭제하시고 WP Fatest Cache에서 포톤을 설정하시기 바랍니다.
설정 방법은 아주 간단합니다.
WP Fastest Cache에서 CDN 탭으로 이동한 후 CDN by Photon을 눌러 설정하면 됩니다. CDN 서버는 i0부터 i3까지 존재하며 RANDOM으로 연결하면 WP Fastest Cache 플러그인이 각 포톤 서버에 이미지를 자동으로 분산시킵니다.
Next를 눌러 파일 타입을 설정한 후 넘기면 포톤 설정이 완료됩니다.
브라우저에서 F12를 눌러 관리자 모드로 진입하면 이미지의 CDN 설정이 완료되었는지 확인할 수 있습니다.
만약 적용되지 않는다면 WP Fatest Cache의 Delete Cache로 캐시를 지워주시기를 권장하며 캐시가 배포될 때까지 침착하게 기다려보시기 바랍니다.
타사의 CDN 사용하기
워드프레스에서 유료 CDN을 사용하는 이유는 분명합니다. CDN을 쾌적하게 이용할 수 있고 이미지뿐만 아니라 css, js 등 다양한 파일을 캐시 할 수 있기 때문이죠.
오늘은 아마존웹서비스(AWS)의 클라우드 프론트를 사용하여 설명하지만 타사의 CDN을 생성할 줄 안다면 타사의 CDN으로 설정하셔도 무방합니다.
이제 클라우드 프론트의 Distribution을 생성해보겠습니다.
AWS에서 ‘서비스 – CloudFront’로 진입하여 ‘Create Distribution’을 눌러보겠습니다.
위 이미지와 같은 페이지가 표시되는데 RTMP는 Real-Time Messaging Protocol의 약자로써 미디어 스트리밍 서비스에서 활용하는 방식입니다. 워드프레스는 Web의 Get Started를 눌러주면 됩니다.
이제 복잡한 설정 과정을 거쳐야 하는데 워드프레스 사용자가 꼭 설정해야 할 부분에 대해서만 설명하도록 하겠습니다.
오리진 세팅 과정에서는 Origin Domain Name 부분과 Origin Protocol Policy만 수정해주면 됩니다.
Origin Domain Name은 자신의 워드프레스 도메인을 입력해주면 되고 Origin Protocol Policy는 클라우드 프론트가 오리진 즉, 당신의 워드프레스에 연결할 방식을 설정하는 값입니다. 자신의 워드프레스가 http라면 HTTP Only를, https라면 HTTPS Only로 설정해주시면 됩니다.
다음은 캐시의 기본 동작을 설정하도록 하겠습니다.
나머지는 기본 값으로 두고 Allowed http Methods와 Smooth Streaming, Compress Objects Automatically만 수정해주면 됩니다.
Allowed http Methods는 클라우드 프론트가 오리진을 처리하고 전달하기 위한 HTTP 메소드로써 GET, HEAD는 당신의 워드프레스에서 객체를 가져오거나 헤더를 가져오기 위한 설정이고 GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE는 가져오기뿐만 아니라 추가, 업데이트, 삭제 기능 등을 포함시키는 설정입니다.
‘Smooth Streaming’은 말 그대로 부드럽게 스트리밍을 가져다주는 설정이고 ‘Compress Objects Automatically’는 압축 설정입니다.
만약 당신의 워드프레스에서 HTTPS를 지원한다면 ‘Redirect HTTP to HTTPS’ 또는 ‘HTTPS Only’를 설정해주어야 원활하게 동작됩니다. 앞선 ‘Origin Protocol Policy’ 메뉴와 다르게 이 부분은 클라우드 프론트의 프로토콜 방식입니다. 당신의 워드프레스에 HTTPS가 설정되어있다면 부분을 설정해주고 클라우드 프론트에 인증서를 설정해야 합니다.
캐시 시간을 설정하려면 Object Caching을 Customize로 선택한 후 TTL 값을 수정해주면 됩니다. 비교적 높게 잡아주는 것을 권장합니다. TTL은 초를 의미하며 값 중 31536000은 1년입니다.
다음은 Distribution 세팅인데요. 이 부분은 CNAME 설정 외에 딱히 설정할 부분이 없습니다.
만약 워드프레스에서 HTTPS를 사용한다면 Custom SSL Certificate를 눌러 인증서를 설치해주어야 합니다. 인증서 생성은 바로 아래 ‘Request or Import a Certificate width ACM’ 버튼을 누르시거나 AWS 메뉴에서 ‘서비스 – Certificate Manager’로 진입하면 아주 간단하게 생성할 수 있습니다.
사용하고자 할 도메인(cdn.example.com)을 Alternate Domain Names에 입력한 후 도메인 업체 홈페이지에 접속하여 도메인 별칭 값에 클라우드 프론트 주소를 적어주면 됩니다. 클라우드 프론트 주소는 이 설정을 완료하면 DomainName 란에 표시됩니다. ex)abc.cloudfront.net
도메인 업체 홈페이지의 CNAME 설정 방법은 따로 설명하지 않겠습니다.
마지막으로 WP Fastest Cache에서 CDN을 설정해보겠습니다.
CDN 탭에서 Other CDN Providers를 눌러보죠. CDN과 오리진의 URL을 설정할 수 있는 창이 표시됩니다.
CDN URL은 클라우드 프론트 홈에서 Domain Name에 할당된 값을 넣어주시면 됩니다. 만약 CNAME 설정이 제대로 완료된 상태라면 CNAME 값을 넣어주면 됩니다.
Origin URL은 당신의 워드프레스 주소를 입력시켜주면 됩니다.
CDN에 캐시 할 파일 타입을 선택해줍니다. 전체를 선택한 상태에서 넘기더라도 문제는 없습니다.
이제 CDN 설정이 완료되었습니다.
개발자모드로 진입하여 이미지나 CSS 파일의 URL이 CDN URL과 일치하는지 확인해보세요.
추가적으로 워드프레스 규모에 따라 페이지가 정상적으로 표시되지 않을 수 있습니다. 이 경우 배포 시간 즉, 최소 10분에서 길게는 1시간 이상을 기다려보시기 바랍니다.
배포가 완료되었는데도 제대로 표시되지 않는다면 WP Fastest Cache에서 Delete Cache 버튼으로 캐시를 삭제하거나 클라우드 프론트에서 재배포 혹은 캐시 무효화를 진행해주세요. 클라우드 프론트의 캐시 무효화 방법은 이곳에서 확인할 수 있습니다.
워드프레스에 W3 Total Cache로 아마존 클라우드 프론트(Cloudfront) CDN 연결하기 워드프레스 W3 Total Cache의 Page Cache 항목 설정 방법 워드프레스 W3 Total Cache의 Browser Cache 항목 설정 방법 워드프레스 CDN 이미지 업로드 폴더, Offload S3 플러그인으로 아마존 서버에 저장하기 워드프레스 및 사이트에 Cache-Control 브라우저 캐시 만료 시간 설정하기 워드프레스의 속도 향상을 위한 W3 Total Cache 플러그인 사용법 및 설정 방법
구직) 신입 모션그래퍼 겸 1인 영상 제작 프로덕션 입니다 유튜브 편집자 희망합니다
익스타 스튜디오
블렌더 기초
블렌더 튜토리얼
스마트폰 크기의 초소형 미니 셀카 드론? 에어셀피
206월2017
맥북 프로 발열에 도움을 주는 노트북 스탠드?, 엘리베이터 랩톱 스탠드
082월2017
RED의 스마트폰, 과연 카메라 특화 제품일까?
107월2017
프리미어 프로 강좌 : 프로젝트 만들기 & New Project 인터페이스 설명
019월2018