Membaiki Ralat Chrome Puppeteer 'Tidak Dapat Cari Chrome (ver. 130.0.6723.116)' pada Penggunaan Vercel

Penyelesaian 1: Mengkonfigurasi Puppeteer untuk Memasang Chrome dengan Betul pada Vercel

Penyelesaian bahagian belakang berasaskan Node.js ini mengkonfigurasi laluan cache dan arahan pemasangan Puppeteer untuk memastikan Chrome dipasang dengan betul.

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;

Penyelesaian 2: Konfigurasi Puppeteer Tersuai untuk Vercel dengan Fail .puppeteerrc.cjs

Penyelesaian ini melaraskan fail konfigurasi Puppeteer (.puppeteerrc.cjs) untuk menentukan laluan cache Chrome dan memastikan keserasian dengan struktur fail 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'],
};

Penyelesaian 3: Melaksanakan Pembolehubah Persekitaran dan Skrip dalam package.json untuk Puppeteer

Pendekatan ini mengubah suai package.json fail untuk memasang binari Chrome tertentu dan menyediakan konfigurasi Puppeteer secara automatik semasa penggunaan.

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

Ujian Unit untuk Kefungsian Tangkapan Skrin Puppeteer

Skrip ujian Node.js Mocha ini mengesahkan keupayaan Puppeteer untuk menangkap tangkapan skrin daripada URL dalam pelbagai persekitaran.

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

Soalan Lazim Mengenai Puppeteer dan Cloud Deployment

1. Mengapakah saya mendapat ralat "Tidak dapat mencari Chrome" pada platform awan?
2. Ralat ini sering berlaku kerana platform awan tidak menyertakan binari Chrome penuh secara lalai. Anda boleh membetulkannya dengan menyatakan executablePath dalam persediaan Puppeteer anda.
3. Bagaimanakah cara saya memastikan Puppeteer berfungsi pada kedua-dua persekitaran tempatan dan awan?
4. menggunakan executablePath dan args dengan bendera mesra awan seperti --no-sandbox boleh menjadikan persediaan anda cukup fleksibel untuk kedua-dua persekitaran.
5. Apa yang --no-sandbox bendera lakukan dalam Puppeteer?
6. The --no-sandbox flag melumpuhkan keselamatan kotak pasir Chrome, yang membolehkan Puppeteer berjalan pada perkhidmatan awan yang tidak menyokong kotak pasir, tetapi ia harus digunakan dengan berhati-hati.
7. Mengapa saya memerlukan adat cacheDirectory untuk Puppeteer?
8. Menetapkan adat cacheDirectory memastikan bahawa Puppeteer memuat turun binari Chrome ke lokasi yang diketahui, yang boleh menghalang ralat semasa penggunaan, terutamanya dalam persekitaran tanpa pelayan.
9. Apakah tujuan networkidle2 pilihan dalam goto kaedah?
10. The networkidle2 pilihan menunggu sehingga tidak ada lebih daripada dua sambungan rangkaian aktif. Ini berguna untuk menangkap halaman yang dimuatkan sepenuhnya dan mengendalikan kandungan dinamik.
11. Bolehkah Puppeteer berfungsi tanpa versi Chrome yang ditentukan?
12. Ya, tetapi disyorkan untuk menyatakan executablePath dan memastikan versi Chrome yang serasi boleh diakses untuk hasil yang konsisten dalam persediaan awan.
13. Bagaimanakah cara saya menguruskan cache Puppeteer merentas persekitaran yang berbeza?
14. Anda boleh menentukan universal cacheDirectory dalam .puppeteerrc.cjs fail, membolehkan Puppeteer mencari binari Chrome merentas platform seperti Vercel dan Heroku.
15. Adakah puppeteer-core berbeza daripada puppeteer?
16. ya, puppeteer-core tidak termasuk Chrome yang digabungkan untuk mengurangkan saiz, jadi anda perlu menentukan perduaan Chrome. yang penuh puppeteer pakej termasuk Chrome secara automatik.
17. Apakah yang perlu saya lakukan jika Puppeteer lambat pada persekitaran awan?
18. Mengoptimumkan viewport tetapan dan melumpuhkan pilihan yang tidak diperlukan seperti devtools boleh meningkatkan prestasi dalam persekitaran yang terhad sumber.
19. Adakah Puppeteer serasi dengan semua penyedia awan?
20. Secara amnya, ya, tetapi setiap pembekal mungkin mempunyai keperluan unik. Menggunakan tetapan mesra awan seperti --no-sandbox memastikan keserasian yang lebih baik.

Pemikiran Akhir untuk Mendapatkan Puppeteer untuk Berlari di Vercel

Berjaya menggunakan Puppeteer pada Vercel memerlukan pemahaman keperluan persediaan khusus untuk Chrome. Menentukan pilihan pelancaran dan mengkonfigurasi laluan cache Puppeteer dengan betul membantu mengelakkan ralat "Tidak dapat mencari Chrome" yang mengecewakan. Pelarasan ini memastikan Puppeteer berfungsi dengan andal merentasi kedua-dua persekitaran tempatan dan awan. 🚀

Sebaik sahaja anda menyesuaikan penyelesaian ini kepada projek anda, menangkap tangkapan skrin daripada URL yang disediakan pengguna menjadi lancar, membolehkan aplikasi web yang lebih dinamik. Dengan persediaan yang betul, Puppeteer kekal sebagai alat yang tidak ternilai untuk automasi dan mengikis web, walaupun pada platform tanpa pelayan seperti Vercel.