Reparieren des Puppeteer Chrome-Fehlers „Chrome konnte nicht gefunden werden (Version 130.0.6723.116)“ bei der Vercel-Bereitstellung

Lösung 1: Puppeteer für die korrekte Installation von Chrome auf Vercel konfigurieren

Diese Node.js-basierte Backend-Lösung konfiguriert den Cache-Pfad und die Installationsbefehle von Puppeteer, um sicherzustellen, dass Chrome korrekt installiert wird.

const puppeteer = require('puppeteer');
const path = require('path');
const { v4: uuid } = require('uuid');
const fs = require('fs');

// Main screenshot function
const screenshot = async (req, res) => {
    const url = req.query.url;
    if (!url) {
        return res.status(400).json({ message: 'URL is required' });
    }

    let browser;
    try {
        // Launch Puppeteer with specific Chrome executable path and options
        browser = await puppeteer.launch({
            ignoreHTTPSErrors: true,
            executablePath: process.env.CHROME_PATH || '/opt/bin/chromium',
            args: ['--no-sandbox', '--disable-setuid-sandbox']
        });

        const page = await browser.newPage();
        await page.goto(url, { waitUntil: 'networkidle2' });
        await page.setViewport({ width: 1920, height: 1080 });

        const fileName = \`${uuid()}.png\`;
        const screenshotPath = path.join(__dirname, '..', 'public', fileName);
        await page.screenshot({ path: screenshotPath });

        res.json({ screenshotPath: \`/image/\${fileName}\` });
    } catch (err) {
        console.error('Error capturing screenshot:', err);
        res.status(500).json({ error: 'Failed to capture screenshot' });
    } finally {
        if (browser) await browser.close();
    }
};

module.exports = screenshot;

Lösung 2: Benutzerdefinierte Puppeteer-Konfiguration für Vercel mit einer .puppeteerrc.cjs-Datei

Diese Lösung passt die Konfigurationsdatei von Puppeteer (.puppeteerrc.cjs) an, um den Chrome-Cache-Pfad anzugeben und die Kompatibilität mit der Dateistruktur von Vercel sicherzustellen.

const { join } = require('path');

/
 * @type {import('puppeteer').Configuration}
 */
module.exports = {
    // Specify cache directory for Puppeteer
    cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
    // Specify which Chromium version Puppeteer should install
    executablePath: '/opt/bin/chromium',
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
};

Lösung 3: Umgebungsvariablen und Skripte in package.json für Puppeteer implementieren

Dieser Ansatz verändert die package.json Datei, um bestimmte Chrome-Binärdateien zu installieren und Puppeteer-Konfigurationen während der Bereitstellung automatisch einzurichten.

// Add to package.json
"scripts": {
    "postinstall": "npx puppeteer install --path ./.cache/puppeteer",
    "start": "node index.js"
}

// Configure environment variable in Vercel
process.env.CHROME_PATH = "/opt/bin/chromium";

Unit-Test für die Screenshot-Funktionalität von Puppeteer

Dieses Node.js Mocha-Testskript überprüft die Fähigkeit von Puppeteer, einen Screenshot von einer URL in verschiedenen Umgebungen zu erfassen.

const chai = require('chai');
const chaiHttp = require('chai-http');
const app = require('../app'); // Express app where screenshot endpoint is defined

chai.use(chaiHttp);
const expect = chai.expect;

describe('Screenshot API', () => {
    it('should return an error for missing URL parameter', (done) => {
        chai.request(app)
            .get('/screenshot')
            .end((err, res) => {
                expect(res).to.have.status(400);
                expect(res.body).to.have.property('message').eql('URL is required');
                done();
            });
    });

    it('should capture a screenshot successfully for a valid URL', (done) => {
        chai.request(app)
            .get('/screenshot?url=https://example.com')
            .end((err, res) => {
                expect(res).to.have.status(200);
                expect(res.body).to.have.property('screenshotPath');
                done();
            });
    });
});

Häufige Fragen zu Puppeteer und Cloud-Bereitstellungen

1. Warum erhalte ich auf Cloud-Plattformen die Fehlermeldung „Chrome konnte nicht gefunden werden“?
2. Diese Fehler treten häufig auf, weil Cloud-Plattformen standardmäßig nicht die vollständige Chrome-Binärdatei enthalten. Sie können dies beheben, indem Sie Folgendes angeben executablePath in Ihrem Puppeteer-Setup.
3. Wie stelle ich sicher, dass Puppeteer sowohl in lokalen als auch in Cloud-Umgebungen funktioniert?
4. Benutzen executablePath Und args mit Cloud-freundlichen Flaggen wie --no-sandbox kann Ihr Setup für beide Umgebungen flexibel genug gestalten.
5. Was bedeutet das --no-sandbox Flagge in Puppeteer?
6. Der --no-sandbox Flag deaktiviert die Sandbox-Sicherheit von Chrome, wodurch Puppeteer auf Cloud-Diensten ausgeführt werden kann, die Sandboxing nicht unterstützen. Es sollte jedoch mit Vorsicht verwendet werden.
7. Warum brauche ich einen Brauch? cacheDirectory für Puppenspieler?
8. Festlegen eines Benutzerdefinierts cacheDirectory stellt sicher, dass Puppeteer Chrome-Binärdateien an einen bekannten Speicherort herunterlädt, was Fehler während der Bereitstellung verhindern kann, insbesondere in serverlosen Umgebungen.
9. Was ist der Zweck des networkidle2 Option in der goto Verfahren?
10. Der networkidle2 Die Option wartet, bis nicht mehr als zwei aktive Netzwerkverbindungen vorhanden sind. Dies ist nützlich, um eine vollständig geladene Seite zu erfassen und dynamische Inhalte zu verarbeiten.
11. Kann Puppeteer ohne eine bestimmte Chrome-Version funktionieren?
12. Ja, aber es wird empfohlen, dies anzugeben executablePath und stellen Sie sicher, dass eine kompatible Chrome-Version verfügbar ist, um konsistente Ergebnisse in Cloud-Setups zu erzielen.
13. Wie verwalte ich den Puppeteer-Cache in verschiedenen Umgebungen?
14. Sie können ein Universal angeben cacheDirectory im .puppeteerrc.cjs Datei, die es Puppeteer ermöglicht, Chrome-Binärdateien auf Plattformen wie Vercel und Heroku zu finden.
15. Ist puppeteer-core anders als puppeteer?
16. Ja, puppeteer-core schließt gebündeltes Chrome aus, um die Größe zu reduzieren, daher müssen Sie eine Chrome-Binärdatei angeben. Das volle puppeteer Das Paket enthält automatisch Chrome.
17. Was soll ich tun, wenn Puppeteer in Cloud-Umgebungen langsam ist?
18. Optimieren viewport Einstellungen und Deaktivierung nicht benötigter Optionen wie devtools kann die Leistung in Umgebungen mit eingeschränkten Ressourcen verbessern.
19. Ist Puppeteer mit allen Cloud-Anbietern kompatibel?
20. Im Allgemeinen ja, aber jeder Anbieter kann individuelle Anforderungen haben. Verwenden Sie cloudfreundliche Einstellungen wie --no-sandbox sorgt für eine bessere Kompatibilität.

Abschließende Gedanken dazu, wie man Puppeteer auf Vercel zum Laufen bringt

Für die erfolgreiche Bereitstellung von Puppeteer auf Vercel ist es erforderlich, die spezifischen Einrichtungsanforderungen für Chrome zu verstehen. Spezifizieren Startoptionen und die korrekte Konfiguration der Cache-Pfade von Puppeteer trägt dazu bei, den frustrierenden Fehler „Chrome konnte nicht gefunden werden“ zu vermeiden. Diese Anpassungen stellen sicher, dass Puppeteer sowohl in lokalen als auch in Cloud-Umgebungen zuverlässig funktioniert. 🚀

Sobald Sie diese Lösungen an Ihr Projekt anpassen, wird die Erfassung von Screenshots von vom Benutzer bereitgestellten URLs nahtlos und ermöglicht dynamischere Webanwendungen. Bei richtiger Einrichtung bleibt Puppeteer ein unschätzbar wertvolles Werkzeug für Automatisierung und Web-Scraping, selbst auf serverlosen Plattformen wie Vercel.