Créer un scraper Web Puppeteer avec Docker sur la plateforme d’application DigitalOcean

Tutoriels
Docker

En tant qu’enthousiaste de l’ultra marathon, je fais souvent face à un défi commun : comment estimer mon temps d’arrivée pour des courses plus longues que je n’ai pas encore tentées ? En discutant de cela avec mon entraîneur, il a suggéré une approche pratique : regarder les coureurs qui ont complété à la fois une course que j’ai faite et la course que je cible. Cette corrélation pourrait fournir des informations précieuses sur les temps d’arrivée potentiels. Mais rechercher manuellement les résultats des courses serait extrêmement chronophage.

Cela m’a conduit à créer Race Time Insights, un outil qui compare automatiquement les résultats des courses en trouvant des athlètes ayant complété les deux événements. L’application extrait les résultats des courses de plateformes comme UltraSignup et Pacific Multisports, permettant aux coureurs d’entrer deux URL de courses et de voir comment d’autres athlètes ont performé lors des deux événements.

La création de cet outil m’a montré à quel point la plateforme d’applications de DigitalOcean pouvait être puissante. En utilisant Puppeteer avec Chrome sans tête dans des conteneurs Docker, je pouvais me concentrer sur la résolution du problème pour les coureurs tandis que la plateforme d’applications gérait toute la complexité de l’infrastructure. Le résultat était une solution robuste et évolutive qui aide la communauté des coureurs à prendre des décisions basées sur les données concernant leurs objectifs de course.

Après avoir construit Race Time Insights, je voulais créer un guide montrant à d’autres développeurs comment tirer parti de ces mêmes technologies : Puppeteer, conteneurs Docker et la plateforme d’applications de DigitalOcean. Bien sûr, lorsque vous travaillez avec des données externes, vous devez être conscient de choses comme la limitation du taux et les conditions de service.

Entrez dans le Projet Gutenberg. Avec sa vaste collection de livres du domaine public et ses conditions d’utilisation claires, il constitue un candidat idéal pour démontrer ces technologies. Dans ce post, nous allons explorer comment créer une application de recherche de livres en utilisant Puppeteer dans un conteneur Docker, déployé sur App Platform, tout en suivant les meilleures pratiques pour l’accès aux données externes.

J’ai construit et partagé une application web qui extrait de manière responsable des informations sur les livres du Projet Gutenberg. L’application, que vous pouvez trouver dans ce dépôt GitHub, permet aux utilisateurs de rechercher parmi des milliers de livres du domaine public, de consulter des informations détaillées sur chaque livre et d’accéder à divers formats de téléchargement. Ce qui rend cela particulièrement intéressant, c’est la manière dont cela démontre des pratiques de scraping web responsables tout en apportant une réelle valeur aux utilisateurs.

Être un bon citoyen numérique

Lors de la création d’un scraper web, il est crucial de suivre de bonnes pratiques et de respecter à la fois les limites techniques et légales. Le Projet Gutenberg est un excellent exemple pour apprendre ces principes car :

  1. Il a des conditions d’utilisation claires
  2. Il fournit des directives robots.txt
  3. Son contenu est explicitement dans le domaine public
  4. Il bénéficie d’une accessibilité accrue à ses ressources

Notre mise en œuvre inclut plusieurs meilleures pratiques :

Limitation de taux

À des fins de démonstration, nous mettons en œuvre un simple limiteur de taux qui garantit au moins 1 seconde entre les requêtes :

// Une mise en œuvre naïve de la limitation de taux
const rateLimiter = {
    lastRequest: 0,
    minDelay: 1000, // 1 seconde entre les requêtes
    async wait() {
        const now = Date.now();
        const timeToWait = Math.max(0, this.lastRequest + this.minDelay - now);
        if (timeToWait > 0) {
            await new Promise(resolve => setTimeout(resolve, timeToWait));
        }
        this.lastRequest = Date.now();
    }
};

Cette mise en œuvre est intentionnellement simplifiée pour l’exemple. Elle suppose une seule instance d’application et stocke l’état en mémoire, ce qui ne serait pas adapté à une utilisation en production. Des solutions plus robustes pourraient utiliser Redis pour la limitation de taux distribuée ou mettre en œuvre des systèmes basés sur des files d’attente pour une meilleure scalabilité.

Ce limiteur de taux est utilisé avant chaque requête au Projet Gutenberg :

async searchBooks(query, page = 1) {
    await this.initialize();
    await rateLimiter.wait();  // Appliquer la limite de taux
    // ... reste de la logique de recherche
}

async getBookDetails(bookUrl) {
    await this.initialize();
    await rateLimiter.wait();  // Appliquer la limite de taux
    // ... reste de la logique de détails
}

Identification claire des bots

Un User-Agent personnalisé permet aux administrateurs de site Web de comprendre qui accède à leur site et pourquoi. Cette transparence leur permet de :

  1. Vous contacter en cas de problème
  2. Surveiller et analyser le trafic des bots séparément des utilisateurs humains
  3. Éventuellement fournir un meilleur accès ou un meilleur support aux scrapers légitimes
