Bereitstellung einer Playwright-App auf Leapcell (Node.js / Python)

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

Info Die Standardbezeichnung für die Info-Ermahnung (:::info)

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 Playwright Crawler auf GitHub

Repo: Playwright Crawler (Node.js)

Wenn Sie Python verwenden, können Sie diese Version ausprobieren: Playwright Crawler (Python)

Hier ist ein einfaches Playwright-Skript zum Generieren eines Screenshots einer Webseite, das einen Express-Server zur Steuerung des Vorgangs verwendet:

const express = require('express');
const app = express();
// Import Playwright's Chromium browser
const { chromium } = require('playwright');
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 the Chromium browser with specific arguments
    browser = await chromium.launch({
      headless: true,
      args: ['--single-process', '--no-sandbox', '--disable-setuid-sandbox'],
    });
    // Create a new browser page
    const page = await browser.newPage();
    // Navigate to the specified URL
    await page.goto(url);
    // 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 Playwright-Umgebung vorbereiten. Führen Sie dazu das folgende Skript aus:

sh prepare_playwright_env.sh

Dies wird:

Playwright und seine Abhängigkeiten (einschließlich Chromium) mit der angegebenen Version installieren.
Die erforderlichen Node.js-Module durch Ausführen von npm install installieren.

Projektstruktur

.
├── LICENSE                           # Lizenzdatei für das Projekt
├── package.json                      # Enthält Metadaten und Abhängigkeiten für das Node.js-Projekt
├── prepare_playwright_env.sh          # Skript zum Einrichten der Playwright-Umgebung
└── src
    ├── app.js                        # Hauptanwendungseinstiegspunkt mit Express und Playwright
    └── views
        ├── error.ejs                 # Fehlervorlage, die angezeigt wird, wenn etwas schief geht
        ├── partials
        │   └── header.ejs            # Header-Vorlage, die auf allen Seiten verwendet wird
        └── success.ejs               # Erfolgreiche Seitenvorlage, die die gescrapten 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.

Erläuterung von `prepare_playwright_env.sh`

Dieses Skript ist für die Einrichtung der Umgebung verantwortlich, die für die Ausführung von Playwright erforderlich ist. Hier ist eine Aufschlüsselung dessen, was jede Zeile bewirkt:

#!/bin/sh

# Install playwright and its dependencies
npx -y playwright@latest install --with-deps chromium

# Install node modules
npm install

npx -y playwright@1.50.1 install --with-deps chromium: Dieser Befehl installiert Playwright Version 1.50.1 und seine notwendigen Abhängigkeiten (einschließlich Chromium). Es stellt die korrekte Umgebung für die Web-Scraping-Aufgaben sicher.
npm install: Installiert die in package.json angegebenen Node.js-Module.

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.

Tipp Die Standardbezeichnung für die Tip-Ermahnung (:::tip)

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

Info Die Standardbezeichnung für die Info-Ermahnung (:::info)

Da Playwright Browser-Engines wie Chromium, WebKit und Firefox benötigt, müssen Sie Abhängigkeiten installieren. Es wird empfohlen, den Installationsbefehl separat auszuführen.

Hier ist der endgültige Installationsbefehl:

sh prepare_playwright_env.sh && npm install

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

Feld	Wert
Laufzeit	Node.js (Beliebige Version)
Build-Befehl	`sh prepare_playwright_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 erfolgt ist, sehen Sie eine URL wie foo-bar.leapcell.dev auf der Bereitstellungsseite. 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. Fehlerhafte 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 Playwright Crawler auf GitHub​

Voraussetzungen​

Projektstruktur​

Ausführen der Anwendung​

Erläuterung von prepare_playwright_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​