[NodeJS] SNS 공유하기 봇 섬네일 크롤링 SSR

이준규·2022년 2월 19일
0

문제해결

목록 보기
2/2

개요

우리 회사 에서 개발, 운영중인 서비스가 커머스이기 때문에 여느 플랫폼처럼
공유하기 버튼이 필요했고,
각 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.

끝. 잘 해결됐다.


profile
백엔드

0개의 댓글