Erstellen eines Puppeteer Web-Scrapers mit Docker auf der DigitalOcean App Platform

Tutorials
Docker

Als Ultra-Marathon-Enthusiast stehe ich oft vor einer gemeinsamen Herausforderung: Wie kann ich meine Zielzeit für längere Rennen abschätzen, die ich noch nicht versucht habe? Bei der Diskussion mit meinem Trainer schlug er einen praktischen Ansatz vor – schauen Sie sich Läufer an, die sowohl ein Rennen absolviert haben, das ich gemacht habe, als auch das Rennen, auf das ich abziele. Diese Korrelation könnte wertvolle Einblicke in potenzielle Zielzeiten liefern. Aber das manuelle Durchsuchen von Rennergebnissen wäre unglaublich zeitaufwändig.

Dies führte mich dazu, Race Time Insights zu entwickeln, ein Tool, das Rennzeiten automatisch vergleicht, indem es Athleten findet, die beide Veranstaltungen abgeschlossen haben. Die Anwendung durchsucht Rennergebnisse von Plattformen wie UltraSignup und Pacific Multisports und ermöglicht es Läufern, zwei Renn-URLs einzugeben und zu sehen, wie andere Athleten bei beiden Veranstaltungen abgeschnitten haben.

Das Erstellen dieses Tools hat mir gezeigt, wie leistungsstark Digitale Ozean App-Plattform sein kann. Mit Puppeteer mit headless Chrome in Docker-Containern konnte ich mich darauf konzentrieren, das Problem für Läufer zu lösen, während die App-Plattform alle Infrastrukturkomplexitäten behandelte. Das Ergebnis war eine robuste, skalierbare Lösung, die der Laufgemeinschaft hilft, datengesteuerte Entscheidungen über ihre Rennziele zu treffen.

Nach der Entwicklung von Race Time Insights wollte ich einen Leitfaden erstellen, der anderen Entwicklern zeigt, wie sie dieselben Technologien nutzen können – Puppeteer, Docker-Container und Digitale Ozean App-Plattform. Natürlich muss man bei der Arbeit mit externen Daten auf Dinge wie Rate-Limits und Nutzungsbedingungen achten.

Geben Sie Project Gutenberg ein. Mit seiner umfangreichen Sammlung von Büchern im öffentlichen Bereich und klaren Nutzungsbedingungen ist es ein idealer Kandidat, um diese Technologien zu demonstrieren. In diesem Beitrag werden wir erkunden, wie man eine Buchsuchanwendung mit Puppeteer in einem Docker-Container erstellt, die auf der App-Plattform bereitgestellt wird und dabei bewährte Verfahren für den externen Datenzugriff befolgt.

Ich habe eine Webanwendung erstellt und geteilt, die verantwortungsbewusst Buchinformationen von Project Gutenberg abruft. Die App, die Sie in diesem GitHub-Repository finden können, ermöglicht es Benutzern, in Tausenden von Büchern im öffentlichen Bereich zu suchen, detaillierte Informationen zu jedem Buch anzuzeigen und verschiedene Download-Formate abzurufen. Besonders interessant ist, wie sie verantwortungsbewusste Web-Scraping-Praktiken demonstriert und gleichzeitig echten Mehrwert für Benutzer bietet.

Ein guter digitaler Bürger sein

Beim Bau eines Web-Scrapers ist es entscheidend, gute Praktiken zu befolgen und sowohl technische als auch rechtliche Grenzen zu respektieren. Project Gutenberg ist ein ausgezeichnetes Beispiel, um diese Grundsätze zu erlernen, weil:

  1. Es klare Nutzungsbedingungen hat
  2. Es enthält robots.txt-Richtlinien
  3. Der Inhalt steht ausdrücklich im öffentlichen Bereich
  4. Es profitiert von einer erhöhten Zugänglichkeit zu seinen Ressourcen

Unsere Implementierung umfasst mehrere bewährte Verfahren:

Rate-Limitierung

Zu Demonstrationszwecken implementieren wir einen einfachen Rate-Limiter, der mindestens 1 Sekunde zwischen Anfragen sicherstellt:

// Eine naive Rate-Limitierungsimplementierung
const rateLimiter = {
    lastRequest: 0,
    minDelay: 1000, // 1 Sekunde zwischen Anfragen
    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();
    }
};

Diese Implementierung ist absichtlich vereinfacht für das Beispiel. Sie geht von einer einzelnen Anwendungsinstanz aus und speichert den Zustand im Speicher, was für den Produktiveinsatz nicht geeignet wäre. Robustere Lösungen könnten Redis für verteilte Rate-Limitierung verwenden oder Queue-basierte Systeme für eine bessere Skalierbarkeit implementieren.

Dieser Rate-Limiter wird vor jeder Anfrage an Project Gutenberg verwendet:

