구글 검색엔진 API, Node js, Vue js를 사용하여 이미지 크롤링하기 - 2

프론트에 Vuejs를 사용해 사용자가 키워드를 넣어 크롤링 할수 있게 구현해보려고 한다.

이미 Vuejs 기본셋팅하는 방법을 포스팅한 적이 있다.

https://shlee0882.tistory.com/282?category=903333

해당 포스팅을 참고하여  Vuejs 프로젝트 생성하고 온다.

검색 엔진 ID와 API_KEY를 gitignore에 추가하기 위해 따로 API_DATA.js 파일을 뺐다.

Home.vue에는 구글키워드 이미지 크롤링 텍스트와 ImageList 컴포넌트를 갖고 있다.

사용한 오픈소스는

파싱을 위한 url, js를 쉽게 쓸수 있게 도와주는 jquery, 이미지 get을 위한 axios

zip파일 생성 및 체크를 위한 JSZip, JSZipUtils 을 사용했다.

구글이미지를 크롤링하는 js코드가 구현되어 있고 크롤링 진행상황에 대한 progress bar가 추가 되었다.

또한 수집된 url이 리스트형태로 텍스트 출력되는 것과 zip파일로 사용자에게 다운을 제공한다.

그 전 포스팅과 달라진 점은 fs을 사용하지 않는다는 것이다.

프론트에서는 fs를 사용할 수 없어 이미지 api로 json 데이터로 response 받으면

이미지 url을 axios request하여 이미지 데이터를 blob 구조로 받아와 이미지 리스트를 만들고

이미지 리스트를 zip파일로 묶어서 사용자에게 반환한다.

효율적인 크롤링과 acess-control-allow-origin 문제 해결을 위해 

크롬 extention에서 간단한 플러그인을 설치해준다.

https://github.com/shlee0882/vuejs-nodejs-google-image-crawling

배포된 url로 들어가 테스트 해본다.

크롤링이 잘되어 zip파일로 이미지를 다운받아지는 것을 확인 할 수 있다.

마지막으로 해당 소스의 배포된 url과 github repository를 올린다.

클라이언트

https://github.com/shlee0882/vuejs-nodejs-google-image-crawling

https://shlee0882.github.io/vuejs-nodejs-google-image-crawling/#/

서버쪽 

https://github.com/shlee0882/node-crawling-google-image