Puppeter를 사용하여 Nuxtjs를 사용하여 웹 페이지 캡처

Web Scraping with Nuxtjs using Puppeteer는 Nuxtjs를 정확하게 사용할 수 있도록 Pupper를 설정하고 설정하는 방법과 작업 목록 사이트를 캡처하는 방법display them on your website을 보여 주기 위한 것이다.
Puppeter는 서버 단말기 패키지이기 때문에 Vue와 같은 클라이언트 라이브러리와 함께 정상적으로 작동하도록 설정하기 어렵다.어떻게 정확하게 설정하는지에 관하여 인터넷에는 많은 강좌가 없다.
이 문서는 고객 프로젝트의 문제를 해결하기 위해 Nuxt를 사용하는 방법을 보여 주는 데 목적을 두고 있다.js와 인형 배우.

스크레이퍼 베이스

인터넷 폐기는 처음에는 이상하게 들리지만, 이것은 매우 간단한 용어이다.
웹 스크립트는 웹 사이트에서 데이터를 추출하고 필요한 형식으로 저장하여 더 나은 처리를 위한 기술이다.
웹 폐기는 웹 사이트에서 정보를 추출하고 이를 전자적으로 저장해 더 나은 처리를 위한 수동 과정을 자동화한다.

사용법

전자상거래 사이트의 제품 상세 정보를 추출한다. 예를 들어 가격, 제품 이름, 사진 등

인터넷 캡처는 연구에서 매우 유용하다. 왜냐하면 여러 사이트에서 구조화된 데이터를 수집하는 데 도움을 줄 수 있기 때문이다.

서로 다른 출처에서 데이터를 수집하여 분석하면 웹 폐기를 통해 자동화를 쉽게 실현할 수 있다.

기계 학습 모형을 테스트하고 훈련하는 데이터를 수집할 수 있다.

웹 페이지 캡처 방법

웹 캡처 소프트웨어: 이것은 가장 유행하는 웹 캡처 방식인데 그 중에서 미리 제작한 소프트웨어는 웹 캡처에 사용된다.

코드 작성: 소유자의 입력에 따라 개발자를 고용하여 특정 사이트를 긁어내는 방법이다.

인형 배우 소개

퍼퍼터는 웹 페이지를 캡처하고 폼을 자동으로 제출하는 데 사용되는 노드 라이브러리다.
Google Chrome의 인스턴스를 노드에서 제어하는 Google의 공식 노드 라이브러리입니다.js, 또한 헤더 모드에서 실행하고 백엔드에서 실행할 수 있도록 설정할 수 있습니다.
Puppeter는 몇 가지 용례에 사용할 수 있지만, 다음은 몇 개만 열거합니다.

웹 페이지 캡처.

추적 페이지 로드 성능.

양식을 자동으로 제출합니다.

페이지 캡처 생성

웹 페이지를 생성하는 PDF

자동화 테스트에 유용합니다.

브라우저 자동화 수행

미리 보기를 위해 한 페이지의 응용 프로그램을 보여주는 서버에 사용됩니다.

등

Puppeter를 사용하여 Nuxtjs로 JobScarner 응용 프로그램 구축

새 Nuxt 항목 만들기

웹 Scraster를 개발하기 전에, Nuxtjs를 설치하고 설정해야 합니다. official documentation 의 간단한 절차를 따라 이 과정을 가속화할 수 있습니다.
다음 명령을 입력하여 항목을 설정하고 기본 설정 규칙을 수락합니다.

yarn create nuxt-app <project-name>

설치가 완료되면 프로젝트에 필요한 다른 구성 요소, 저장, 페이지를 먼저 만듭니다.
삭제된 모든 작업의 목록을 표시하기 위해 '작업' 이라는 구성 요소를 만듭니다.

cd components 

touch Jobs.vue

다음은 작업 상태를 관리하기 위해 저장 폴더에 새 작업 저장소를 만듭니다.

cd store 

touch job.js

마지막으로 필요하면 페이지 폴더에jobs 페이지를 만들어서 내비게이션에 사용합니다.

cd pages touch jobs.vue

