github에서 README.md이미지 업데이트 문제: Camo와 캐싱 이슈 해결하기

click-me라는 사이드 프로젝트를 하고 있다. 간단히 말하면 github README.md파일에 넣을 클릭카운트를 누를수 있는 이미지를 제공해주는 프로젝트이다. 모습은 아래와 같다.

하지만 개발을 하고나서 README.md에 이미지를 삽입하여 테스트해보니, 클릭 카운트가 증가하지 않는 문제를 발견했다. 처음에는 코드 상의 오류인가 싶어 직접 URL로 호출해봤는데, 클릭 카운트는 잘 증가했다.

어떤게 문제일까 찾던 도중 발견한 답은 Camo와 캐싱이였다.

Camo

---

Camo가 무엇인지 github을 찾아보니까 아래와 같은 문구를 찾을 수 있었다.

이미지를 호스트하기 위해 GitHub Enterprise Cloud는 오픈 소스 프로젝트 Camo를 사용합니다. Camo는 다른 사용자로부터 브라우저 세부 정보 및 관련 정보를 숨기는 각 파일에 대해 익명의 URL 프록시를 생성합니다. URL은 이미지를 업로드한 방법에 따라 다른 하위 도메인과 함께 https://<subdomain>.githubusercontent.com/으로 시작합니다.

쉽게 말해서 Camo 혼합 콘텐츠 경고를 방지하기 위한 SSL 이미지 프록시이다.

그래서 github readme.md 파일에 내가 작성했던 원래 링크로 쓰이지 않고 Camo를 통해 생성된 url로 변경되어서 사용된다. Camo는 익명의 URL Proxy를 생성해주기 때문에 GitHub REAME.md에 넣어준 나의 모든 이미지 링크는 모두 https://camo.githubusercontent.com/로 시작되는 링크로 바뀌어서 실제로 사용된다.

Camo가 적용된 모습

<img src="https://clickme.today/api/clicks/count?id=seungpang">

이렇게 readme.md파일에 넣었다고 가정했을 때 실제 이미지의 링크를 확인해보면

https://camo.githubusercontent.com/96d003f332ef9954e97e990e9de99ec81b9f97bb4168265ffad7eec3ef753e87/68747470733a2f2f636c69636b6d652e746f6461792f6170692f636c69636b732f636f756e743f69643d7365756e6770616e67

실제로는 위와 같이 변한 것을 확인할 수 있다. url이 변경되는것은 알았지만 업데이트 안되는 문제는 뭘까?

Cahce

---

답은 의외로 간단했다. 바로 캐시 설정이다. 내가 작성한 api에서는 캐시 설정이 존재하지 않았기 때문에 Camo에서 설정된 캐시 정책으로 이미지가 호스팅되고 있었기 때문이다. 즉 api를 호출해서 카운트를 증가시켰지만 캐시된 이미지를 계속 보여주고 있기 때문에 클릭 카운트는 업데이트 되지 않았다.

이 문제를 어떻게 해결할 수 있을까?

해결방법

---

내가 이미지를 호스팅할 경우

api에 대한 응답을 할때 헤더에 cache-control을 추가해주는 방법이다.

cache-control: no-cache

no-cache는 캐시된 것을 사용해서 보여주기 이전에 재검증을 위한 요청을 서버로 보내게 강제한다. 이렇게 하면 새로운 이미지를 계속 요청하게 되어서 이미지가 업데이트 안되는 문제가 해결이 된다.

내가 이미지를 호스팅 하지 않는다면?

이미지를 호스팅 하지 않는다면 헤더를 수정할 수 없기때문에 cache-control 건드릴 수 없다. 이럴 경우에는 camo의 캐시를 없애달라고 요청해야한다.

curl -X PURGE <camo링크>

이렇게 캐시를 제거하면 모든 이미지를 다시 요청하게된다.

이 부분은 친절하게 아래 페이지에 상세히 나와있으니 참고하면 좋을 것 같다.

https://docs.github.com/ko/enterprise-cloud@latest/authentication/keeping-your-account-and-data-secure/about-anonymized-urls#troubleshooting-issues-with-camo

Reference

---

• https://docs.github.com/ko/enterprise-cloud@latest/authentication/keeping-your-account-and-data-secure/about-anonymized-urls#troubleshooting-issues-with-camo
• https://github.com/atmos/camo