Web Scraping con Puppeteer: en Docker o Browserless

Introducción a la Imagen de Docker

Una imagen de Docker es un archivo utilizado para ejecutar código en un contenedor de Docker. Actúa como un conjunto de instrucciones para construir un contenedor de Docker, similar a una plantilla. En otras palabras, son equivalentes a las instantáneas en un entorno de máquina virtual.

La imagen de Docker contiene todas las bibliotecas, dependencias y archivos necesarios para ejecutar un contenedor, lo que la convierte en un archivo ejecutable independiente para el contenedor. Estas imágenes se pueden compartir y desplegar en múltiples ubicaciones, lo que las hace altamente portátiles.

¿Qué es Browserless?

Browserless de Nstbrowser es un servicio en la nube de headless Chrome que opera aplicaciones en línea y automatiza scripts sin una interfaz gráfica de usuario. Es especialmente útil para trabajos como web scraping y otras operaciones automatizadas.

¿Tienes alguna idea maravillosa o dudas sobre web scraping y Browserless?
¡Veamos qué comparten otros desarrolladores en Discord y Telegram!

¿Cuáles son los beneficios de usar Puppeteer en Docker?

Usar Puppeteer en Docker tiene al menos los siguientes 3 beneficios:

• Asegurar entornos consistentes.
• Simplificar la gestión de dependencias.
• Mejorar la escalabilidad y mejorar la seguridad.

Además, al ejecutar Puppeteer en un contenedor de Docker, puedes asegurar versiones consistentes del sistema operativo y del navegador en todos los entornos de desarrollo, prueba y producción. Esto también puede simplificar el proceso de instalación del navegador Chrome y sus dependencias, y escalar fácilmente las instancias del contenedor para manejar tareas a gran escala.

Además, los contenedores de Docker proporcionan un entorno aislado, lo que reduce los posibles riesgos de seguridad.

¿Cómo usar la imagen de Docker de Nstbrowser?

Antes de usar la imagen de Docker de Nstbrowser, necesitas hacer el siguiente trabajo preparatorio:

1. Debes tener un entorno Docker. Si aún no has instalado Docker, puedes consultar Docker Docs.
2. Necesitas una cuenta de Nstbrowser. Si aún no tienes una cuenta, puedes registrarte en el sitio web oficial de Nstbrowser.
3. Una vez que tengas una cuenta, ve a la siguiente página para obtener tu clave API.

Después de haber completado el trabajo preparatorio anterior, puedes usar el siguiente comando para obtener la imagen de Docker de Nstbrowser:

# Obtener la imagen de Browserless
docker pull nstbrowser/browserless:0.0.1-beta

# Ejecutar la imagen de Browserless
docker run -it -e TOKEN=xxx -e SERVER_PORT=8848 -p 8848:8848 --name nstbrowserless nstbrowser/browserless:0.0.1-beta

# Después de ejecutar, puedes usar el comando docker ps para verificar si el contenedor está funcionando correctamente
docker ps

Usar Puppeteer en Docker para Rastrear Sitios Web Dinámicos

Ahora, te mostraré cómo usar Puppeteer basado en la imagen de Docker de Nstbrowser para rastrear sitios web dinámicos. Y te llevaré paso a paso para completar un ejemplo simple.

Paso 1: Determinar el objetivo del rastreo

Lo primero que debemos hacer es determinar la información que queremos rastrear. En este ejemplo, elegimos rastrear todo el contenido de las etiquetas H2 de un Blog de Semrush y imprimirlo en la consola.

Paso 2: Escribir un script de Puppeteer

A continuación, necesitamos escribir un script de Puppeteer para rastrear nuestra información objetivo. Aquí puedes encontrar el código para que Puppeteer ingrese a la página objetivo y obtenga el contenido de la etiqueta H2:

const page = await browser.newPage();

// Ingresar a la página objetivo
await page.goto('https://www.semrush.com/blog/seo-best-practices/');

// Obtener el contenido de la etiqueta h2
const h2s = await page.evaluate(() => {
  const h2s = Array.from(document.querySelectorAll('h2'));
   return h2s.map(h2 => h2.textContent);
});

// Imprimir el contenido de la etiqueta h2
console.log(h2s);

Paso 3: Inicialización del proyecto

Antes de implementar este paso, ejecuta el siguiente comando para inicializar un nuevo proyecto:

cd ~
makedir puppeteer-docker
cd puppeteer-docker

¡Bien hecho! ¿Qué necesitamos hacer a continuación? Simplemente crea los siguientes 3 archivos con nuestro código:

• index.mjs

import puppeteer from 'puppeteer-core';

async function execPuppeteer(browserWSEndpoint) {
  try {
    const browser = await puppeteer.connect({
      browserWSEndpoint: browserWSEndpoint,
      defaultViewport: null,
    });
    const page = await browser.newPage();

    // Navegar a la URL objetivo
    await page.goto('https://www.semrush.com/blog/seo-best-practices/');

    // Obtener contenido de la etiqueta h2
    const h2s = await page.evaluate(() => {
      const h2s = Array.from(document.querySelectorAll('h2'));
      return h2s.map((h2) => h2.textContent);
    });

    // Imprimir contenido de la etiqueta h2
    console.log(h2s);

    // Cerrar el navegador
    await browser.close();
  } catch (err) {
    console.error('launch', err);
  }
}

async function launchAndConnectToBrowser() {
  const host = 'host.docker.internal:8848';
  const config = {
    once: true,
    headless: true, // Establecer modo sin cabeza
    autoClose: true,
    args: { '--disable-gpu': '', '--no-sandbox': '' }, // los argumentos del navegador deben ser un diccionario
    fingerprint: {
      name: '',
      platform: 'mac',
      kernel: 'chromium',
      kernelMilestone: 124,
      hardwareConcurrency: 8,
      deviceMemory: 8,
    },
  };
  const browserWSEndpoint = `ws://${host}/ws/connect?${encodeURIComponent(
    JSON.stringify(config)
  )}`;
  await execPuppeteer(browserWSEndpoint);
}