물론, 이것은 제한된 것입니다. 프로젝트가 복잡할 수도 있고, 대량의 구성 요소, 페이지, 저장소를 포함하여 서로 다른 상태를 관리할 수 있기 때문입니다.

종속 항목을 설치합니다.

다음은nuxtjs와 Puppeter를 사용하여 페이지를 긁는 데 필요한 모든 의존 항목을 설치합니다.

npm i puppeteer net tls

Puppeter 라이브러리 및 기타 지원 라이브러리를 설치하려면 명령을 실행합니다.

꼭두각시 인형

이것은 어려운 부분입니다. 제가 인형사를 설정해서nuxtjs를 사용할 때 다른 문제에 부딪혔습니다. 왜냐하면 nuxtjs는 클라이언트 프레임워크이자 서버 쪽 프레임워크이기 때문입니다.
Pupper는 서버 노드 라이브러리이기 때문에nuxtjs의 서버에서만 작업하기 때문에 Pupper를 어디에 두거나 서버에서 어떻게 호출하는지 알기 어렵다.
나는 내가 그것을 어떻게 내 프로젝트에서 작용하게 했는지 계속 설명할 것이다.
우선, 새 스크립트를 만듭니다.js 파일을 다음 코드에 붙여넣습니다.

const saveFile = require('fs').writeFileSync 

const pkgJsonPath = require.main.paths[0] + '/puppeteer' + '/package.json' 

// console.log(pkgJsonPath) 
const json = require(pkgJsonPath) 

// eslint-disable-next-line no-prototype-builtins 
if (!json.hasOwnProperty('browser')) { json.browser = {} } 

delete json.browser.ws 

saveFile(pkgJsonPath, JSON.stringify(json, null, 2))

대본을 보면 그 작용을 알 수 있을 거야. 그렇지 않으면 내가 설명할게.
노드 모듈/인형사/가방에 들어갑니다.json 파일을 만들고 특정 줄을 삭제합니다.
이 줄을 삭제하기 전에 가방이 정확한지 확인합니다.json은 브라우저 대상을 가지고 있습니다. 새 대상을 만들지 않으면 브라우저 대상의 ws 속성을 계속 삭제하고 파일을 저장합니다.
스크립트는 npm 설치를 실행할 때마다 실행됩니다.
ws는 프로젝트에 존재하지 않는 웹 플러그인으로 설정된 Puppeter의 웹 플러그인입니다.
이 행을 삭제할 때마다 npm install Pupper가 실행되고 Pupper는 기본적으로 node modules 폴더의 웹 소켓을 사용합니다.
이제 가방에 스크립트를 추가합니다.설치 후 스크립트로 실행할 json 파일입니다.
너의 소포를 열어라.json 파일과 다음 코드를 추가합니다.

....... 

"scripts": { 
     "dev": "nuxt", 
     "build": "nuxt build", 
     "start": "nuxt start", 
     "export": "nuxt export", 
     "serve": "nuxt serve", 
     "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
     "lint": "yarn lint:js", "test": "jest", 
     "postinstall": "node script" 
}, 

....

가방에 다음 코드를 추가해야 합니다.json 파일.

....... 

"browser": { 
   "fs": false, 
   "path": false, 
   "os": false, 
   "tls": false 
} 

.......

이것은 서버 쪽에서만 필요하기 때문에 fs, path,os,tls를false로 설정할 수 있습니다.
지금 가장 어려운 부분은 끝났습니다. 인형사를 정확하게 처리하기 위해 Webpack을 설정합니다.
너의nuxt를 열어라.배치하다.js 파일,build 대상에 다음 줄을 추가합니다.

build: {     
 extend(config, { isServer, isClient }) {       
   config.externals = config.externals || {}       
   **if** (!isServer) {         
    config.node = {           
    fs: 'empty',         
   }         
   **if** (Array.isArray(config.externals)) {
    config.externals.push({             
      puppeteer: require('puppeteer'),           
    }) } 
   **else** {           
    config.externals.puppeteer = require('puppeteer')         
   }       
 }       
 config.output.globalObject = 'this'       
 **return** config     
 },   
},

