클라우드 플레어 워드프레스 풀캐시 하는법

클플 Cache everything 검색하면 아직도 페이지룰(Page rules)로 하라는 글 많음.
진작 사장된 방식. 클플도 이 기능 죽일꺼니까 캐시 룰(Cache Rules)쓰라고 공식적으로 말함.
그니까 캐시룰 ㄱ
근데 그냥 도메인 전체 캐시하면 여러가지 문제 생김(어드민, 미리보기 페이지 등) 최적화도 안됨 디테일한 설정 필수.
캐싱 순서 반대로 알려주는 경우도 잦음, 그럼 아무 의미 없어짐. 클플 캐싱은 순서가 매우 중요
직접 만져보며 캐시 되나 확인하는 과정 꼭 필요(F12 크롬 개발자도구 → Network 탭(F5 새로고침) → 확인할 요소 클릭 → Headers → Response Headers → Cache-Control: max-age=* 보고 판단하면 됨)
고기 잡는 원리 알려주고, 보너스로 라이트세일&워드프레스 기준 실제 예제 코드도 짜줄테니 본인 사이트에 맞게 조절&테스트 해가며 설정 ㄱ

Cloudflare 캐시룰 설정 방법

클플 대시보드 좌측 'Caching → Cache Rules' 메뉴 진입
파란색 Create rule 버튼을 눌러 캐시 룰 생성
Rule name 적당히 본인 구분 편하게 작성
Field 어떤 단위로 캐시를 구분할 것인지 방식을 정함. Hostname이면 도메인 단위(ex.com), URI Full 이면 전체 URL 단위(ex.com/category/1), URI Query String이면 URL의 쿼리 값으로(검색 페이지 /?s=를 쿼리값으로 전부 캐시, 미리보기 페이지 &preview=true로 제외 등) 캐시할 방식의 대분류를 설정.
Operator 앞서 Field에서 정한 방식 안에서 디테일하게 어떤 파트 캐시할 것인지 설정. equals면 같은 값(ex.com = ex.com) contains 면 포함하는 값(/category/ = ex.com/category/1, ex.com/category/2) ends with 이면 끝나는 값(.png = ex.com/uploads/img.png)으로 설정되는 식
Value 그렇게 구분될 실제 URL이나 쿼리값을 넣어주면 됨
And는 교집합을 추가하는 것, 디테일하게 특정 구간 캐시할거 아니면 Or을 써서 단순히 캐시 파트를 추가하는게 등록, 관리 편함
Expression Preview부분 우측의 Edit expression를 클릭해 다른 사용자나 본인이 세팅했던 값을 텍스트로 저장해 바로 불러올 수 있음(아래서 세팅값 짜줌)
Cache eligibility에서 Bypass cache를 선택해 앞서 정의한 값들을 캐시하지 않음 설정하거나
Eligible for cache를 선택해 앞서 정의한 값들을 캐시함 설정
Edge TTL 클라우드 플레어 측 엣지 서버 캐시 기간 설정. Ignore cache-control header and use this TTL 선택후 기간 직접 정하는게 가장 좋음(메인 서버나 캐시 플러그인 설정을 무시하고 우선되기 때문)
Browser TTL 사용자의 브라우저 측 캐시 기간 설정. 마찬가지 Override origin and use this TTL 선택후 기간 직접 정하는게 좋다.
나머지는 특별한 경우 아니면 냅두면 됨.
최하단 Deploy 클릭, 세팅한 캐시를 배포하면 하나의 캐시 룰에 관한 모든 설정이 완료됨.

위 과정을 거쳐 배포할 캐시들의 Bypass(캐시안함), Eligible(캐시함)을 구분해 생성후 순서에 맞게 배치하면 됨

Cache Rules의 캐싱 순서

캐시룰 포함 클라우드 플레어 룰은 코딩과 같이 위에서부터 아래로, 1번부터 마지막 번호 순으로 우선 적용됨. 즉

전체 사이트 캐시 1달
이미지 파일 캐시 1년
어드민 페이지 캐시 안함

이런 식으로 가장 중요하게 우선되어야 할 룰을 가장 아래에 배치해야 함.

위처럼 설정시 1차적으로 어드민 페이지 캐시 안하고 → 2차적으로 어드민 제외한 이미지 파일 1년 캐시 → 3차적으로 어드민 제외 이미지 1년 나머지 1달 캐시 하게 됨.

대부분 사이트에서 보안상 문제 없이, 동적 & 정적 페이지 구분해 최고 효율로 캐시하려면

그 외 전체 사이트 12시간(43200) 캐시
Fresh하게 유지해야 되는 동적 페이지(홈화면, 카테고리 등) 2시간(7200) 캐시
오래 캐시할수록 좋은 정적 파트(이미지, CSS, JS, 소개 페이지 등) 1년(31536000) 캐시
캐시하면 안되는 어드민 및 보안 페이지 Bypass

