Deploy a Puppeteer App on Leapcell

Sie können einen Puppeteer-Dienst auf Leapcell bereitstellen, um Screenshots, PDFs zu generieren, Single-Page-Apps zu crawlen oder das Testen Ihres Frontend-Codes zu automatisieren.

Sie benötigen ein GitHub-Konto, um fortzufahren. Wenn Sie noch keines haben, können Sie eines auf der GitHub-Website erstellen.

:::

1. Forken Sie den puppeteer-crawler auf GitHub

Repo: puppeteer-crawler

Hier ist ein einfaches Puppeteer-Skript, um einen Screenshot einer Webseite zu erstellen:

const express = require('express');
const app = express();
// Import Puppeteer for browser automation
const puppeteer = require('puppeteer');
const bodyParser = require('body-parser');
const base64 = require('base64-js');

// Set EJS as the template engine
app.set('view engine', 'ejs');
// Set the directory for views
app.set('views', __dirname + '/views');

// Use body-parser to parse form data
app.use(bodyParser.urlencoded({ extended: true }));

// Handle GET requests and render the initial page
app.get('/', (req, res) => {
  res.render('success', {
    url: 'https://news.ycombinator.com',
    screenshot_base64: '',
    links: [],
    page_title: null,
  });
});

// Handle POST requests to take a screenshot
app.post('/', async (req, res) => {
  // Get the URL from the form, default to Hacker News
  let url = req.body.url || 'https://news.ycombinator.com';
  // Add 'https://' if the URL doesn't start with 'http'
  if (!url.startsWith('http')) {
    url = 'https://' + url;
  }

  let browser;
  try {
    // Launch a headless Chrome browser with specific arguments
    browser = await puppeteer.launch({
      headless: true, // Run the browser in headless mode
      args: [
        '--single-process',
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-gpu',
        '--no-zygote',
        '--disable-dev-shm-usage',
      ],
      // Use the stable version of Chrome
      // use specific path to the Chrome executable, because the default path may not work.
      // we have to download the Chrome executable and put it in the project directory.
      executablePath: './google-chrome-stable',
    });
    // Create a new browser page
    const page = await browser.newPage();
    // Navigate to the specified URL and wait until the network is idle
    await page.goto(url, { waitUntil: 'networkidle2', timeout: 0 });
    // Take a screenshot of the page
    const screenshot = await page.screenshot();
    // Get the page title
    const page_title = await page.title();

    // Extract all <a> tags' links and text content
    const links_and_texts = await page.evaluate(() => {
      const anchors = document.querySelectorAll('a');
      return Array.from(anchors).map((anchor) => {
        const text = anchor.textContent.replace(/<[^>]*>/g, '').trim();
        return {
          href: anchor.href,
          text: text,
        };
      });
    });

    // Convert the screenshot to a base64 string
    const screenshot_base64 = base64.fromByteArray(screenshot);

    // Render the success page with relevant data
    res.render('success', {
      url,
      page_title,
      screenshot_base64,
      links: links_and_texts,
    });
  } catch (e) {
    // Close the browser if an error occurs
    if (browser) {
      await browser.close();
    }
    // Render the error page with the error message
    res.render('error', { error_message: e.message });
  } finally {
    // Ensure the browser is closed after all operations
    if (browser) {
      await browser.close();
    }
  }
});

// Set the port, use environment variable PORT or default to 8080
const port = process.env.PORT || 8080;
// Start the server
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Voraussetzungen

Bevor Sie die Anwendung ausführen, müssen Sie die Puppeteer-Umgebung vorbereiten. Führen Sie dazu das folgende Skript aus:

sh prepare_puppeteer_env.sh

Dies wird:

Installieren Sie Puppeteer und seine Abhängigkeiten (ohne Chromium herunterzuladen, da wir Google Chrome verwenden werden).
Installieren Sie Google Chrome in Ihrer Umgebung.
Richten Sie die notwendigen Abhängigkeiten für die Ausführung von Puppeteer ein.

