introduction

Ah, je veux gratter.

Donc je racle avec Nuxt sur Docker. Pour le type de nœud, la bibliothèque appelée puppeteer semblait être recommandée pour le scraping, donc je vais rapidement gratter le middleware du serveur de Nuxt.

J'ai grandi en me disant que je ne devrais pas trop déranger les gens, alors je vais faire du scraping sur mon site. (Vous n'avez pas besoin de vous connecter. Veuillez l'utiliser ♪) toribure | Simple est le meilleur outil mammaire qui peut être utilisé seul ou en équipe

C'est un peu de publicité. Il y a une image d'un oiseau mignon (Irasutoya) sur la page supérieure. Cette fois, je vais prendre ceci en grattant et l'afficher.

Préparation de Nuxt sur Docker

Je pense qu'il y a beaucoup d'autres articles ici, alors jetons un coup d'œil. Au fait, l'environnement est

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

était.

Créer une application Nuxt

$ 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:

Seul axios sera utilisé plus tard, je vais donc l'inclure consciemment.

À propos, au moment de la création de l'article, la version de l'image node: latest était 14.9.0, la version de create-nuxt-app était v3.2.0 et la version de nuxt était 2.14.0.

Préparer Dockerfile, docker-compose.yml

A partir de là, le répertoire scraping / que vous venez de créer est votre répertoire de travail.

$ 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"]

Pour plus d'informations sur RUN apt-get ..., voir Dépannage de puppeteer. il y a. Cela signifie qu'une erreur se produira si le navigateur et la police ne sont pas préparés dans le conteneur.

`docker-compose.yml`


version: "3"

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

Une fois que vous avez fait cela, créez le conteneur une fois.

$ docker-compose build

Je vais créer une application de scraping

Marionnettiste présenté

Je vais le mettre en fil.

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

Créer une API

Nous utiliserons serverMiddleware. Nous allons parcourir serverMiddleware en tant qu'API en faisant référence à express-template qui est également officiellement introduit.

`js:nuxt.config.js`


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

Cela dirigera l'accès / api vers ~ / api / index.js. Alors je vais faire un fichier.

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

J'ai créé deux fichiers, mais index.js est le récepteur et je vais laisser scraping.js faire le traitement proprement dit.

`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
}

Il s'agit d'appeler la méthode get_image () de scraping.js lorsque / api / get_image est accédé.

`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
}

Il suit presque README officiel du marionnettiste. Vous pouvez obtenir et manipuler des éléments en utilisant page.evaluate. Comme vous pouvez le voir sur l'outil de développement, etc. de la structure HTML de cette destination de scraping (https://toribure.herokuapp.com/), il n'y en a qu'une au totalCeci est une image d'un oiseau dont la cible est l'élémentimg, qui n'en a qu'un sous l'élément principal. (Il a une structure sale, mais c'est mignon) Une fois que vous savez cela, tout ce que vous avez à faire est d'obtenir les éléments comme des js normaux.

C'est la fin du codage côté API.

Le devant est rafraîchissant

Je commence à me fatiguer, donc lorsque j'appuie sur le bouton en façade, l'image s'affiche.

`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>

**Achevée! !! ** **

Contrôle de fonctionnement

Un oiseau mignon est sorti ♪

enfin

Si vous pouvez le faire jusqu'à présent, le reste est le monde de la manipulation DOM, donc si vous comprenez la structure de la page cible et écrivez js, vous pouvez tout gratter. Certains sites interdisent le grattage, donc ce serait formidable si nous pouvions réaliser diverses idées tout en faisant attention à ce point!

référence

[Nuxt] Scraping with Puppeteer-From Data Acquisition to Display (serverMiddleware) --7839
[[Explication de la procédure] Grattage facile avec Java Scipt! - Faites une capture d'écran avec Puppeteer ｜ ProgLearn --ProgLearn --Proglearn, un site d'information complet sur la programmation % 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 marionnettistes% 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 | Le blog de grgr-dkrk -J'ai essayé de gratter avec Docker + docker-compose + puppeteer --Qiita
Acquisition de données par Axios avec Nuxt.js --Qiita

[JAVA] Grattage avec marionnettiste à Nuxt sur Docker.