async searchBooks(query, page = 1) {
    await this.initialize();
    await rateLimiter.wait();  // Rate-Limit durchsetzen
    // ... Rest der Suchlogik
}

async getBookDetails(bookUrl) {
    await this.initialize();
    await rateLimiter.wait();  // Rate-Limit durchsetzen
    // ... Rest der Detaillogik
}

Klare Bot-Identifikation

Ein benutzerdefinierter User-Agent hilft Website-Administratoren zu verstehen, wer auf ihre Website zugreift und warum. Diese Transparenz ermöglicht es ihnen:

  1. Sie zu kontaktieren, wenn es Probleme gibt
  2. Bot-Traffic separat von menschlichen Benutzern zu überwachen und zu analysieren
  3. Möglicherweise besseren Zugang oder Support für legitime Scraper zu bieten
await browserPage.setUserAgent('GutenbergScraper/1.0 (Educational Project)');

Effizientes Ressourcenmanagement

Chrome kann speicherintensiv sein, insbesondere beim Ausführen mehrerer Instanzen. Das ordnungsgemäße Schließen von Browserseiten nach der Verwendung verhindert Speicherlecks und gewährleistet, dass Ihre Anwendung effizient ausgeführt wird, auch wenn sie viele Anfragen bearbeitet:

try {
    // ... Scraping-Logik
} finally {
    await browserPage.close();  // Speicher und Systemressourcen freigeben
}

Indem wir diese Praktiken befolgen, schaffen wir einen Scraper, der sowohl effektiv ist als auch respektvoll mit den Ressourcen umgeht, auf die er zugreift. Dies ist besonders wichtig, wenn es um wertvolle öffentliche Ressourcen wie Project Gutenberg geht.

Web-Scraping in der Cloud

Die Anwendung nutzt moderne Cloud-Architektur und Containerisierung durch DigitalOcean’s App Platform. Dieser Ansatz bietet ein perfektes Gleichgewicht zwischen Entwicklungssimplizität und Produktionszuverlässigkeit.

Die Kraft der App Platform

App Platform vereinfacht den Bereitstellungsprozess durch die Handhabung von:

  • Webserverkonfiguration
  • SSL-Zertifikatverwaltung
  • Sicherheitsupdates
  • Lastenausgleich
  • Ressourcenüberwachung

Dies ermöglicht es uns, uns auf den Anwendungscode zu konzentrieren, während App Platform die Infrastruktur verwaltet.

Headless Chrome in einem Container

Der Kern unserer Scraping-Funktionalität verwendet Puppeteer, das eine API auf hoher Ebene bereitstellt, um Chrome programmgesteuert zu steuern. So richten wir Puppeteer in unserer Anwendung ein und verwenden es:

const puppeteer = require('puppeteer');

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

    async initialize() {
        if (!this.browser) {
            // Umgebungsinfo-Protokollierung zum Debuggen hinzufügen
            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);
        }
    }

    // Beispiel für Scraping mit Puppeteer
    async searchBooks(query, page = 1) {
        await this.initialize();
        await rateLimiter.wait();

        const browserPage = await this.browser.newPage();
        try {
            // Header festlegen, um einen echten Browser zu imitieren und unseren Bot zu identifizieren
            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' });
            
            // ... Rest der Suchlogik
        } finally {
            await browserPage.close();  // Immer aufräumen
        }
    }
}

Mit diesem Setup können wir:

  • Chrome im Headless-Modus ausführen (keine GUI erforderlich)
  • JavaScript im Kontext von Webseiten ausführen
  • Browserressourcen sicher verwalten
  • Zuverlässig in einer containerisierten Umgebung arbeiten

Das Setup beinhaltet auch mehrere wichtige Konfigurationen für die Ausführung in einer containerisierten Umgebung:

  1. Korrekte Chrome-Argumente: Wesentliche Flags wie --no-sandbox und --disable-dev-shm-usage für die Ausführung in Containern
  2. Umgebungsbewusster Pfad: Verwendet den korrekten Chrome-Binärpfad aus Umgebungsvariablen
  3. Ressourcenmanagement: Legt die Viewport-Größe fest und deaktiviert unnötige Funktionen
  4. Professionelle Bot-Identität: Klare Benutzeragenten- und HTTP-Header zur Identifizierung unseres Scrapers
  5. Fehlerbehandlung: Ordentliche Bereinigung von Browserseiten, um Speicherlecks zu verhindern

Während Puppeteer es einfach macht, Chrome programmgesteuert zu steuern, erfordert das Ausführen in einem Container ordnungsgemäße Systemabhängigkeiten und Konfigurationen. Schauen wir uns an, wie wir dies in unserer Docker-Umgebung einrichten.

Docker: Sicherstellung konsistenter Umgebungen

