Reparerar "Kunde inte hitta Chrome (ver. 130.0.6723.116)" Puppeteer Chrome-felet vid Vercel-distribution

Lösning 1: Konfigurera Puppeteer för att installera Chrome korrekt på Vercel

Denna Node.js-baserade backend-lösning konfigurerar Puppeteers cachesökväg och installationskommandon för att säkerställa att Chrome installeras korrekt.

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ösning 2: Anpassad Puppeteer-konfiguration för Vercel med en .puppeteerrc.cjs-fil

Den här lösningen justerar Puppeteers konfigurationsfil (.puppeteerrc.cjs) för att specificera Chromes cachesökväg och säkerställa kompatibilitet med Vercels filstruktur.

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ösning 3: Implementera miljövariabler och skript i package.json för Puppeteer

Detta tillvägagångssätt modifierar package.json fil för att installera specifika Chrome-binärfiler och ställa in Puppeteer-konfigurationer automatiskt under distributionen.

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

Enhetstest för Puppeteer Skärmdumpfunktionalitet

Detta Node.js Mocha-testskript verifierar Puppeteers förmåga att ta en skärmdump från en URL i olika miljöer.

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

Vanliga frågor om Puppeteer- och molninstallationer

1. Varför får jag felmeddelandet "Kunde inte hitta Chrome" på molnplattformar?
2. Dessa fel uppstår ofta eftersom molnplattformar inte inkluderar hela Chrome-binären som standard. Du kan fixa detta genom att specificera executablePath i din Puppeteer-inställning.
3. Hur säkerställer jag att Puppeteer fungerar i både lokala och molnmiljöer?
4. Använder executablePath och args med molnvänliga flaggor som --no-sandbox kan göra din installation tillräckligt flexibel för båda miljöerna.
5. Vad gör --no-sandbox flagga gör i Puppeteer?
6. De --no-sandbox flagga inaktiverar Chromes sandlådesäkerhet, vilket gör att Puppeteer kan köras på molntjänster som inte stöder sandlåde, men det bör användas med försiktighet.
7. Varför behöver jag en anpassad cacheDirectory för Puppeer?
8. Ange en anpassad cacheDirectory ser till att Puppeteer laddar ner Chrome-binärfiler till en känd plats, vilket kan förhindra fel under driftsättning, särskilt i serverlösa miljöer.
9. Vad är syftet med networkidle2 alternativet i goto metod?
10. De networkidle2 alternativet väntar tills det inte finns fler än två aktiva nätverksanslutningar. Detta är användbart för att fånga en fulladdad sida och hantera dynamiskt innehåll.
11. Kan Puppeteer fungera utan en specificerad Chrome-version?
12. Ja, men det rekommenderas att specificera executablePath och se till att en kompatibel Chrome-version är tillgänglig för konsekventa resultat i molninställningar.
13. Hur hanterar jag Puppeteer-cache i olika miljöer?
14. Du kan ange en universell cacheDirectory i .puppeteerrc.cjs fil, vilket gör att Puppeteer kan hitta Chrome-binärfiler över plattformar som Vercel och Heroku.
15. är puppeteer-core olik puppeteer?
16. Ja, puppeteer-core exkluderar medföljande Chrome för att minska storleken, så du måste ange en Chrome-binär. Den fulla puppeteer paketet innehåller Chrome automatiskt.
17. Vad ska jag göra om Puppeteer är långsam i molnmiljöer?
18. Optimerande viewport inställningar och inaktivera onödiga alternativ som devtools kan förbättra prestanda i miljöer med begränsade resurser.
19. Är Puppeteer kompatibel med alla molnleverantörer?
20. Generellt sett ja, men varje leverantör kan ha unika krav. Använda molnvänliga inställningar som --no-sandbox säkerställer bättre kompatibilitet.

Sista tankar om att få Puppeteer att köra på Vercel

Att lyckas implementera Puppeteer på Vercel kräver förståelse för de specifika installationsbehoven för Chrome. Specificerar startalternativ och korrekt konfigurering av Puppeteers cache-vägar hjälper till att förhindra det frustrerande felet "Kunde inte hitta Chrome". Dessa justeringar säkerställer att Puppeteer fungerar tillförlitligt i både lokala och molnmiljöer. 🚀

När du väl anpassar dessa lösningar till ditt projekt blir det sömlöst att ta skärmdumpar från användarangivna webbadresser, vilket möjliggör mer dynamiska webbapplikationer. Med rätt inställning förblir Puppeteer ett ovärderligt verktyg för automatisering och webbskrapning, även på serverlösa plattformar som Vercel.