await browserPage.setUserAgent('GutenbergScraper/1.0 (Educational Project)');

Gestion efficace des ressources

Chrome peut être gourmand en mémoire, surtout lorsqu’il exécute plusieurs instances. Fermer correctement les pages du navigateur après utilisation empêche les fuites de mémoire et garantit le bon fonctionnement de votre application, même lors du traitement de nombreuses requêtes :

try {
    // ... logique de scraping
} finally {
    await browserPage.close();  // Libérer la mémoire et les ressources système
}

En suivant ces pratiques, nous créons un scraper à la fois efficace et respectueux des ressources auxquelles il accède. Cela est particulièrement important lorsqu’il s’agit de travailler avec des ressources publiques précieuses comme Project Gutenberg.

Le Web Scraping dans le Cloud

L’application exploite une architecture cloud moderne et la conteneurisation à travers la plateforme d’application de DigitalOcean. Cette approche offre un équilibre parfait entre la simplicité du développement et la fiabilité en production.

La Puissance de la Plateforme d’Application

La Plateforme d’Application simplifie le processus de déploiement en gérant :

  • Configuration du serveur Web
  • Gestion des certificats SSL
  • Mises à jour de sécurité
  • Équilibrage de charge
  • Surveillance des ressources

Cela nous permet de nous concentrer sur le code de l’application pendant que la Plateforme d’Application gère l’infrastructure.

Chrome Headless dans un Conteneur

Le cœur de notre fonctionnalité de scraping utilise Puppeteer, qui fournit une API de haut niveau pour contrôler Chrome de manière programmatique. Voici comment nous configurons et utilisons Puppeteer dans notre application :

const puppeteer = require('puppeteer');

class BookService {
    constructor() {
        this.baseUrl = 'https://www.gutenberg.org';
        this.browser = null;
    }

    async initialize() {
        if (!this.browser) {
            // Ajouter des informations d'environnement pour le débogage
            console.log('Environment details:', {
                PUPPETEER_EXECUTABLE_PATH: process.env.PUPPETEER_EXECUTABLE_PATH,
                CHROME_PATH: process.env.CHROME_PATH,
                NODE_ENV: process.env.NODE_ENV
            });

            const options = {
                headless: 'new',
                args: [
                    '--no-sandbox',
                    '--disable-setuid-sandbox',
                    '--disable-dev-shm-usage',
                    '--disable-gpu',
                    '--disable-extensions',
                    '--disable-software-rasterizer',
                    '--window-size=1280,800',
                    '--user-agent=GutenbergScraper/1.0 (+https://github.com/wadewegner/doappplat-puppeteer-sample) Chromium/120.0.0.0'
                ],
                executablePath: process.env.PUPPETEER_EXECUTABLE_PATH || '/usr/bin/chromium-browser',
                defaultViewport: {
                    width: 1280,
                    height: 800
                }
            };

            this.browser = await puppeteer.launch(options);
        }
    }

    // Exemple de scraping avec Puppeteer
    async searchBooks(query, page = 1) {
        await this.initialize();
        await rateLimiter.wait();

        const browserPage = await this.browser.newPage();
        try {
            // Définir les en-têtes pour imiter un navigateur réel et identifier notre bot
            await browserPage.setExtraHTTPHeaders({
                'Accept-Language': 'en-US,en;q=0.9',
                'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
                'Connection': 'keep-alive',
                'Upgrade-Insecure-Requests': '1',
                'X-Bot-Info': 'GutenbergScraper - A tool for searching Project Gutenberg'
            });

            const searchUrl = `${this.baseUrl}/ebooks/search/?query=${encodeURIComponent(query)}&start_index=${(page - 1) * 24}`;
            await browserPage.goto(searchUrl, { waitUntil: 'networkidle0' });
            
            // ... reste de la logique de recherche
        } finally {
            await browserPage.close();  // Toujours nettoyer
        }
    }
}

Cette configuration nous permet de :

  • Exécuter Chrome en mode headless (sans interface graphique)
  • Exécuter du JavaScript dans le contexte des pages web
  • Gérer de manière sûre les ressources du navigateur
  • Travailler de manière fiable dans un environnement conteneurisé

Cette configuration inclut également plusieurs configurations importantes pour s’exécuter dans un environnement conteneurisé :

  1. Arguments Chrome appropriés : Drapeaux essentiels comme --no-sandbox et --disable-dev-shm-usage pour s’exécuter dans des conteneurs
  2. Chemin adapté à l’environnement : Utilise le bon chemin binaire Chrome à partir des variables d’environnement
  3. Gestion des ressources : Définit la taille de la fenêtre d’affichage et désactive les fonctionnalités inutiles
  4. Identité de bot professionnelle : Agent utilisateur clair et en-têtes HTTP identifiant notre scraper
  5. Gestion des erreurs : Nettoyage approprié des pages du navigateur pour éviter les fuites de mémoire