Projektstruktur

.
├── LICENSE                           # Lizenzdatei für das Projekt
├── package.json                      # Enthält Metadaten und Abhängigkeiten für das Node.js-Projekt
├── prepare_puppeteer_env.sh           # Skript zum Einrichten der Puppeteer-Umgebung
└── src
    ├── app.js                        # Hauptanwendungseinstiegspunkt mit Express und Puppeteer
    └── views
        ├── error.ejs                 # Fehlervorlage, die angezeigt wird, wenn etwas schief geht
        ├── partials
        │   └── header.ejs            # Header-Vorlage, die seitenübergreifend verwendet wird
        └── success.ejs               # Erfolgreiche Seitenvorlage, die die extrahierten Links anzeigt

Ausführen der Anwendung

Sobald Sie die Umgebung vorbereitet haben, können Sie den Webdienst mit dem folgenden Befehl starten:

npm start

Der Dienst ist unter http://localhost:8080 verfügbar, und Sie können die URL der Seite eingeben, die Sie scrapen möchten. Es wird eine Liste aller Links auf dieser Seite zurückgegeben.

Erklärung von `prepare_puppeteer_env.sh`

Dieses Skript ist dafür verantwortlich, die für die Ausführung von Puppeteer erforderliche Umgebung einzurichten. Hier ist eine Aufschlüsselung dessen, was jede Zeile bewirkt:

#!/bin/bash

# Beenden Sie sofort, wenn ein Befehl mit einem Status ungleich Null beendet wird
set -e

# --- 1. Allgemeine Einrichtung ---
# Installieren Sie Puppeteer, ohne das mitgelieferte Chromium herunterzuladen
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm install puppeteer

# Aktualisieren Sie die apt-Liste und installieren Sie allgemeine Schriftarten und Bibliotheken, die von beiden Browsern benötigt werden
echo "INFO: Installing common fonts and libraries..."
apt-get update
apt-get install -y \
    fonts-ipafont-gothic \
    fonts-wqy-zenhei \
    fonts-thai-tlwg \
    fonts-kacst \
    fonts-freefont-ttf \
    libxss1 \
    --no-install-recommends

# --- 2. Installieren Sie den Browser basierend auf der Architektur ---
ARCH=$(dpkg --print-architecture)
echo "INFO: Detected architecture: $ARCH"

if [ "$ARCH" = "amd64" ]; then
    # Für die amd64-Architektur (x86_64) installieren Sie Google Chrome
    echo "INFO: Installing Google Chrome for amd64..."
    apt-get install -y wget gnupg
    wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
    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 --no-install-recommends
    BROWSER_EXEC="google-chrome-stable"

elif [ "$ARCH" = "arm64" ]; then
    # Für die arm64-Architektur installieren Sie Chromium
    # Google Chrome ist für arm64 nicht verfügbar, daher installieren wir die Open-Source-Version Chromium
    echo "INFO: Installing Chromium for arm64..."
    apt-get install -y chromium --no-install-recommends
    BROWSER_EXEC="chromium"

else
    echo "ERROR: Unsupported architecture: $ARCH" >&2
    exit 1
fi