Eine der größten Herausforderungen bei der Bereitstellung von Web-Scrapern besteht darin, sicherzustellen, dass sie in der Entwicklung und Produktion gleich funktionieren. Ihr Scraper funktioniert möglicherweise perfekt auf Ihrem lokalen Rechner, aber in der Cloud aufgrund fehlender Abhängigkeiten oder unterschiedlicher Systemkonfigurationen nicht. Docker löst dies, indem alles, was die Anwendung benötigt – von Node.js bis hin zu Chrome selbst – in einem einzigen Container verpackt wird, der überall identisch läuft.

Unser Dockerfile richtet diese konsistente Umgebung ein:

FROM node:18-alpine

# Chromium und Abhängigkeiten installieren
RUN apk add --no-cache \
    chromium \
    nss \
    freetype \
    harfbuzz \
    ca-certificates \
    ttf-freefont \
    dumb-init

# Umgebungsvariablen setzen
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
    PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser \
    PUPPETEER_DISABLE_DEV_SHM_USAGE=true

Das auf Alpine basierende Image hält unseren Container schlank und enthält dabei alle notwendigen Abhängigkeiten. Wenn Sie diesen Container ausführen, sei es auf Ihrem Laptop oder auf der App-Plattform von DigitalOcean, erhalten Sie die exakt gleiche Umgebung mit allen richtigen Versionen und Konfigurationen für die Ausführung von headless Chrome.

Entwicklung bis Bereitstellung

Lassen Sie uns durchgehen, wie Sie dieses Projekt starten und ausführen können:

1. Lokale Entwicklung

Zunächst sollten Sie das Beispiel-Repository in Ihr GitHub-Konto fork. Dadurch erhalten Sie eine eigene Kopie, an der Sie arbeiten und von der aus Sie bereitstellen können. Klone dann dein Fork lokal:

# Klone deinen Fork
git clone https://github.com/YOUR-USERNAME/doappplat-puppeteer-sample.git
cd doappplat-puppeteer-sample

# Bauen und ausführen mit Docker
docker build -t gutenberg-scraper .
docker run -p 8080:8080 gutenberg-scraper

2. Verständnis des Codes

Die Anwendung ist um drei Hauptkomponenten herum strukturiert:

  1. Buchdienst: Bearbeitet Web-Scraping und Datenextraktion

    async searchBooks(Abfrage, Seite = 1) {
 await this.initialisieren();
 await rateLimiter.warten();

 const ElementeProSeite = 24;
 const SuchURL = `${this.baseUrl}/ebooks/suche/?query=${encodeURIComponent(Abfrage)}&start_index=${(Seite - 1) * ElementeProSeite}`;
 
 // ... Scraping-Logik
}

  2. Express Server: Verwaltet Routen und rendert Vorlagen

    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) {
     // Fehlerbehandlung
 }
});

  3. Frontend-Ansichten: Saubere, reaktionsfähige UI mit Bootstrap

    <div class="card book-card h-100">
 <div class="card-body">
     <span class="badge bg-secondary downloads-badge">
         <%= book.downloads.toLocaleString() %> Downloads
     </span>
     <h5 class="card-title"><%= book.title %></h5>
     <!-- ... weitere UI-Elemente ... -->
 </div>
</div>

3. Bereitstellung auf DigitalOcean

Jetzt, da Sie Ihr Fork des Repositorys haben, ist die Bereitstellung auf der DigitalOcean App Platform unkompliziert:

  1. Erstellen Sie eine neue App Platform-Anwendung
  2. Verbinden Sie sich mit Ihrem geforkten Repository
  3. Unter Ressourcen löschen Sie die zweite Ressource (die keine Dockerdatei ist); diese wird von der App Platform automatisch generiert und wird nicht benötigt
  4. Deployen Sie durch Klicken auf „Ressourcen erstellen“

Die Anwendung wird automatisch erstellt und bereitgestellt, wobei die App Platform alle Infrastrukturdetails handhabt.

Abschluss

Dieser Project Gutenberg Scraper zeigt, wie man eine praktische Webanwendung unter Verwendung moderner Cloud-Technologien erstellt. Durch die Kombination von Puppeteer für Web-Scraping, Docker für die Containerisierung und DigitalOcean’s App Platform für die Bereitstellung haben wir eine Lösung geschaffen, die sowohl robust als auch leicht zu pflegen ist.

Das Projekt dient als Vorlage für Ihre eigenen Web-Scraping-Anwendungen und zeigt, wie man die Browser-Automation handhabt, Ressourcen effizient verwaltet und in die Cloud bereitstellt. Ob Sie ein Datensammlungstool erstellen oder einfach nur mehr über containerisierte Anwendungen erfahren möchten, dieses Beispiel bietet eine solide Grundlage, auf der Sie aufbauen können.

Schauen Sie sich das Projekt auf GitHub an, um mehr zu erfahren und Ihre eigene Instanz bereitzustellen!

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