5. 트러블슈팅기 CSR에서 동적 OG 메타태그 적용하기

https://techblog.woowahan.com/15469/

• CSR 에서는 HTML 이 고정된 채로 내려온다.
• 하지만 메타태그를 동적으로 주입하기 위해서는 head 에 적븐하여 메타태그 내부를 수정해야함

해결 방법

• CloudFront 람다 펑션 사용
  • 람다 펑션을 통해서 클라우드 프론트 캐시에서 반환된 값(html)을 변경할수 있다.
  • 따라서 queryString 에 메타태그에 들어갈 image url 을 넣고 해당 값을 람다펑션에서 파싱 및 포맷하여 html 에 주입한다.
  • 하지만..람다 펑션에서 html 을 수정할 수는 없었음. 그냥 갈아끼우는 수 밖에 없었다.
  • 따라서 user-agent 가 bot 일 경우만 (즉 오픈그래프를 생성하기 위한 봇이 읽어갈 경우에만) body 를 그냥 통으로 메타태그로 생성해서 넣어주고 (애플리케이션 코드는 싹 없어짐) 일반 유저일 경우는 원본 html 을 보내줘서 앱을 서빙할 수 있게 해줌

나도 최근애 클라우드프론트 설정때문에 버그를 마주한 경험이 있다..내가 경험한 버그는 뭐냐하면
에디터에서 어떤 테마인가? 를 구분하기 위해서 내 테마의 고유 id 를 path 로 넣어주기로 했다.
/themeId/
로컬에선 잘 동작함 근데 배포하고나니까 index page 로 돌아가서 패스파람 정보를 싹다 잃어버림
알고보니 에디터 클라우드프론트에서 에디터 도메인 접근시 index.html을 서빙한것이다
그래서 그냥 테마 id 는 쿼리스트링으로 받고, 에디터 Index.tsx 즉 엔트리파일에서 쿼리스트링으로 받은 테마id 기반으로 다시 리다이렉트 시키도록 수정해줌