개요
우리 회사 에서 개발, 운영중인 서비스가 커머스이기 때문에 여느 플랫폼처럼
공유하기 버튼이 필요했고,
각 SNS로 공유하기, 링크 복사등의 기능을 추가하는 프론트 프로젝트를 맡았다.
결과적으로 기능 자체는 SNS 개발자 문서에 공유하기 기능을 편리하게 잘 제공하고 어렵지 않게 완료했다.
배포 후 테스트 중 문제점 확인
공유가 된 이후에 SNS에서 공유된 링크를 확인할 때 링크의 섬네일이 문제였다.
상품화면에서 공유하면 상품 사진, 해시태그를 공유하면 해시태그 사진이 섬네일로 나와야하는데 어떤 링크를 공유해도 index.html 만 보여졌다.
원인 파악
SNS 마다 썸네일 크롤링 봇이 있고 크롤링 봇은 index.html만 가져갈 뿐
Vue를 렌더링 시키지 못하는 걸로 확인됐다.
해결 아이디어
- 프론트에 접근하는 클라이언트의 user-agent를 수집한다.
- 각 sns 크롤링 봇의 user-agent 를 수집하여 정리한다.
- 공유된 링크의 썸네일 html 메타 페이지를 생성하여 Server-side-rendering하는 공유하기 전용 API 서버를 개발한다.
- user-agent 를 필터링해서 공유하기 API 서버로 redirect.
개발
1
- 카카오톡 , 페이스북, 라인, 밴드, 트위터, SMS (아이폰, 삼성, LG폰), 카카오스토리 에서 접근할 때의 NginX 로그를 확인해서 user-agent를 확인.
- 후에 크롤링 봇임을 확인하기 위한 정규표현식을 작성했다.
2
- AWS lambda 이용 결정
- 정규식을 이용해서 크롤링 봇일 경우 공유하기 SSR API 로 리다이렉트시킬 express 소스를 서버리스로 aws 람다에 올렸다.
- 람다를 사용한 이유는 명확한 한 가지 역할을 수행하는 단일 파일의 소스를 24시간 구동시키기에 적합한 서버리스로 수행하기 위해서이다. 무엇보다 내가 써보고 싶었다.
- 봇을 필터링해서 uri에 /share 를 붙여서 상용 서버로 redirect 시켰다.
3
- API 서버개발
- Nginx 설정에서 /share 가 붙은 접근이 발생시 proxy_pass를 공유할 API 를 매핑시켯다.
- express 서버를 개발했다. 링크에 있는 정보를 이용해 상품이나 해시태그 정보등을 front-API 를 호출해서 메타페이지를 생성시켜서 res.render.
끝. 잘 해결됐다.
백엔드