launchAndConnectToBrowser().then();

• Dockerfile

FROM node:18-alpine AS base

# Instalar dependencias solo cuando sea necesario
FROM base AS deps
RUN set -eux && sed -i 's/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g' /etc/apk/repositories
RUN apk add --no-cache libc6-compat

RUN npm config set registry https://registry.npmmirror.com/
RUN npm install -g pnpm

# Establecer directorio de trabajo
WORKDIR /app

# Copiar package.json e instalar dependencias
COPY package*.json pnpm-lock.yaml ./

RUN pnpm install

WORKDIR /app
COPY --link ./ .

FROM base AS runner

# Copiar dependencias
COPY --from=deps /app/node_modules ./node_modules

# Copiar código de la aplicación
COPY --from=deps /app .

# Comando de inicio predeterminado
CMD ["node", "index.mjs"]

• package.json

{
  "name": "docker-puppeteer",
  "version": "1.0.0",
  "main": "index.mjs",
  "dependencies": {
    "puppeteer-core": "^23.1.0"
  },
  "scripts": {
    "start": "node index.mjs"
  }
}

¡Genial! ¡Hemos creado los tres archivos que necesitamos! Solo queda una última preparación: instalar las dependencias del proyecto.

pnpm install

Paso 4: Construir y ejecutar la imagen de Docker

¿Estás listo? Finalmente, podemos construir y rastrear la imagen de Docker:

• Abre la consola
• Ve al directorio del proyecto
• Ejecuta el siguiente comando de script para construir la imagen de Docker

docker build -t puppeteer-docker.

¿Terminaste? Por favor, ejecuta el siguiente script para ejecutar nuestra imagen puppeteer-docker. Ejecutará automáticamente nuestro script de Puppeteer para realizar la operación de rastreo:

docker run --rm --network="host" puppeteer-docker

Eventualmente verás la siguiente salida. El resultado es que rastreamos todos los títulos H2 en la página del sitio web objetivo:

Optimización del rendimiento de Puppeteer en Docker

Optimizar el rendimiento de Puppeteer en un entorno Docker implica varias estrategias clave para garantizar que las tareas de automatización del navegador se ejecuten de manera eficiente.

1. Reducir el tamaño del contenedor

Elige una imagen base ligera, como node:alpine o node:slim, para reducir el tamaño de la imagen.

Elimina dependencias y archivos innecesarios, y mantén la imagen simple utilizando archivos .dockerignore e incluyendo selectivamente los archivos requeridos.

2. Habilitar el modo sin cabeza

Activa el modo sin cabeza ({ headless: true }) de Puppeteer. Esto ejecutará el navegador sin una interfaz gráfica de usuario, reduciendo el consumo de recursos y mejorando el rendimiento.

3. Asignar recursos adecuadamente

Asegúrate de que el contenedor Docker reciba suficientes recursos de CPU y memoria para completar con éxito la tarea de automatización del navegador.

Puedes usar las funciones de limitación de recursos de Docker (como --cpus y --memory) para gestionar el uso de recursos del contenedor y prevenir la contención de recursos en un entorno de múltiples contenedores.

4. Optimizar Dockerfile

Reduce el número de capas en el Dockerfile y fusiona múltiples comandos en una sola instrucción RUN para acortar el tiempo de construcción de la imagen.

Usa compilaciones de múltiples etapas para separar las dependencias entre las etapas de construcción y ejecución, y generar una imagen final más optimizada.

Mejora la eficiencia de construcción y acorta los tiempos de construcción posteriores al organizar correctamente los comandos de Dockerfile para aprovechar el caché de construcción.

5. Ajustar las opciones de inicio del navegador

Personaliza los parámetros de inicio del navegador de Puppeteer, como args, executablePath y ignoreDefaultArgs, para optimizar el comportamiento del navegador y el uso de recursos.

Ajusta las banderas de inicio de Chromium para desactivar funciones innecesarias o habilitar opciones de mejora del rendimiento, como desactivar la aceleración de GPU a través de --disable-gpu.

6. Orquestación de contenedores

Despliega aplicaciones de Puppeteer en plataformas de orquestación de contenedores como Docker Swarm o Kubernetes, y aprovecha las capacidades de expansión automática, balanceo de carga y gestión de recursos que ofrecen estas plataformas.

Logra una expansión horizontal, distribuye la carga a múltiples contenedores y mejora el rendimiento en condiciones de alto tráfico.

7. Monitoreo y ajuste del rendimiento

Utiliza las herramientas de monitoreo de Docker (como Docker Stats, Docker Events y Docker Healthchecks) para supervisar el uso de recursos del contenedor y su estado de salud.

Implementa una solución de monitoreo del rendimiento de la aplicación (APM) (como Prometheus, Grafana o Datadog) para rastrear y analizar indicadores clave de rendimiento, como el tiempo de respuesta, el rendimiento y la tasa de errores, para identificar y resolver cuellos de botella en el rendimiento.

Reflexiones finales

¡Ejecutar Puppeteer en un entorno Docker brinda más conveniencia a los desarrolladores! Proporciona una solución flexible y escalable para tareas de automatización del navegador.

En este blog, discutimos:

• El significado y la función de la imagen Docker
• Pasos específicos para rastrear páginas usando Puppeteer-Docker
• 7 consejos para asegurar que Puppeteer funcione eficientemente en Docker

Ahora comienza a usar Browserless para construir tu propia imagen Docker potente y disfruta rastreando páginas.