전제 조건: Javascript에 대해 약간 알고 있어야 합니다.

오늘의 주제는 정적 웹 사이트에서 데이터를 추출한 다음 이 데이터를 데이터베이스나 컴퓨터의 파일 또는 완전히 다른 것으로 구조화하는 것입니다.

Fetch 크롤러(Node JS) 소개

Fetch Crawler는 웹 사이트 크롤링을 위한 기본적이고 유연하며 강력한 API를 제공하도록 설계되었습니다.

크롤러는 다음 기능을 사용하여 정적 웹 사이트를 크롤링하는 간단한 API를 제공합니다.

분산 크롤링

병렬, 재시도, 최대 요청, 요청 간 시간 구성(웹 사이트에서 차단되지 않도록)...

depth-first search 및 breadth-first search 알고리즘 모두 지원

최대 요청 수가 실행된 후 중지

스크래핑을 위해 자동으로 Cheerio 삽입

[약속] 지원

전체 문서는 Github에서 사용할 수 있습니다. https://github.com/viclafouch/Fetch-Crawler

Fetch-crawler의 특징은 상당한 시간 절약을 허용하는 요청을 병렬로 관리한다는 것입니다(예: 동시에 10개의 요청, 하나씩이 아님).

즉, 이 라이브러리가 모든 작업을 수행하므로 다양한 옵션을 구성하기만 하면 됩니다.

단계별:

먼저 필요한 종속성을 설치합니다.

# npm i @viclafouch/fetch-crawler

그런 다음 js 파일에서 모듈을 가져오고 launch의 FetchCrawler 방법을 사용하십시오. 필요한 유일한 매개변수는 귀하의 웹사이트(또는 페이지) 링크(여기https://github.com)입니다.

const FetchCrawler = require('@viclafouch/fetch-crawler')

FetchCrawler.launch({
  url: 'https://github.com'
})

그런 다음 다음을 실행합니다.

# node example-crawl.js 

Node JS로 이 파일을 실행하면 작동하지만 크롤러가 완료될 때까지 아무 일도 일어나지 않습니다.

이제 웹 사이트( documentation )에서 데이터를 추출하는 데 사용할 기본 옵션 및 방법으로 이동하겠습니다.

const FetchCrawler = require('@viclafouch/fetch-crawler')

// `$ = Cheerio to get the content of the page
// See https://cheerio.js.org
const collectContent = $ =>
  $('body')
    .find('h1')
    .text()
    .trim()

// After getting content of the page, do what you want :)
// Accept async function
const doSomethingWith = (content, url) => console.log(`Here the title '${content}' from ${url}`)

// Here I start my crawler
// You can await for it if you want
FetchCrawler.launch({
  url: 'https://github.com',
  evaluatePage: $ => collectContent($),
  onSuccess: ({ result, url }) => doSomethingWith(result, url),
  onError: ({ error, url }) => console.log('Whouaa something wrong happened :('),
  maxRequest: 20
})

자, 위에 포함된 새로운 방법과 옵션을 검토해 봅시다.
evaluatePage : 페이지의 콘텐츠를 탐색/조작하는 기능입니다. Cheerio는 마크업을 구문 분석하기 위해 제공되며 이를 위한 강력한 API를 제공합니다. 이를 통해 웹 페이지에서 원하는 정확한 데이터 조각을 추출하는 특수 기능을 구축할 수 있습니다.
onSuccess : evaluatePage가 성공하면 어떻게 하시겠습니까? 원하는 대로 하십시오(데이터베이스에 추가? 파일에 데이터 포함? 등..).
onError : if evaluatePage라는 콜백이 실패합니다.
maxRequest : 크롤러가 실행할 수 있는 최대 요청 수를 나타냅니다. 제한을 비활성화하려면 전달-1합니다. 그러나 위의 예에서는 20번의 요청 후에 크롤러를 중지하려고 합니다(실패하더라도).

나머지 구성의 경우 여기에서 documentation을 찾을 수 있습니다.

실습 예:

비디오 게임 웹사이트의 예를 들어 보겠습니다. Instant Gaming

우리의 목표: 웹 사이트에서 판매 중인 비디오 게임(Xbox)에서 데이터를 복구하고 JSON 파일로 컴파일합니다. 그런 다음 프로젝트에서 재사용할 수 있습니다(예: 이 목록을 실시간으로 표시할 수 있는 Chrome 확장 프로그램).

이것이 우리 파일example-crawl.js에 포함된 것입니다.

const fs = require('fs')
const FetchCrawler = require('@viclafouch/fetch-crawler')

// Get all games on xbox platform
const urlToCrawl = 'https://www.instant-gaming.com/en/search/?type%5B0%5D=xbox'
let games = []

// I'm getting an array of each game on the page (name, price, cover, discount)
const collectContent = $ => {
  const content = []
  $('.item.mainshadow').each(function(i, elem) {
    content.push({
      name: $(this)
        .find($('.name'))
        .text()
        .trim(),
      price: $(this)
        .find($('.price'))
        .text()
        .trim(),
      discount: $(this)
        .find($('.discount'))
        .text()
        .trim(),
      cover: $(this)
        .find($('.picture'))
        .attr('src')
    })
  })
  return content
}

// Only url including an exact string
const checkUrl = url => {
  try {
    const link = new URL(url)
    if (link.searchParams.get('type[0]') === 'xbox' && link.searchParams.get('page')) {
      return url
    }
    return false
  } catch (error) {
    return false
  }
}

// Concat my new games to my array
const doSomethingWith = content => (games = games.concat(content))

// Await for the crawler, and then save result in a JSON file
;(async () => {
  try {
    await FetchCrawler.launch({
      url: urlToCrawl,
      evaluatePage: $ => collectContent($),
      onSuccess: ({ result, url }) => doSomethingWith(result, url),
      preRequest: url => checkUrl(url),
      maxDepth: 4,
      parallel: 6
    })
    const jsonResult = JSON.stringify({ ...games }, null, 2)
    await fs.promises.writeFile('examples/example_4.json', jsonResult)
  } catch (error) {
    console.error(error)
  }
})()

이제 크롤러를 시작하고 몇 초만 기다리면 됩니다.

# node example-crawl.js 

다음은 JSON 파일입니다. https://github.com/viclafouch/Fetch-Crawler/blob/master/examples/example_4.json

보시다시피 json 파일에서 매우 깨끗한 데이터를 얻습니다. 분명히 웹 사이트의 데이터는 곧 변경될 것이므로 24시간마다 크롤러를 반복할 수 있습니다.

Fetch Crawler 패키지에 대해 자세히 알아보려면 documentation 을 확인하십시오.

...

읽어 주셔서 감사합니다.

이 패키지에 저와 함께 기여해 주세요 :)
Google 프로젝트에 필요했고 데이터 추출이 꽤 어려웠기 때문에 이 패키지를 만들었습니다.