2023. 10. 31. 23:42ㆍDev
이 글은 next를 사용한 팀 프로젝트에서 인스타그램 크롤링을 하기 위해 어떤 방법들을 사용했고 어떻게 실패했는지의 기록이다.
팀 프로젝트에서 자연환경을 위한 챌린지를 진행하고, 챌린지 인증해 보상을 얻을 수 있는 웹 서비스를 기획했다.
챌린지 인증 방식을 의논 중 유저가 인증 사진을 인스타그램에 올리고 해당 url을 입력하면
url에서 사진과 해시태그를 크롤링해 DB에 저장시키고, 불러와서 보여주는 아이디어를 선택했다.
파이썬으로 크롤링해 본 경험이 있어 어렵지 않게 구현할 수 있을 거라 생각하고 진행했다.
찾아보니 node.js 기반으로 크롤링을 도와주는 여러 라이브러리가 있었다.
대표적으로 cheerio, poppeteer가 있었는데
cheerio를 먼저 사용해서 크롤링을 시도했다.
const response = await axios.get('url');
const html = response.data;
const $ = cheerio.load(html);
const images = [];
$('img').each((index, element) => {
const imageUrl = $(element).attr('src');
images.push(imageUrl);
});
위와 같은 cheerio사용법으로 크롤링했을 때 문제가 발생했다.
cheerio는 주로 HTML 문서를 파싱하고 조작하기 위한 라이브러리로
서버 측에서 받은 HTML을 분석하고 원하는 데이터를 추출한다.
인스타그램은 SPA로 유저가 접속했을 때 데이터를 불러오기 때문에 원했던 사진과 해시태그 데이터를 가져오지 못했다.
기본적으로 header에 담겨있는 meta데이터에 미리 보기 이미지가 포함돼 있었지만,
비율이 작은 사진이라 사용하지 못했다.
두 번째로 puppeteer 라이브러리를 사용해 크롤링을 시도했다.
puppeteer는 Chromium브라우저를 실제로 실행하고 조작하여 JS를 실행하고 페이지와 상호작용 할 수 있었기에 당연히 성공할 줄 알았다.
next 라우트 핸들러를 이용해 poppeteer를 사용하는 api를 구축해 사용했다.
그 결과 로컬환경에서 제대로 데이터를 받아오는 걸 확인했다.
해결된 줄 알았지만 문제는 배포환경에서 발생한다.
프로젝트를 vercel로 배포시도했지만 puppeteer의 용량문제로 배포에 실패했다.
그래서 puppeteer을 사용하는 api를 프로젝트에서 분리해 node환경에서 server function을 구축해서
glitch로 따로 배포했지만 glitch에서도 동일하게 용량 부족 문제로 실패했다.
그래서 결국 aws로 서버만 배포하기로하고 EC2환경을 만드는 과정에서
스택오버플로우와 깃허브에서 비슷한 경우를 찾아보니 AWS Lambda를 사용해서 성공했다는 글을 보게 되었다.
비용적인 측면을 생각했을 때 요청이 올 때마다 잠깐씩 실행되는 Lambda함수를 사용한다면 서버 코스트를 아낄 수 있다.
또한 환경을 세팅해야 하는 EC2와 달리 Lambda는 이미 열려있는 서버를 사용하는 것이기 때문에 환경 세팅을 해줄 필요도 없다.
여러 자료를 참고해 puppeteer를 실행해서 사진과 해쉬태그를 찾아 리턴하는 함수를 만들고 해당 코드를 zip파일로 압축하고 S3에 업로드 한 뒤 Lambda 함수로 등록했다.
그러나 10번 실행하면 1번 되는 성공률로 제대로 된 데이터를 가져오지 못했다.
올리브영이나 다른 사이트 정보는 정상적으로 가져왔으나 인스타그램에서만 타임아웃이 발생하면서 실패했다.
성공을 했을 때도 응답을 받기까지 꽤 오래 걸렸다.
결국 asw로 크롤링도 안정적이지 않은 상태에서 프로젝트에 도입할 수 없었고,
안정적으로 받아온다고 하더라도 타 사이트에 의존하는 방식은 좋은 방법이 아니라고 판단했다.
또한 서칭 하다 보니 인스타그램에서 허가받지 않고 크롤링하는 건 법적문제도 존재했다.
기획 단계에서 인스타를 연동시키는 아이디어는 좋았지만, 여러 방면으로 생각해 보았을 때 치명적인 단점이 있다는 것을 뒤늦게 파악했다.
그래서 프로젝트 챌린지 인증방식엔 크롤링이 아닌 자체 인증방식을 도입하기로 했다.