Einführung

Ah, ich möchte kratzen.

Also kratzte ich mit Nuxt auf Docker. Für den Knotentyp schien die Bibliothek mit dem Namen Puppenspieler zum Scraping empfohlen zu werden, daher werde ich schnell von Nuxt's Server Middleware kratzen.

Mir ist gesagt worden, dass ich die Leute nicht zu sehr stören sollte, also werde ich meine Seite kratzen. (Sie müssen sich nicht anmelden. Bitte verwenden Sie es ♪) toribure | Simple ist das beste Brustwerkzeug, das alleine oder als Team verwendet werden kann

Es ist ein wenig Werbung. Auf der oberen Seite befindet sich ein Bild eines niedlichen Vogels (Irasutoya). Dieses Mal werde ich dies durch Schaben nehmen und anzeigen.

Nuxt auf Docker vorbereiten

Ich denke, es gibt viele andere Artikel hier, also lasst uns einen Blick darauf werfen. Die Umwelt ist übrigens

$ docker -v
  Docker version 19.03.13-beta2, build ff3fbc9d55
$ docker-compose -v
  docker-compose version 1.26.2, build eefe0d31

war.

Erstelle eine Nuxt App

$ docker run --rm -it -w /app -v `pwd`:/app node yarn create nuxt-app scraping
? Project name: scraping
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: Axios
? Linting tools: 
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools:

Nur "Axios" werden später verwendet, daher werde ich sie bewusst einbeziehen.

Übrigens war zum Zeitpunkt der Artikelerstellung die Version des Bildes "node: latest" 14.9.0, die Version von "create-nuxt-app" war v3.2.0 und die Version von "nuxt" war 2.14.0.

Bereiten Sie Dockerfile docker-compose.yml vor

Von nun an ist das gerade erstellte "Scraping /" -Verzeichnis Ihr Arbeitsverzeichnis.

$ cd scraping

`Dockerfile`


FROM node

ENV HOME=/app     \
    LANG=C.UTF-8  \
    TZ=Asia/Tokyo \
    HOST=0.0.0.0

WORKDIR ${HOME}

RUN apt-get update \
    && apt-get install -y wget gnupg \
    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
    && apt-get update \
    && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf libxss1 \
      --no-install-recommends \
    && rm -rf /var/lib/apt/lists/*

COPY package.json ${HOME}
COPY yarn.lock ${HOME}
RUN yarn install

COPY . ${HOME}
EXPOSE 3000
CMD ["yarn", "run", "dev"]

Weitere Informationen zu RUN apt-get ... finden Sie unter Fehlerbehebung bei Puppenspielern. es gibt. Dies bedeutet, dass ein Fehler auftritt, wenn der Browser und die Schriftart nicht im Container vorbereitet sind.

`docker-compose.yml`


version: "3"

services:
  nuxt:
    build: .
    volumes:
      - .:/app
    ports:
      - 3000:3000

Sobald Sie dies getan haben, erstellen Sie den Container einmal.

$ docker-compose build

Ich werde eine Scraping-App machen

Puppenspieler vorgestellt

Ich werde es in Garn legen.

$ docker-compose run --rm nuxt yarn add puppeteer

Erstellen Sie eine API

Wir werden [serverMiddleware] verwenden (https://ja.nuxtjs.org/api/configuration-servermiddleware/). Wir werden ServerMiddleware als API durchsuchen, indem wir auf Express-Vorlage verweisen, das ebenfalls offiziell eingeführt wurde.

`js:nuxt.config.js`


export default {
  ...
  ,
  serverMiddleware: {
    '/api': '~/api'
  }
}

Dies leitet den Zugriff von / api auf ~ / api / index.js. Also werde ich eine Datei machen.

$ mkdir api
$ touch api/index.js api/scraping.js

Ich habe zwei Dateien erstellt, aber "index.js" ist der Empfänger und ich werde "Scraping.js" die eigentliche Verarbeitung überlassen.

`api/index.js`


const app = require('express')()
const scraping = require('./scraping')

app.get('/get_image', async(req, res) => {
  const image = await scraping.getImage()
  res.send(image)
})

module.exports = {
  path: '/api',
  handler: app
}

Dies dient zum Aufrufen der Methode "get_image ()" von "Scraping.js", wenn auf "/ api / get_image" zugegriffen wird.

`api/scraping.js`


const puppeteer = require('puppeteer')

async function getImage() {
  const browser = await puppeteer.launch({
    args: [
      '--no-sandbox',
      '--disable-dev-shm-usage'
    ]
  })
  const page = await browser.newPage()
  await page.goto("https://toribure.herokuapp.com/")
  const image = await page.evaluate(() => {
    return document.getElementsByTagName("main")[0].getElementsByTagName("img")[0].src
  })
  return image
}

module.exports = {
  getImage
}

Es folgt fast Puppenspieler offizielle README. Sie können Elemente mit "page.evaluate" abrufen und bearbeiten. Wie Sie dem Entwicklertool usw. der HTML-Struktur dieses Scraping-Ziels (https://toribure.herokuapp.com/) entnehmen können, gibt es insgesamt nur eine Dies ist ein Bild eines Vogels, dessen Ziel das "img" -Element ist, das nur eines unter dem Hauptelement hat. (Es hat eine schmutzige Struktur, aber es ist süß) Sobald Sie das wissen, müssen Sie nur noch die Elemente wie normale js abrufen.

Dies ist das Ende der Codierung auf der API-Seite.

Die Front ist erfrischend

Ich werde müde. Wenn ich also den Knopf auf der Vorderseite drücke, wird das Bild angezeigt.

`pages/index.vue`


<template>
  <div>
    <button @click="showBird">Scraping!!</button>
    <br>
    <img v-if="src" :src="src">
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: ""
    }
  },
  methods: {
    async showBird() {
      this.src = await this.$axios.$get("/api/get_image")
    }
  }
}
</script>

**Komplett! !! ** ** **

Funktionsprüfung

Ein süßer Vogel kam heraus ♪

schließlich

Wenn Sie dies bisher tun können, ist der Rest die Welt der DOM-Manipulation. Wenn Sie also die Struktur der Zielseite verstehen und js schreiben, können Sie alles kratzen. Einige Websites verbieten das Schaben, daher wäre es großartig, wenn wir verschiedene Ideen verwirklichen könnten, während wir auf diesen Punkt achten!

Referenz

[Nuxt] Scraping mit Puppenspieler - Von der Datenerfassung bis zur Anzeige (serverMiddleware) --7839
[[Prozedurerklärung] Einfaches Scraping mit Java Scipt! - Machen Sie einen Screenshot mit Puppenspieler ｜ ProgLearn --ProgLearn - Programm für umfassende Programmierinformationen](https://blog.proglearn.com/2019/06/20/javascipt%E3%81%A7%E7%B0%A1%E5 % 8D% 98% E3% 82% B9% E3% 82% AF% E3% 83% AC% E3% 82% A4% E3% 83% 94% E3% 83% B3% E3% 82% B0% EF% BC % 81-Puppenspieler% E3% 81% A7% E3% 82% B9% E3% 82% AF% E3% 83% AA% E3% 83% BC% E3% 83% B3% E3% 82% B7% E3% 83 % A7 /)
Scraping with Puppeteer | grgr-dkrks Blog -Ich habe versucht, mit [Docker + Docker-Compose + Puppenspieler - Qiita] zu kratzen (https://qiita.com/takayuki-miura0203/items/4fa4cdc9ef0c07a857a9)
Datenerfassung durch Axios mit Nuxt.js - Qiita

[JAVA] Schaben mit Puppenspieler in Nuxt auf Docker.