Puppeteer Chrome -virheen (versio 130.0.6723.116) korjaaminen Vercelin käyttöönotossa

Ratkaisu 1: Puppeteerin määrittäminen asentamaan Chrome oikein Verceliin

Tämä Node.js-pohjainen taustaratkaisu määrittää Puppeteerin välimuistipolun ja asennuskomennot varmistaakseen, että Chrome asennetaan oikein.

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;

Ratkaisu 2: Mukautettu Puppeteer-kokoonpano Vercelille .puppeteerrc.cjs-tiedostolla

Tämä ratkaisu säätää Puppeteerin määritystiedostoa (.puppeteerrc.cjs) määrittääkseen Chromen välimuistipolun ja varmistaakseen yhteensopivuuden Vercelin tiedostorakenteen kanssa.

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

Ratkaisu 3: Ympäristömuuttujien ja komentosarjojen käyttöönotto paketti.jsonissa Puppeteerille

Tämä lähestymistapa muuttaa package.json tiedosto asentaaksesi tietyt Chromen binaarit ja määrittääksesi Puppeteer-määritykset automaattisesti käyttöönoton aikana.

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

Nukketeatterin näyttökuvan toiminnallisuuden yksikkötesti

Tämä Node.js Mocha -testiohjelma varmistaa, että Puppeteer pystyy kaappaamaan kuvakaappauksen URL-osoitteesta eri ympäristöissä.

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

Yleisiä kysymyksiä Puppeteer- ja Cloud-käyttöönotoista

1. Miksi saan "Chromea ei löydy" -virheitä pilvialustoissa?
2. Nämä virheet ilmenevät usein, koska pilviympäristöt eivät sisällä oletusarvoisesti täyttä Chromen binaaria. Voit korjata tämän määrittämällä executablePath Nukketeatteri-asetuksissasi.
3. Kuinka varmistan, että Puppeteer toimii sekä paikallisissa että pilviympäristöissä?
4. Käyttämällä executablePath ja args pilviystävällisillä lipuilla, kuten --no-sandbox voi tehdä asetuksistasi riittävän joustavia molempiin ympäristöihin.
5. Mitä tekee --no-sandbox lippu tehdä Nukketeatterissa?
6. The --no-sandbox lippu poistaa käytöstä Chromen hiekkalaatikkosuojauksen, jonka ansiosta Puppeteer voi toimia pilvipalveluissa, jotka eivät tue hiekkalaatikkoa, mutta sitä tulee käyttää varoen.
7. Miksi tarvitsen mukautusta cacheDirectory Puppeteerille?
8. Mukautetun asetuksen määrittäminen cacheDirectory varmistaa, että Puppeteer lataa Chromen binaarit tunnettuun sijaintiin, mikä voi estää virheet käyttöönoton aikana, erityisesti palvelimettomissa ympäristöissä.
9. Mikä on tarkoitus networkidle2 vaihtoehto kohdassa goto menetelmä?
10. The networkidle2 vaihtoehto odottaa, kunnes aktiivisia verkkoyhteyksiä on enintään kaksi. Tästä on hyötyä täysin ladatun sivun kaappaamiseen ja dynaamisen sisällön käsittelyyn.
11. Voiko Puppeteer toimia ilman määritettyä Chrome-versiota?
12. Kyllä, mutta on suositeltavaa määrittää executablePath ja varmista, että yhteensopiva Chrome-versio on käytettävissä, jotta pilviasennusten tulokset ovat yhdenmukaisia.
13. Kuinka hallitsen Puppeteer-välimuistia eri ympäristöissä?
14. Voit määrittää universaalin cacheDirectory in .puppeteerrc.cjs tiedosto, jonka avulla Puppeteer löytää Chromen binaarit eri alustoilla, kuten Vercel ja Heroku.
15. Is puppeteer-core erilainen kuin puppeteer?
16. Kyllä, puppeteer-core ei sisällä niputettua Chromea koon pienentämiseksi, joten sinun on määritettävä Chrome-binaari. Täysi puppeteer paketti sisältää Chromen automaattisesti.
17. Mitä minun pitäisi tehdä, jos Puppeteer on hidas pilviympäristöissä?
18. Optimointi viewport asetukset ja tarpeettomat asetukset, kuten devtools voi parantaa suorituskykyä resurssirajoitteisissa ympäristöissä.
19. Onko Puppeteer yhteensopiva kaikkien pilvipalveluntarjoajien kanssa?
20. Yleensä kyllä, mutta jokaisella palveluntarjoajalla voi olla ainutlaatuisia vaatimuksia. Käyttämällä pilviystävällisiä asetuksia, kuten --no-sandbox varmistaa paremman yhteensopivuuden.

Viimeisiä ajatuksia Puppeteerin saamisesta juoksemaan Vercelissä

Puppeteerin onnistunut käyttöönotto Vercelissä edellyttää Chromen erityisten asennustarpeiden ymmärtämistä. Määritellään käynnistysvaihtoehdot ja Puppeteerin välimuistipolkujen oikea määrittäminen auttaa estämään turhauttavan "Chromea ei löydy" -virheen. Nämä säädöt varmistavat, että Puppeteer toimii luotettavasti sekä paikallisissa että pilviympäristöissä. 🚀

Kun mukautat nämä ratkaisut projektiisi, kuvakaappausten ottaminen käyttäjien antamista URL-osoitteista käy saumattomaksi, mikä mahdollistaa dynaamisemman verkkosovelluksen. Oikein asennettuna Puppeteer on edelleen korvaamaton työkalu automaatioon ja verkkojen kaapimiseen jopa palvelimettomilla alustoilla, kuten Vercel.