이 설정은 Pupper만 필요합니다. Nuxtjs가 클라이언트에 있고 fs가 비어 있을 때만 externals 그룹에 추가할 수 있습니다.
만약 네가 모든 것을 잘했다면, 너의 인형사는 Nuxtjs를 사용하여 페이지를 긁을 준비를 해야 한다. 만약 네가 끊겼다면, 너는 할 수 있다. grab the repository here
이제 우리는 간단한 부분으로 들어갈 수 있다.

휴지

Jobscarser라는 파일을 만듭니다.js를 다음 코드에 붙여 넣으십시오.
내 프로젝트에서, 나는 어떤 삭제 규칙도 위반하지 않도록 삭제해야 할 사이트 목록을 얻었다.🙂

const puppeteer = require('puppeteer') 
const jobUrl = // SITE URL HERE let page let browser 
let cardArr = [] 
class Jobs { 

   // We will add 3 methods here 
   // Initializes and create puppeteer instance 
   static async init(){} 

   // Visits the page, retrieves the job 
   static async resolver() {} 

   // Converts the job to array 
   static async getJobs() {} 
} 
export default Jobs

Init 메서드 작성

static async init() { 
  browser = await puppeteer.launch({ 
    // headless: false, 
    args: [ 
      '--no-sandbox', 
      '--disable-setuid-sandbox', 
      '--disable-dev-shm-usage', 
      '--disable-accelerated-2d-canvas', 
      '--no-first-run', '--no-zygote', 
      '--single-process', // <- this one doesn't works in Window         
      '--disable-gpu', 
    ], 
}) 

 page = await browser.newPage() 
 await Promise.race([ 
   await page.goto(jobUrl, { waitUntil: 'networkidle2' }).catch(() => {}), 

  await page.waitForSelector('.search-card').catch(() => {}), 

 ]) 

}

init 함수는 여러 구성을 사용하여 Puppeter를 초기화하고 브라우저를 사용하여 새 페이지를 만듭니다.wait 페이지를 통해 URL에 액세스할 수 있는 newPage().뒷덩굴,wait 페이지를 사용하여 페이지가 불러오기를 기다립니다.waitForSelector(…)

파서 방법을 만듭니다.

// Visits the page, retrieves the job

static async resolver() {

    await this.init()

    const jobURLs = await page.evaluate(() => {

        const cards = document.querySelectorAll('.search-card')

        cardArr = Array.from(cards)

        const cardLinks = []

        cardArr.map((card) => {

            const cardTitle = card.querySelector('.card-title-link')

            const cardDesc = card.querySelector('.card-description')

            const cardCompany = card.querySelector('a[data-cy="search-result-company-name"]')

            const cardDate = card.querySelector('.posted-date')

           const { text } = cardTitle

           const { host } = cardTitle

           const { protocol } = cardTitle

           const pathName = cardTitle.pathname

           const query = cardTitle.search

           const titleURL = protocol + '//' + host + pathName + query

           const company = cardCompany.textContent

           cardLinks.push({

                 titleText: text,

                 titleURLHost: host,

                 titleURLPathname: pathName,

                 titleURLSearchQuery: query,

                 titleURL: titleURL,

                 titleDesc: cardDesc.innerHTML,

                 titleCompany: company,

                 titleDate: cardDate.textContent,

           })

       })

      return cardLinks

   })

   return jobURLs

}

이런 방법은 모든 문제를 해결할 수 있다.
우선, 열거된 모든 작업을 선택하여 자바스크립트 그룹으로 변환하고, 필요한 데이터를 검색할 때 모든 작업을 반복합니다.

getJobs 만들기 방법

static async getJobs() { 
    const jobs = await this.resolve() 
    await browser.close() 
    const data = {} 
    data.jobs = jobs 
    data.total_jobs = jobs.length 
    return data 
}

이 방법은 해상도 방법에서 작업 그룹을 되돌려주고 브라우저를 닫는 것입니다.

Vuex 작업 작성

다음에 getJobs 작업을 보내고 state에 저장할 때마다 작업을 검색할 수 있도록 Vuex 저장소를 설정합니다.
작업 파일을 열고 다음 코드를 추가합니다.

import JobScrapper from '~/JobScrapper' 

// Action 
async getJobs({ commit }) { 
    const data = await JobScrapper.getJobs(); 
    if (data.total_jobs) { 
        commit('STORE_JOBS', data) 
        return data.jobs 
    } 
} 

