Memperbaiki Kesalahan Dalang Chrome 'Tidak Dapat Menemukan Chrome (ver. 130.0.6723.116)' pada Penerapan Vercel

Solusi 1: Mengonfigurasi Dalang untuk Memasang Chrome dengan Benar di Vercel

Solusi backend berbasis Node.js ini mengonfigurasi jalur cache Puppeteer dan perintah pemasangan untuk memastikan Chrome dipasang dengan benar.

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;

Solusi 2: Konfigurasi Dalang Kustom untuk Vercel dengan File .puppeteerrc.cjs

Solusi ini menyesuaikan file konfigurasi Puppeteer (.puppeteerrc.cjs) untuk menentukan jalur cache Chrome dan memastikan kompatibilitas dengan struktur file 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'],
};

Solusi 3: Menerapkan Variabel dan Skrip Lingkungan di package.json untuk Puppeteer

Pendekatan ini memodifikasi paket.json file untuk memasang biner Chrome tertentu dan menyiapkan konfigurasi Puppeteer secara otomatis selama penerapan.

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

Tes Unit untuk Fungsi Tangkapan Layar Dalang

Skrip pengujian Mocha Node.js ini memverifikasi kemampuan Puppeteer untuk mengambil tangkapan layar dari URL di berbagai lingkungan.

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

Pertanyaan Umum Tentang Dalang dan Penerapan Cloud

1. Mengapa saya mendapatkan kesalahan “Tidak dapat menemukan Chrome” di platform cloud?
2. Kesalahan ini sering terjadi karena platform cloud tidak menyertakan biner Chrome lengkap secara default. Anda dapat memperbaikinya dengan menentukan executablePath dalam pengaturan Dalang Anda.
3. Bagaimana cara memastikan Dalang berfungsi di lingkungan lokal dan cloud?
4. Menggunakan executablePath Dan args dengan bendera ramah cloud seperti --no-sandbox dapat membuat pengaturan Anda cukup fleksibel untuk kedua lingkungan.
5. Apa artinya --no-sandbox bendera lakukan di Dalang?
6. Itu --no-sandbox bendera menonaktifkan keamanan kotak pasir Chrome, yang memungkinkan Puppeteer berjalan di layanan cloud yang tidak mendukung kotak pasir, namun harus digunakan dengan hati-hati.
7. Mengapa saya memerlukan adat cacheDirectory untuk Dalang?
8. Menetapkan kebiasaan cacheDirectory memastikan Puppeteer mengunduh biner Chrome ke lokasi yang diketahui, yang dapat mencegah kesalahan selama penerapan, terutama di lingkungan tanpa server.
9. Apa tujuan dari networkidle2 pilihan di goto metode?
10. Itu networkidle2 opsi menunggu hingga tidak ada lebih dari dua koneksi jaringan yang aktif. Ini berguna untuk menangkap halaman yang dimuat penuh dan menangani konten dinamis.
11. Bisakah Dalang bekerja tanpa versi Chrome yang ditentukan?
12. Ya, tapi disarankan untuk menentukannya executablePath dan memastikan versi Chrome yang kompatibel dapat diakses untuk mendapatkan hasil yang konsisten dalam penyiapan cloud.
13. Bagaimana cara mengelola cache Puppeteer di lingkungan yang berbeda?
14. Anda dapat menentukan yang universal cacheDirectory di .puppeteerrc.cjs file, memungkinkan Puppeteer menemukan biner Chrome di seluruh platform seperti Vercel dan Heroku.
15. Adalah puppeteer-core berbeda dari puppeteer?
16. Ya, puppeteer-core tidak termasuk Chrome yang dibundel untuk mengurangi ukuran, jadi Anda harus menentukan biner Chrome. Penuh puppeteer paket termasuk Chrome secara otomatis.
17. Apa yang harus saya lakukan jika Puppeteer lambat di lingkungan cloud?
18. Mengoptimalkan viewport pengaturan dan menonaktifkan opsi yang tidak diperlukan seperti devtools dapat meningkatkan kinerja di lingkungan dengan sumber daya terbatas.
19. Apakah Puppeteer kompatibel dengan semua penyedia cloud?
20. Umumnya ya, tetapi setiap penyedia mungkin memiliki persyaratan unik. Menggunakan pengaturan ramah cloud seperti --no-sandbox memastikan kompatibilitas yang lebih baik.

Pemikiran Terakhir tentang Membuat Dalang Berlari di Vercel

Keberhasilan penerapan Puppeteer di Vercel memerlukan pemahaman tentang kebutuhan penyiapan khusus untuk Chrome. Menentukan opsi peluncuran dan mengonfigurasi jalur cache Puppeteer dengan benar membantu mencegah kesalahan "Tidak dapat menemukan Chrome" yang membuat frustrasi. Penyesuaian ini memastikan Puppeteer berfungsi dengan andal di lingkungan lokal dan cloud. 🚀

Setelah Anda menyesuaikan solusi ini dengan proyek Anda, pengambilan tangkapan layar dari URL yang disediakan pengguna menjadi lancar, memungkinkan aplikasi web yang lebih dinamis. Dengan pengaturan yang tepat, Puppeteer tetap menjadi alat yang sangat berharga untuk otomatisasi dan web scraping, bahkan pada platform tanpa server seperti Vercel.