Bien que Puppeteer facilite le contrôle de Chrome de manière programmatique, l’exécution dans un conteneur nécessite des dépendances système et une configuration appropriées. Voyons comment nous configurons cela dans notre environnement Docker.

Docker : Assurer des environnements cohérents

Un des plus grands défis lors du déploiement de collecteurs web est de s’assurer qu’ils fonctionnent de la même manière en développement et en production. Votre collecteur peut parfaitement fonctionner sur votre machine locale mais échouer dans le cloud en raison de dépendances manquantes ou de configurations système différentes. Docker résout ce problème en empaquetant tout ce dont l’application a besoin – de Node.js à Chrome lui-même – dans un seul conteneur qui fonctionne de manière identique partout.

Notre Dockerfile met en place cet environnement cohérent :

FROM node:18-alpine

# Installer Chromium et les dépendances
RUN apk add --no-cache \
    chromium \
    nss \
    freetype \
    harfbuzz \
    ca-certificates \
    ttf-freefont \
    dumb-init

# Définir les variables d'environnement
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
    PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser \
    PUPPETEER_DISABLE_DEV_SHM_USAGE=true

L’image basée sur Alpine garde notre conteneur léger tout en incluant toutes les dépendances nécessaires. Lorsque vous exécutez ce conteneur, que ce soit sur votre ordinateur portable ou dans la plateforme d’applications de DigitalOcean, vous obtenez exactement le même environnement avec toutes les bonnes versions et configurations pour exécuter Chrome sans tête.

Développement à Déploiement

Passons en revue la mise en route de ce projet :

1. Développement Local

Tout d’abord, forkez le dépôt d’exemple sur votre compte GitHub. Cela vous donne votre propre copie sur laquelle travailler et déployer. Ensuite, clonez votre fork localement :

# Clonez votre fork
git clone https://github.com/YOUR-USERNAME/doappplat-puppeteer-sample.git
cd doappplat-puppeteer-sample

# Construire et exécuter avec Docker
docker build -t gutenberg-scraper .
docker run -p 8080:8080 gutenberg-scraper

2. Comprendre le Code

L’application est structurée autour de trois composants principaux :

  1. Service de Livre: Gère le web scraping et l’extraction de données

    async rechercherLivres(query, page = 1) {
 await this.initialiser();
 await rateLimiter.attendre();

 const élémentsParPage = 24;
 const urlRecherche = `${this.baseUrl}/livres/recherche/?query=${encodeURIComponent(query)}&start_index=${(page - 1) * élémentsParPage}`;
 
 // ... logique de scraping
}

  2. Serveur Express: Gère les routes et rend les modèles

    app.get('/book/:url(*)', async (req, res) => {
 try {
     const bookUrl = req.params.url;
     const bookDetails = await bookService.getBookDetails(bookUrl);
     res.render('book', { book: bookDetails, error: null });
 } catch (error) {
     // Gestion des erreurs
 }
});

  3. Vues Frontend : UI propre et réactive utilisant Bootstrap

    <div class="card book-card h-100">
 <div class="card-body">
     <span class="badge bg-secondary downloads-badge">
         <%= book.downloads.toLocaleString() %> téléchargements
     </span>
     <h5 class="card-title"><%= book.title %></h5>
     <!-- ... plus d'éléments UI ... -->
 </div>
</div>

3. Déploiement sur DigitalOcean

Maintenant que vous avez votre fork du dépôt, le déploiement sur la plateforme d’applications DigitalOcean est simple :

  1. Créez une nouvelle application sur la plateforme d’applications
  2. Connectez-vous à votre dépôt forké
  3. Sur les ressources, supprimez la deuxième ressource (qui n’est pas un Dockerfile) ; celle-ci est générée automatiquement par la plateforme d’applications et n’est pas nécessaire
  4. Déployez en cliquant sur Créer des ressources

L’application sera automatiquement construite et déployée, la plateforme d’applications s’occupant de tous les détails d’infrastructure.

Conclusion

Ce scraper de Project Gutenberg démontre comment créer une application web pratique en utilisant des technologies cloud modernes. En combinant Puppeteer pour le web scraping, Docker pour la conteneurisation et la plateforme App de DigitalOcean pour le déploiement, nous avons créé une solution à la fois robuste et facile à maintenir.

Le projet sert de modèle pour vos propres applications de web scraping, montrant comment gérer l’automatisation des navigateurs, gérer les ressources efficacement et déployer sur le cloud. Que vous construisiez un outil de collecte de données ou que vous appreniez simplement à propos des applications conteneurisées, cet exemple fournit une base solide sur laquelle construire.

Découvrez le projet sur GitHub pour en savoir plus et déployer votre propre instance !

Source:
https://www.digitalocean.com/community/tutorials/build-a-puppeteer-web-scrapper-with-docker-and-app-platform