Popravljanje napake Puppeteer Chrome »Ni bilo mogoče najti Chroma (različica 130.0.6723.116)« pri uvajanju Vercel

1. rešitev: Konfiguracija Puppeteerja za pravilno namestitev Chroma na Vercel

Ta zaledna rešitev, ki temelji na Node.js, konfigurira Puppeteerjevo pot predpomnilnika in ukaze za namestitev, da zagotovi pravilno namestitev Chroma.

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. rešitev: Konfiguracija Puppeteer po meri za Vercel z datoteko .puppeteerrc.cjs

Ta rešitev prilagodi konfiguracijsko datoteko Puppeteerja (.puppeteerrc.cjs), da določi pot do predpomnilnika Chrome in zagotovi združljivost s strukturo datoteke 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'],
};

Rešitev 3: Implementacija spremenljivk okolja in skriptov v package.json za Puppeteer

Ta pristop spreminja package.json datoteko za namestitev določenih binarnih datotek Chrome in samodejno nastavitev konfiguracij Puppeteer med uvajanjem.

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

Preizkus enote za funkcijo posnetka zaslona Puppeteer

Ta preskusni skript Node.js Mocha preverja sposobnost Puppeteerja, da zajame posnetek zaslona iz URL-ja v različnih okoljih.

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

Pogosta vprašanja o uvedbah Puppeteer in Cloud

1. Zakaj dobivam napake »Ni bilo mogoče najti Chroma« na platformah v oblaku?
2. Te napake se pogosto pojavljajo, ker platforme v oblaku privzeto ne vključujejo celotne Chromove dvojiške datoteke. To lahko popravite tako, da navedete executablePath v nastavitvah Puppeteerja.
3. Kako zagotovim, da Puppeteer deluje tako v lokalnem kot v oblačnem okolju?
4. Uporaba executablePath in args z oblakom prijaznimi zastavami, kot je --no-sandbox lahko vašo nastavitev naredi dovolj prilagodljivo za obe okolji.
5. Kaj pomeni --no-sandbox zastavo narediti v Puppeteerju?
6. The --no-sandbox zastavica onemogoči varnost Chromovega peskovnika, ki Puppeteerju omogoča zagon v storitvah v oblaku, ki ne podpirajo peskovnika, vendar ga je treba uporabljati previdno.
7. Zakaj potrebujem po meri cacheDirectory za Lutkarja?
8. Nastavitev po meri cacheDirectory zagotavlja, da Puppeteer prenese Chromove binarne datoteke na znano lokacijo, kar lahko prepreči napake med uvajanjem, zlasti v okoljih brez strežnikov.
9. Kakšen je namen networkidle2 možnost v goto metoda?
10. The networkidle2 možnost čaka, dokler nista več kot dve aktivni omrežni povezavi. To je uporabno za zajem popolnoma naložene strani in ravnanje z dinamično vsebino.
11. Ali lahko Puppeteer deluje brez določene različice Chroma?
12. Da, vendar je priporočljivo navesti executablePath in zagotovite, da je združljiva različica Chroma dostopna za dosledne rezultate pri nastavitvah v oblaku.
13. Kako upravljam predpomnilnik Puppeteer v različnih okoljih?
14. Določite lahko univerzalno cacheDirectory v .puppeteerrc.cjs datoteko, ki Puppeteerju omogoča iskanje Chromovih binarnih datotek na platformah, kot sta Vercel in Heroku.
15. je puppeteer-core drugačen od puppeteer?
16. da puppeteer-core izključuje priloženi Chrome, da zmanjša velikost, zato boste morali določiti Chromovo dvojiško datoteko. Polno puppeteer paket samodejno vključuje Chrome.
17. Kaj naj storim, če je Puppeteer počasen v oblačnih okoljih?
18. Optimizacija viewport nastavitve in onemogočanje nepotrebnih možnosti, kot je devtools lahko izboljša delovanje v okoljih z omejenimi viri.
19. Ali je Puppeteer združljiv z vsemi ponudniki oblakov?
20. Na splošno da, vendar ima lahko vsak ponudnik posebne zahteve. Uporaba oblaku prijaznih nastavitev, kot je --no-sandbox zagotavlja boljšo združljivost.

Končne misli o pripravi Puppeteerja na Vercel

Uspešna uvedba Puppeteerja na Vercelu zahteva razumevanje posebnih nastavitev za Chrome. Določanje možnosti zagona in pravilna konfiguracija poti predpomnilnika Puppeteer pomagata preprečiti frustrirajočo napako »Ni bilo mogoče najti Chroma«. Te prilagoditve zagotavljajo, da Puppeteer zanesljivo deluje v lokalnem in oblačnem okolju. 🚀

Ko te rešitve prilagodite svojemu projektu, postane zajemanje posnetkov zaslona iz URL-jev, ki jih posredujejo uporabniki, nemoteno, kar omogoča bolj dinamične spletne aplikacije. S pravilno nastavitvijo Puppeteer ostaja neprecenljivo orodje za avtomatizacijo in spletno strganje, tudi na brezstrežniških platformah, kot je Vercel.