Vercel Dağıtımında 'Chrome Bulunamadı (ver. 130.0.6723.116)' Puppeteer Chrome Hatasını Onarma

1. Çözüm: Puppeteer'ı Chrome'u Vercel'e Doğru Şekilde Yükleyecek Şekilde Yapılandırma

Bu Node.js tabanlı arka uç çözümü, Chrome'un doğru şekilde yüklenmesini sağlamak için Puppeteer'ın önbellek yolunu ve yükleme komutlarını yapılandırır.

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. Çözüm: Vercel için .puppeteerrc.cjs Dosyasıyla Özel Kuklacı Yapılandırması

Bu çözüm, Puppeteer'ın yapılandırma dosyasını (.puppeteerrc.cjs) Chrome önbellek yolunu belirleyecek ve Vercel'in dosya yapısıyla uyumluluğu sağlayacak şekilde ayarlar.

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. Çözüm: Puppeteer için package.json'da Ortam Değişkenlerini ve Komut Dosyalarını Uygulama

Bu yaklaşım şunları değiştirir: paket.json Belirli Chrome ikili dosyalarını yüklemek ve dağıtım sırasında Puppeteer yapılandırmalarını otomatik olarak ayarlamak için dosya.

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

Kuklacı Ekran Görüntüsü İşlevselliği için Birim Testi

Bu Node.js Mocha test komut dosyası, Puppeteer'ın çeşitli ortamlardaki bir URL'den ekran görüntüsü yakalama becerisini doğrular.

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

Kuklacı ve Bulut Dağıtımları Hakkında Sık Sorulan Sorular

1. Bulut platformlarında neden "Chrome bulunamadı" hataları alıyorum?
2. Bu hatalar genellikle bulut platformlarının varsayılan olarak Chrome ikili dosyasının tamamını içermemesi nedeniyle ortaya çıkar. Bunu belirterek düzeltebilirsiniz executablePath Puppeteer kurulumunuzda.
3. Puppeteer'ın hem yerel hem de bulut ortamlarda çalışmasını nasıl sağlarım?
4. Kullanma executablePath Ve args gibi bulut dostu bayraklarla --no-sandbox kurulumunuzu her iki ortam için de yeterince esnek hale getirebilir.
5. Ne yapar --no-sandbox Puppeteer'da bayrak ne işe yarar?
6. --no-sandbox flag, Puppeteer'ın korumalı alanı desteklemeyen bulut hizmetlerinde çalışmasına olanak tanıyan Chrome'un korumalı alan güvenliğini devre dışı bırakır ancak dikkatli kullanılmalıdır.
7. Neden özel bir şeye ihtiyacım var? cacheDirectory Kuklacı için mi?
8. Özel ayarlama cacheDirectory Puppeteer'ın Chrome ikili dosyalarını bilinen bir konuma indirmesini sağlar; bu, özellikle sunucusuz ortamlarda dağıtım sırasında hataları önleyebilir.
9. Amacı nedir? networkidle2 seçeneğindeki goto yöntem?
10. networkidle2 seçeneği ikiden fazla etkin ağ bağlantısı kalmayıncaya kadar bekler. Bu, tam olarak yüklenmiş bir sayfayı yakalamak ve dinamik içeriği işlemek için kullanışlıdır.
11. Puppeteer belirli bir Chrome sürümü olmadan çalışabilir mi?
12. Evet, ancak belirtmeniz önerilir executablePath ve bulut kurulumlarında tutarlı sonuçlar elde etmek için uyumlu bir Chrome sürümünün erişilebilir olduğundan emin olun.
13. Puppeteer önbelleğini farklı ortamlarda nasıl yönetirim?
14. Bir evrensel belirtebilirsiniz cacheDirectory içinde .puppeteerrc.cjs Puppeteer'ın Vercel ve Heroku gibi platformlarda Chrome ikili dosyalarını bulmasına olanak tanıyan dosya.
15. öyle mi puppeteer-core farklı puppeteer?
16. Evet, puppeteer-core boyutu küçültmek için paket halindeki Chrome'u hariç tutar; dolayısıyla bir Chrome ikili programı belirtmeniz gerekir. Tam puppeteer paket Chrome'u otomatik olarak içerir.
17. Puppeteer bulut ortamlarında yavaşsa ne yapmalıyım?
18. Optimize etme viewport ayarları ve gibi gereksiz seçenekleri devre dışı bırakma devtools Kaynakların kısıtlı olduğu ortamlarda performansı artırabilir.
19. Puppeteer tüm bulut sağlayıcılarıyla uyumlu mu?
20. Genel olarak evet, ancak her sağlayıcının kendine özgü gereksinimleri olabilir. Gibi bulut dostu ayarları kullanma --no-sandbox daha iyi uyumluluk sağlar.

Kuklacının Vercel'de Çalıştırılmasına İlişkin Son Düşünceler

Puppeteer'ı Vercel'de başarılı bir şekilde dağıtmak, Chrome'a ​​​​özel kurulum ihtiyaçlarının anlaşılmasını gerektirir. Belirtiyorum başlatma seçenekleri ve Puppeteer'ın önbellek yollarını doğru şekilde yapılandırmak sinir bozucu "Chrome bulunamadı" hatasını önlemeye yardımcı olur. Bu ayarlamalar, Puppeteer'ın hem yerel hem de bulut ortamlarında güvenilir bir şekilde çalışmasını sağlar. 🚀

Bu çözümleri projenize uyarladığınızda, kullanıcı tarafından sağlanan URL'lerden ekran görüntüleri yakalamak sorunsuz hale gelir ve daha dinamik web uygulamalarına olanak tanır. Doğru kurulumla Puppeteer, Vercel gibi sunucusuz platformlarda bile otomasyon ve web kazıma için paha biçilmez bir araç olmaya devam ediyor.