# --- 3. Bereinigung und Überprüfung ---
# Bereinigen Sie den apt-Cache, um die Bildgröße zu reduzieren
echo "INFO: Cleaning up apt cache..."
rm -rf /var/lib/apt/lists/*

# Finden Sie den Pfad der installierten Browser-Executable
chrome_path=$(which "$BROWSER_EXEC")

# Überprüfen Sie, ob der Browser erfolgreich installiert wurde, und verschieben Sie die ausführbare Datei
if [ -n "$chrome_path" ]; then
    echo "INFO: Browser executable found at: $chrome_path"
    
    # --- START: MODIFICATION ---
    # Auf arm64 benennen Sie "Chromium" in "google-chrome-stable" um, um die Kompatibilität mit dem JS-Code zu gewährleisten.
    # Auf amd64 wird nur "google-chrome-stable" in das aktuelle Verzeichnis verschoben.
    mv "$chrome_path" ./google-chrome-stable
    echo "INFO: Moved executable to ./google-chrome-stable"
    # --- END: MODIFICATION ---

else
    echo "ERROR: Browser executable '$BROWSER_EXEC' not found in PATH." >&2
    exit 1
fi

echo "✅ Setup complete. The browser executable is now available at ./google-chrome-stable"

PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm install puppeteer: Dadurch wird Puppeteer installiert, ohne Chromium herunterzuladen, da stattdessen Google Chrome verwendet wird.
Die nachfolgenden Befehle aktualisieren die Systempaketliste, installieren die erforderlichen Tools (wie wget und gnupg) und fügen den Signaturschlüssel und das Repository von Google für die Installation von Google Chrome hinzu.
apt-get install -y google-chrome-stable: Dadurch wird Google Chrome zusammen mit den erforderlichen Schriftarten und Bibliotheken installiert, um sicherzustellen, dass Puppeteer ordnungsgemäß mit dem Browser ausgeführt wird.
Das Skript sucht und verschiebt dann die installierte ausführbare Datei google-chrome-stable in das aktuelle Verzeichnis, damit Puppeteer sie verwenden kann.

2. Erstellen Sie einen Dienst im Leapcell Dashboard und verbinden Sie Ihr Repo

Gehen Sie zum Leapcell Dashboard und klicken Sie auf die Schaltfläche Neuer Dienst.

Wählen Sie auf der Seite „Neuer Dienst“ das Repository aus, das Sie gerade geforkt haben.

Um auf Ihre Repositories zuzugreifen, müssen Sie Leapcell mit Ihrem GitHub-Konto verbinden.

Befolgen Sie diese Anweisungen, um eine Verbindung zu GitHub herzustellen.

Sobald die Verbindung hergestellt ist, werden Ihre Repositories in der Liste angezeigt.

:::

3. Füllen Sie die folgenden Werte während der Diensterstellung aus

Da Puppeteer einen Headless-Chromium-Browser benötigt, müssen Sie Abhängigkeiten installieren. Es wird empfohlen, den Installationsbefehl separat auszuführen.

Hier ist der endgültige Installationsbefehl:

sh prepare_puppeteer_env.sh && npm install

In diesem Beispiel verwenden wir eine Express-App, um Puppeteer-Operationen zu steuern. Der Startbefehl lautet npm run start.

:::

Feld	Wert
Laufzeit	Node.js (beliebige Version)
Build-Befehl	`sh prepare_puppeteer_env.sh && npm install`
Startbefehl	`npm run start`
Port	`8080`

Geben Sie diese Werte in die entsprechenden Felder ein.

4. Greifen Sie auf Ihre App zu

Sobald die Bereitstellung abgeschlossen ist, wird auf der Bereitstellungsseite eine URL wie foo-bar.leapcell.dev angezeigt. Besuchen Sie die Domain, um Ihre Anwendung zu testen.

Kontinuierliche Bereitstellungen

Jeder Push in den verknüpften Branch löst automatisch einen Build und eine Bereitstellung aus. Fehlgeschlagene Builds werden sicher abgebrochen, und die aktuelle Version bleibt bis zur nächsten erfolgreichen Bereitstellung aktiv.

Erfahren Sie mehr über Kontinuierliche Bereitstellungen.

1. Forken Sie den puppeteer-crawler auf GitHub​

Voraussetzungen​

Projektstruktur​

Ausführen der Anwendung​

Erklärung von prepare_puppeteer_env.sh​

2. Erstellen Sie einen Dienst im Leapcell Dashboard und verbinden Sie Ihr Repo​

3. Füllen Sie die folgenden Werte während der Diensterstellung aus​

4. Greifen Sie auf Ihre App zu​

Kontinuierliche Bereitstellungen​