Reparació de l'error "No s'ha pogut trobar Chrome (versió. 130.0.6723 116)" de Puppeteer Chrome al desplegament de Vercel

Solució 1: Configuració de Puppeteer per instal·lar Chrome correctament a Vercel

Aquesta solució de fons basada en Node.js configura el camí de la memòria cau de Puppeteer i les ordres d'instal·lació per garantir que Chrome s'instal·li correctament.

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;

Solució 2: configuració personalitzada del titellaire per a Vercel amb un fitxer .puppeteerrc.cjs

Aquesta solució ajusta el fitxer de configuració de Puppeteer (.puppeteerrc.cjs) per especificar el camí de la memòria cau de Chrome i garantir la compatibilitat amb l'estructura de fitxers de 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'],
};

Solució 3: implementació de variables d'entorn i scripts a package.json per a Puppeteer

Aquest enfocament modifica el package.json per instal·lar binaris de Chrome específics i configurar configuracions de Puppeteer automàticament durant el desplegament.

// 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 unitari per a la funcionalitat de captura de pantalla de Titellaire

Aquest script de prova de Node.js Mocha verifica la capacitat de Puppeteer per capturar una captura de pantalla d'una URL en diversos entorns.

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

Preguntes habituals sobre els desplegaments de Titella i núvol

1. Per què rebo errors "No s'ha pogut trobar Chrome" a les plataformes al núvol?
2. Aquests errors sovint es produeixen perquè les plataformes en núvol no inclouen el binari complet de Chrome de manera predeterminada. Podeu solucionar-ho especificant executablePath a la configuració de Titellaire.
3. Com puc assegurar-me que Puppeteer funcioni tant en entorns locals com en núvol?
4. Utilitzant executablePath i args amb banderes amigables amb els núvols com --no-sandbox pot fer que la vostra configuració sigui prou flexible per als dos entorns.
5. Què fa el --no-sandbox bandera fer a Titellaire?
6. El --no-sandbox flag desactiva la seguretat sandbox de Chrome, que permet que Puppeteer s'executi en serveis al núvol que no admeten el sandbox, però s'ha d'utilitzar amb precaució.
7. Per què necessito un costum cacheDirectory per al titellaire?
8. Establiment d'un costum cacheDirectory garanteix que Puppeteer descarregui binaris de Chrome a una ubicació coneguda, cosa que pot evitar errors durant el desplegament, especialment en entorns sense servidor.
9. Quina és la finalitat del networkidle2 opció a la goto mètode?
10. El networkidle2 l'opció espera fins que no hi hagi més de dues connexions de xarxa actives. Això és útil per capturar una pàgina completament carregada i gestionar contingut dinàmic.
11. Pot Puppeteer funcionar sense una versió de Chrome especificada?
12. Sí, però es recomana especificar executablePath i assegureu-vos que es pugui accedir a una versió compatible de Chrome per obtenir resultats coherents a les configuracions del núvol.
13. Com puc gestionar la memòria cau de Puppeteer en diferents entorns?
14. Podeu especificar un universal cacheDirectory en el .puppeteerrc.cjs fitxer, permetent a Puppeteer trobar binaris de Chrome a plataformes com Vercel i Heroku.
15. És puppeteer-core diferent de puppeteer?
16. Sí, puppeteer-core exclou Chrome agrupat per reduir la mida, de manera que haureu d'especificar un binari de Chrome. El ple puppeteer El paquet inclou Chrome automàticament.
17. Què he de fer si Puppeteer és lent en entorns al núvol?
18. Optimitzant viewport configuració i desactivar opcions innecessàries com devtools pot millorar el rendiment en entorns amb recursos limitats.
19. Puppeteer és compatible amb tots els proveïdors de núvol?
20. En general, sí, però cada proveïdor pot tenir requisits únics. Ús de configuracions compatibles amb el núvol com --no-sandbox garanteix una millor compatibilitat.

Reflexions finals sobre com fer que Titellaire s'executi a Vercel

La implementació correcta de Puppeteer a Vercel requereix entendre les necessitats específiques de configuració de Chrome. Especificant opcions de llançament i configurar correctament els camins de la memòria cau de Puppeteer ajuda a evitar el frustrant error "No s'ha pogut trobar Chrome". Aquests ajustos garanteixen que Puppeteer funcioni de manera fiable tant en entorns locals com en núvol. 🚀

Un cop adapteu aquestes solucions al vostre projecte, la captura de captures de pantalla a partir d'URL proporcionats per l'usuari es fa perfecta, permetent aplicacions web més dinàmiques. Amb una configuració adequada, Puppeteer segueix sent una eina inestimable per a l'automatització i el raspat web, fins i tot en plataformes sense servidor com Vercel.