// Mutation 
STORE_JOBS(state, payload) { 
    state.jobs = payload.jobs 
    state.total_jobs = payload.total_jobs 
}, 

// Getter 
export const getters = { 
    getJobs: (state) => () => { 
        return state.jobs 
    }, 
} 

// State 
export const state = () => ({ 
   jobs: [], 
   total_jobs: 0, 
})

전시 작업

페이지/작업을 엽니다.vu 파일과 다음 코드를 추가합니다.

<template> 
    <div class="row mt-5"> 
        <div class="card-group"> 
            <div class="row"> 
                <div class="col-md-8"> 
                    <Job v-for="(job, i) in jobs" :key="i" :job="job" /> 
              </div> 
           </div> 
      </div> 
   </div> 
</template> 

<script> 
export default { 
    async asyncData({ store }) { 
        const getJobs = store.getters['job/getJobs'] 
        let jobs = getJobs() 
        if (!jobs.length) { 
            jobs = await store.dispatch('job/getJobs') 
        } 
     return { jobs } 
    } 
} 

</script>

이것은 모든 페이지에서 작업을 할당하는 방법일 뿐이지만, 서버에서 호출되기 때문에 asyncData () 갈고리에 있어야 합니다.
다른 방법이나 가장 좋은 방법은nuxtServerInit action에서 작업을 할당하는 것입니다. 새 페이지가 불러올 때마다 작업을 할당합니다.
내가 어떻게 하는지 가르쳐줄게.
색인을 만듭니다.js 파일을 만들고 다음 코드를 추가합니다.

async nuxtServerInit({ dispatch }) { 
    try { 
        await dispatch('job/getJobs') 
    } catch (error) {} 
},

이것은 작업을 제거하고 상태로 저장한 다음 사용할 수 있습니다.지도 상태 또는...MapGetter는 작업을 읽어들이고 어셈블리에 표시합니다.
내 프로젝트에서, 나는 nuxtServerInit 방법과... 을 사용한다.mapState는 모든 구성 요소에서 작업을 표시하고 싶습니다.

작업 구성 부분

<template> 
    <section> 
         ........ 
         <div class="row mb-1 mt-5" v-if="jobs.length !== 0"> 
             <div v-for="job in jobs" :key="job.id" class="col-md-6 col-sm-12 mb-4" > 

                // My JOB component to display a specific job 
                <Job :job="job" /> 
             </div> 
         </div> 
        <div v-else class="row mb-1 mt-5">No Jobs at this time</div>
        .......... 
  </section> 

</template> 
<script> 
import { mapState } from 'vuex' 

export default { 
   computed: { 
       ...mapState({ jobs: (state) => { 
            return [...state.job.jobs].slice(0, 10) 
       }, '
    }), 
 }, 
} 
</script> 

<style></style>

그게 다야.
네가 나의 업무 부분을 보고 싶은 것 외에 clone the repository here 모든 것을 거기에서 찾을 수 있다.
P:S
Puppeter의 Nuxtjs를 사용하여 웹 페이지를 캡처하는 이런 방법은 많은 변통 방법이 있는데, 초보자에게는 이해하기 어려울 수도 있다. 비록 정상적으로 작동하지만, 나는 내 프로젝트에서 그것을 사용한 적이 있기 때문이다.
나는 더 좋은 방법으로 공부할 수 있다handle web scraping with Nuxtjs using Node/express and puppeteer. 나도 이 글을 쓸 것이다.
우리의 시사 통신에 가입해서 하락할 때 영원히 어떤 것도 놓치지 않도록 하자.

도구책

https://www.webharvy.com/articles/what-is-web-scraping.html

https://masteringjs.io/tutorials/fundamentals/puppeteer

결론:

오늘의 성과를 축하합니다. 지금까지, 당신은 Nuxt에서 Puppeter를 사용하여 네트워크 폐기를 하는 것에 대해 깊이 있게 알고 있을 것입니다.js.
Jobscarser 프로젝트를 만들고 완성해야 합니다.
계속 인코딩🙂
애초 2020년 11월 17일https://masteringbackend.com에 발표됐다.