이런 식으로 Bypass로 중요 페이지 차단 → 정적 요소 장기간 캐시 → 동적 파트 단기간 캐시 → 나머지 부분 적당한 캐시 하면 최적화됨

실제 캐시룰 세팅값 코드

앞서 말한 사항들을 고려해 라이트세일&워드프레스 환경 평범한 실제 블로그 세팅값 짜줌. 그대로 따라하기 보단(~~그래도 작동하긴 함~~) 참고해서 본인한테 맞게 ㄱ

말했다시피 마지막 순서부터 우선순위 적용되니까 역순으로 ㄱ, 위는 세팅값 아래는 앞서 설명한 붙여넣을 수 있는 expression 텍스트 값

6. 워드프레스 보안 Bypass-1

URI Path, starts with, /wp-json/wp/v2/users
URI Path, starts with, /wp-json/wp/v2/revisions
Bypass cache

(starts_with(http.request.uri.path, "/wp-json/wp/v2/users")) or (starts_with(http.request.uri.path, "/wp-json/wp/v2/revisions"))

5. bots 호응 및 사이트 코어 캐시

URI Path, ends with, sitemap.xml
URI Path, ends with, sitemap.xsl
URI Path, ends with, robots.txt
URI Path, starts with, /wp-json/
Eligible for cache
Edge TTL, 2 hours
Browser TTL, Respect origin TTL

(ends_with(http.request.uri.path, "sitemap.xml")) or (ends_with(http.request.uri.path, "sitemap.xsl")) or (ends_with(http.request.uri.path, "robots.txt")) or (starts_with(http.request.uri.path, "/wp-json/"))

4. 정적 파트 장기간 캐시

URI Path, starts with, /wp-content/
URI Path, starts with, /wp-includes/css
URI Path, starts with, /wp-includes/js
URI Path, starts with, /wp-includes/images
URI Path, starts with, /wp-includes/fonts
URI Path, starts with, /wp-includes/block
Eligible for cache
Edge TTL, 1 year
Browser TTL, 1 year

(starts_with(http.request.uri.path, "/wp-content/")) or (starts_with(http.request.uri.path, "/wp-includes/css")) or (starts_with(http.request.uri.path, "/wp-includes/js")) or (starts_with(http.request.uri.path, "/wp-includes/images")) or (starts_with(http.request.uri.path, "/wp-includes/fonts")) or (starts_with(http.request.uri.path, "/wp-includes/block"))

3. 어드민 보안 Bypass-2

URI Path, starts with, /wp-admin/
URI, starts with, /wp-
URI, contains, wp-login.php
URI, contains, .txt
URI, contains, .xlst
URI, contains, .xml
URI, contains, .htaccess
URI, contains, wp-config.php
URI, contains, wp-signup.php
URI Query String, contains, PHPSESSID
URI Query String, contains, wordpress_logged_in
URI Query String, contains, preview=true
Bypass cache

(starts_with(http.request.uri.path, "/wp-admin/")) or (http.request.uri contains "wp-login.php") or (http.request.uri contains ".txt") or (http.request.uri contains ".xlst") or (http.request.uri contains ".xml") or (http.request.uri.query contains "no_cache") or (http.request.uri.query contains "PHPSESSID") or (http.request.uri.query contains "wordpress_logged_in") or (http.request.uri contains ".htaccess") or (http.request.uri contains "wp-config.php") or (http.request.uri contains "wp-signup.php") or (http.request.uri.query contains "preview=true") or (starts_with(http.request.uri, "/wp-"))

2. 동적 파트 단기간 캐시 (YourDomain 부분 반드시 자기 도메인으로 변경, 사이트마다 달라지는 파트도 맞게 변경)

URI Full, equals, https://YourDomain.com/
URI Path, starts with, /all/
URI Path, starts with, /category/
URI Path, starts with, /tag/
Eligible for cache
Edge TTL, 2 hours
Browser TTL, 2 hours

(http.request.full_uri eq "https://YourDomain.com/") or (starts_with(http.request.uri.path, "/all/")) or (starts_with(http.request.uri.path, "/category/")) or (starts_with(http.request.uri.path, "/tag/"))

1. 그 외 나머지 도메인 풀캐시

Hostname, contains, YourDomain.com
Eligible for cache
Edge TTL, 12 hours
Browser TTL, 12 hours

(http.host contains "YourDomain.com")

바이패스 나눠서 하는 이유는 URL이 겹치는 부분들 때문에 위와 같이 설정해야 캐시 우회와 캐시가 적절하게 이뤄짐.

6번에서 먼저 /wp-json/users 를 막아야 5번에서 나머지 /wp-json/을 캐시하고,

그렇게 5번에서 나머지 /wp-json/을 먼저 캐시하고 4번에서 /wp-content/를 먼저 캐시해야 3번 /wp-바이패스에서 막히지 않고 캐시되는 식.

적당히 예시로 보여준거니까 본인 상황에 맞게 ㄱ