Riparazione dell'errore Chrome di Puppeteer "Impossibile trovare Chrome (ver. 130.0.6723.116)" sulla distribuzione Vercel

Soluzione 1: configurare Puppeteer per installare correttamente Chrome su Vercel

Questa soluzione backend basata su Node.js configura il percorso della cache e i comandi di installazione di Puppeteer per garantire che Chrome venga installato correttamente.

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;

Soluzione 2: configurazione personalizzata di Puppeteer per Vercel con un file .puppeteerrc.cjs

Questa soluzione modifica il file di configurazione di Puppeteer (.puppeteerrc.cjs) per specificare il percorso della cache di Chrome e garantire la compatibilità con la struttura dei file di Vercel.

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'],
};

Soluzione 3: implementazione di variabili di ambiente e script in package.json per Puppeteer

Questo approccio modifica il pacchetto.json file per installare file binari specifici di Chrome e impostare automaticamente le configurazioni di Puppeteer durante la distribuzione.

// 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";

Test unitario per la funzionalità Screenshot di Puppeteer

Questo script di test Node.js Mocha verifica la capacità di Puppeteer di acquisire uno screenshot da un URL in vari ambienti.

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();
            });
    });
});

Domande comuni su Puppeteer e sulle distribuzioni cloud

1. Perché ricevo errori "Impossibile trovare Chrome" sulle piattaforme cloud?
2. Questi errori si verificano spesso perché le piattaforme cloud non includono il file binario completo di Chrome per impostazione predefinita. Puoi risolvere questo problema specificando executablePath nella configurazione del tuo Burattinaio.
3. Come posso garantire che Puppeteer funzioni sia in ambienti locali che cloud?
4. Utilizzando executablePath E args con flag compatibili con il cloud come --no-sandbox può rendere la configurazione sufficientemente flessibile per entrambi gli ambienti.
5. Cosa significa il --no-sandbox bandiera fare in Puppeteer?
6. IL --no-sandbox flag disabilita la sicurezza sandbox di Chrome, che consente a Puppeteer di funzionare su servizi cloud che non supportano il sandboxing, ma dovrebbe essere usato con cautela.
7. Perché ho bisogno di un'abitudine cacheDirectory per Burattinaio?
8. Impostazione di una personalizzazione cacheDirectory garantisce che Puppeteer scarichi i file binari di Chrome in una posizione nota, il che può prevenire errori durante la distribuzione, soprattutto in ambienti serverless.
9. Qual è lo scopo del networkidle2 opzione nel goto metodo?
10. IL networkidle2 L'opzione attende finché non ci sono più di due connessioni di rete attive. Ciò è utile per acquisire una pagina completamente caricata e gestire il contenuto dinamico.
11. Puppeteer può funzionare senza una versione di Chrome specificata?
12. Sì, ma è consigliabile specificarlo executablePath e assicurati che sia accessibile una versione compatibile di Chrome per ottenere risultati coerenti nelle configurazioni cloud.
13. Come posso gestire la cache di Puppeteer in ambienti diversi?
14. È possibile specificare un universale cacheDirectory nel .puppeteerrc.cjs file, consentendo a Puppeteer di trovare i file binari di Chrome su piattaforme come Vercel e Heroku.
15. È puppeteer-core diverso da puppeteer?
16. SÌ, puppeteer-core esclude Chrome in bundle per ridurre le dimensioni, quindi dovrai specificare un file binario di Chrome. Il pieno puppeteer il pacchetto include Chrome automaticamente.
17. Cosa devo fare se Puppeteer è lento negli ambienti cloud?
18. Ottimizzazione viewport impostazioni e disabilitare opzioni non necessarie come devtools può migliorare le prestazioni in ambienti con risorse limitate.
19. Puppeteer è compatibile con tutti i fornitori di servizi cloud?
20. Generalmente sì, ma ogni fornitore può avere requisiti unici. Utilizzando impostazioni compatibili con il cloud come --no-sandbox garantisce una migliore compatibilità.

Considerazioni finali su come far girare Puppeteer su Vercel

Per distribuire con successo Puppeteer su Vercel è necessario comprendere le esigenze di configurazione specifiche per Chrome. Specificando opzioni di lancio e la corretta configurazione dei percorsi della cache di Puppeteer aiutano a prevenire il frustrante errore "Impossibile trovare Chrome". Queste modifiche garantiscono che Puppeteer funzioni in modo affidabile sia negli ambienti locali che in quelli cloud. 🚀

Una volta adattate queste soluzioni al tuo progetto, l'acquisizione di screenshot dagli URL forniti dall'utente diventa semplice, consentendo applicazioni web più dinamiche. Con una corretta configurazione, Puppeteer rimane uno strumento prezioso per l'automazione e il web scraping, anche su piattaforme serverless come Vercel.