A "Nem található Chrome (ver. 130.0.6723.116)" Puppeteer Chrome hiba javítása a Vercel telepítéskor

1. megoldás: A Puppeteer konfigurálása a Chrome megfelelő telepítéséhez a Vercelen

Ez a Node.js-alapú háttérmegoldás konfigurálja a Puppeteer gyorsítótárának elérési útját és a telepítési parancsokat, hogy biztosítsa a Chrome megfelelő telepítését.

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;

2. megoldás: Egyéni Puppeteer konfiguráció a Vercelhez .puppeteerrc.cjs fájllal

Ez a megoldás úgy módosítja a Puppeteer konfigurációs fájlját (.puppeteerrc.cjs), hogy megadja a Chrome gyorsítótár elérési útját, és biztosítsa a Vercel fájlstruktúrájával való kompatibilitást.

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

3. megoldás: Környezeti változók és szkriptek megvalósítása a package.json fájlban a Puppeteer számára

Ez a megközelítés módosítja a package.json fájlt bizonyos Chrome-binárisok telepítéséhez és a Puppeteer konfigurációk automatikus beállításához a telepítés során.

// 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 for Puppeteer Screenshot Funkcionalitás

Ez a Node.js Mocha tesztszkript igazolja, hogy a Puppeteer képes-e képernyőképet rögzíteni egy URL-ből különböző környezetekben.

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

Gyakori kérdések a Puppeteer és a Cloud telepítésekkel kapcsolatban

1. Miért kapok „A Chrome nem található” hibaüzenetet felhőplatformokon?
2. Ezek a hibák gyakran azért fordulnak elő, mert a felhőplatformok alapértelmezés szerint nem tartalmazzák a teljes Chrome bináris fájlt. Ezt megadásával javíthatja executablePath a Puppeteer beállításában.
3. Hogyan biztosíthatom, hogy a Puppeteer helyi és felhő környezetben is működjön?
4. Használata executablePath és args felhőbarát zászlókkal, mint --no-sandbox elég rugalmassá teheti a beállítást mindkét környezethez.
5. Mit jelent a --no-sandbox zászló csinálni a Puppeteerben?
6. A --no-sandbox A jelző letiltja a Chrome sandbox-biztonságát, amely lehetővé teszi, hogy a Puppeteer olyan felhőszolgáltatásokon futhasson, amelyek nem támogatják a sandboxot, de óvatosan kell használni.
7. Miért van szükségem szokásra cacheDirectory a Puppeteernek?
8. Egyéni beállítás cacheDirectory biztosítja, hogy a Puppeteer letöltse a Chrome bináris fájljait egy ismert helyre, ami megakadályozhatja a hibákat a telepítés során, különösen szerver nélküli környezetben.
9. Mi a célja a networkidle2 opció a goto módszer?
10. A networkidle2 opció megvárja, amíg nem lesz több mint két aktív hálózati kapcsolat. Ez hasznos a teljesen betöltött oldal rögzítéséhez és a dinamikus tartalom kezeléséhez.
11. Működhet a Puppeteer meghatározott Chrome-verzió nélkül?
12. Igen, de ajánlatos megadni executablePath és gondoskodjon arról, hogy kompatibilis Chrome-verzió álljon rendelkezésre a felhőbeállítások konzisztens eredményéhez.
13. Hogyan kezelhetem a Puppeteer gyorsítótárat a különböző környezetekben?
14. Megadhat egy univerzálisat cacheDirectory a .puppeteerrc.cjs fájl, amely lehetővé teszi a Puppeteer számára, hogy megtalálja a Chrome bináris fájljait olyan platformokon, mint a Vercel és a Heroku.
15. Is puppeteer-core különbözik attól puppeteer?
16. Igen, puppeteer-core kizárja a csomagban lévő Chrome-ot a méret csökkentése érdekében, ezért meg kell adnia egy Chrome bináris fájlt. A teljes puppeteer csomag automatikusan tartalmazza a Chrome-ot.
17. Mi a teendő, ha a Puppeteer lassú felhő környezetben?
18. Optimalizálás viewport beállításokat és letiltja a szükségtelen opciókat, mint pl devtools javíthatja a teljesítményt az erőforrások korlátozott környezetében.
19. A Puppeteer kompatibilis az összes felhőszolgáltatóval?
20. Általában igen, de minden szolgáltatónak egyedi követelményei lehetnek. Felhőbarát beállítások használata, mint pl --no-sandbox jobb kompatibilitást biztosít.

Utolsó gondolatok a Puppeteer futtatásáról Vercelen

A Puppeteer Vercelen való sikeres telepítéséhez meg kell értenie a Chrome speciális beállítási igényeit. Meghatározása indítási lehetőségek és a Puppeteer gyorsítótár-útvonalainak helyes konfigurálása segít megelőzni a frusztráló „Nem található Chrome” hibaüzenetet. Ezek a beállítások biztosítják a Puppeteer megbízható működését helyi és felhőkörnyezetben egyaránt. 🚀

Ha ezeket a megoldásokat projektjéhez igazítja, a képernyőképek készítése a felhasználók által megadott URL-ekről zökkenőmentessé válik, ami dinamikusabb webalkalmazásokat tesz lehetővé. Megfelelő beállítással a Puppeteer továbbra is felbecsülhetetlen értékű eszköz marad az automatizálásban és a webkaparásban, még olyan szerver nélküli platformokon is, mint a Vercel.