Επιδιόρθωση του σφάλματος "Δεν ήταν δυνατή η εύρεση του Chrome (έκδοση 130.0.6723.116)" Puppeteer Chrome κατά την ανάπτυξη του Vercel

Λύση 1: Διαμόρφωση του Puppeteer για σωστή εγκατάσταση του Chrome στο Vercel

Αυτή η λύση υποστήριξης που βασίζεται στο Node.js διαμορφώνει τη διαδρομή προσωρινής μνήμης και τις εντολές εγκατάστασης του Puppeteer για να διασφαλίσει ότι το Chrome εγκαθίσταται σωστά.

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: Προσαρμοσμένη διαμόρφωση Puppeteer για Vercel με αρχείο .puppeteerrc.cjs

Αυτή η λύση προσαρμόζει το αρχείο διαμόρφωσης του Puppeteer (.puppeteerrc.cjs) για να καθορίσει τη διαδρομή προσωρινής μνήμης του Chrome και να διασφαλίσει τη συμβατότητα με τη δομή του αρχείου του 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'],
};

Λύση 3: Εφαρμογή μεταβλητών περιβάλλοντος και σεναρίων στο package.json για Puppeteer

Αυτή η προσέγγιση τροποποιεί το πακέτο.json αρχείο για να εγκαταστήσετε συγκεκριμένα δυαδικά αρχεία του Chrome και να ρυθμίσετε αυτόματα τις διαμορφώσεις Puppeteer κατά την ανάπτυξη.

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

Δοκιμή μονάδας για Λειτουργικότητα Στιγμιότυπου Κουκλοθέατρου

Αυτό το σενάριο δοκιμής Node.js Mocha επαληθεύει την ικανότητα του Puppeteer να καταγράφει ένα στιγμιότυπο οθόνης από μια διεύθυνση URL σε διάφορα περιβάλλοντα.

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

Συνήθεις ερωτήσεις σχετικά με το Puppeteer και το Cloud Deployments

1. Γιατί λαμβάνω σφάλματα "Δεν ήταν δυνατή η εύρεση του Chrome" σε πλατφόρμες cloud;
2. Αυτά τα σφάλματα εμφανίζονται συχνά επειδή οι πλατφόρμες cloud δεν περιλαμβάνουν το πλήρες δυαδικό αρχείο Chrome από προεπιλογή. Μπορείτε να το διορθώσετε προσδιορίζοντας executablePath στη ρύθμιση του Puppeteer.
3. Πώς μπορώ να διασφαλίσω ότι το Puppeteer λειτουργεί τόσο σε τοπικό όσο και σε περιβάλλον cloud;
4. Χρησιμοποιώντας executablePath και args με σημαίες φιλικές προς το σύννεφο όπως --no-sandbox μπορεί να κάνει την εγκατάσταση σας αρκετά ευέλικτη και για τα δύο περιβάλλοντα.
5. Τι κάνει το --no-sandbox σημαία κάνω στο Puppeteer;
6. Ο --no-sandbox Η σημαία απενεργοποιεί την ασφάλεια sandbox του Chrome, η οποία επιτρέπει στο Puppeteer να εκτελείται σε υπηρεσίες cloud που δεν υποστηρίζουν sandboxing, αλλά θα πρέπει να χρησιμοποιείται με προσοχή.
7. Γιατί χρειάζομαι ένα έθιμο cacheDirectory για τον Κουκλοπαίκτη;
8. Ορισμός συνήθειας cacheDirectory διασφαλίζει ότι το Puppeteer πραγματοποιεί λήψη των δυαδικών αρχείων του Chrome σε μια γνωστή τοποθεσία, η οποία μπορεί να αποτρέψει σφάλματα κατά την ανάπτυξη, ειδικά σε περιβάλλοντα χωρίς διακομιστή.
9. Ποιος είναι ο σκοπός του networkidle2 επιλογή στο goto μέθοδος;
10. Ο networkidle2 Η επιλογή περιμένει μέχρι να μην υπάρχουν περισσότερες από δύο ενεργές συνδέσεις δικτύου. Αυτό είναι χρήσιμο για τη λήψη μιας πλήρως φορτωμένης σελίδας και το χειρισμό δυναμικού περιεχομένου.
11. Μπορεί το Puppeteer να λειτουργήσει χωρίς μια καθορισμένη έκδοση του Chrome;
12. Ναι, αλλά συνιστάται να προσδιορίσετε executablePath και βεβαιωθείτε ότι είναι προσβάσιμη μια συμβατή έκδοση Chrome για σταθερά αποτελέσματα στις ρυθμίσεις του cloud.
13. Πώς μπορώ να διαχειριστώ την προσωρινή μνήμη Puppeteer σε διαφορετικά περιβάλλοντα;
14. Μπορείτε να καθορίσετε ένα καθολικό cacheDirectory στο .puppeteerrc.cjs αρχείο, επιτρέποντας στο Puppeteer να βρίσκει δυαδικά αρχεία Chrome σε πλατφόρμες όπως το Vercel και το Heroku.
15. Είναι puppeteer-core διαφορετικό από puppeteer?
16. Ναί, puppeteer-core εξαιρεί το πακέτο Chrome για μείωση του μεγέθους, επομένως θα χρειαστεί να καθορίσετε ένα δυαδικό Chrome. Το γεμάτο puppeteer Το πακέτο περιλαμβάνει αυτόματα το Chrome.
17. Τι πρέπει να κάνω εάν το Puppeteer είναι αργό σε περιβάλλοντα cloud;
18. Βελτιστοποίηση viewport ρυθμίσεις και απενεργοποίηση περιττών επιλογών όπως devtools μπορεί να βελτιώσει την απόδοση σε περιβάλλοντα με περιορισμένους πόρους.
19. Είναι το Puppeteer συμβατό με όλους τους παρόχους cloud;
20. Γενικά, ναι, αλλά κάθε πάροχος μπορεί να έχει μοναδικές απαιτήσεις. Χρησιμοποιώντας ρυθμίσεις φιλικές προς το cloud, όπως --no-sandbox εξασφαλίζει καλύτερη συμβατότητα.

Τελικές σκέψεις σχετικά με το να τρέξει ο κουκλοπαίκτης στο Vercel

Η επιτυχής ανάπτυξη του Puppeteer στο Vercel απαιτεί την κατανόηση των συγκεκριμένων αναγκών εγκατάστασης για το Chrome. Προσδιορίζοντας επιλογές εκκίνησης και η σωστή διαμόρφωση των διαδρομών προσωρινής μνήμης του Puppeteer συμβάλλει στην αποφυγή του ενοχλητικού σφάλματος "Δεν ήταν δυνατή η εύρεση του Chrome". Αυτές οι προσαρμογές διασφαλίζουν ότι το Puppeteer λειτουργεί αξιόπιστα τόσο σε τοπικό όσο και σε περιβάλλον cloud. 🚀

Μόλις προσαρμόσετε αυτές τις λύσεις στο έργο σας, η λήψη στιγμιότυπων οθόνης από διευθύνσεις URL που παρέχονται από τον χρήστη γίνεται απρόσκοπτη, επιτρέποντας πιο δυναμικές εφαρμογές Ιστού. Με τη σωστή ρύθμιση, το Puppeteer παραμένει ένα ανεκτίμητο εργαλείο για αυτοματισμό και απόξεση ιστού, ακόμη και σε πλατφόρμες χωρίς διακομιστές όπως το Vercel.