إصلاح خطأ "تعذر العثور على Chrome (الإصدار 130.0.6723.116)" في محرك الدمى Chrome عند نشر Vercel

الحل 1: تكوين محرك الدمى لتثبيت 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: تكوين محرك الدمى المخصص لـ 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 لمحرك الدمى

هذا النهج يعدل package.json لتثبيت ثنائيات Chrome محددة وإعداد تكوينات محرك الدمى تلقائيًا أثناء النشر.

// 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 من قدرة محرك الدمى على التقاط لقطة شاشة من عنوان 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();
            });
    });
});

أسئلة شائعة حول عمليات نشر الدمى والسحابة

1. لماذا تظهر لي أخطاء "تعذر العثور على Chrome" على الأنظمة الأساسية السحابية؟
2. تحدث هذه الأخطاء غالبًا لأن الأنظمة الأساسية السحابية لا تتضمن برنامج Chrome الثنائي الكامل افتراضيًا. يمكنك إصلاح هذا عن طريق تحديد executablePath في إعداد محرك الدمى الخاص بك.
3. كيف أتأكد من أن Puppeteer يعمل في البيئات المحلية والسحابية؟
4. استخدام executablePath و args مع أعلام صديقة للسحابة مثل --no-sandbox يمكن أن يجعل الإعداد الخاص بك مرنًا بدرجة كافية لكلتا البيئتين.
5. ماذا يفعل --no-sandbox العلم تفعل في محرك الدمى؟
6. ال --no-sandbox تعمل العلامة على تعطيل أمان وضع الحماية في Chrome، والذي يسمح لـ Puppeteer بالعمل على الخدمات السحابية التي لا تدعم وضع الحماية، ولكن يجب استخدامه بحذر.
7. لماذا أحتاج إلى العرف cacheDirectory لمحرك الدمى؟
8. وضع مخصص cacheDirectory يضمن أن يقوم Puppeteer بتنزيل ثنائيات Chrome إلى موقع معروف، مما قد يمنع الأخطاء أثناء النشر، خاصة في البيئات التي لا تحتوي على خادم.
9. ما هو الغرض من networkidle2 الخيار في goto طريقة؟
10. ال networkidle2 ينتظر الخيار حتى لا يكون هناك أكثر من اتصالين نشطين بالشبكة. يعد هذا مفيدًا لالتقاط صفحة محملة بالكامل ومعالجة المحتوى الديناميكي.
11. هل يمكن أن يعمل Puppeteer بدون إصدار Chrome محدد؟
12. نعم، ولكن يوصى بتحديدها executablePath وتأكد من إمكانية الوصول إلى إصدار Chrome متوافق للحصول على نتائج متسقة في إعدادات السحابة.
13. كيف يمكنني إدارة ذاكرة التخزين المؤقت لمحرك الدمى عبر بيئات مختلفة؟
14. يمكنك تحديد عالمي cacheDirectory في .puppeteerrc.cjs الملف، مما يسمح لـ Puppeteer بالعثور على ثنائيات Chrome عبر الأنظمة الأساسية مثل Vercel وHeroku.
15. يكون puppeteer-core يختلف عن puppeteer؟
16. نعم، puppeteer-core يستبعد Chrome المجمّع لتقليل الحجم، لذا ستحتاج إلى تحديد ثنائي Chrome. الكامل puppeteer تتضمن الحزمة Chrome تلقائيًا.
17. ماذا علي أن أفعل إذا كان Puppeteer بطيئًا في البيئات السحابية؟
18. التحسين viewport الإعدادات وتعطيل الخيارات غير الضرورية مثل devtools يمكنها تحسين الأداء في البيئات المحدودة الموارد.
19. هل Puppeteer متوافق مع جميع موفري الخدمات السحابية؟
20. بشكل عام، نعم، ولكن قد يكون لكل مزود متطلبات فريدة. باستخدام الإعدادات الصديقة للسحابة مثل --no-sandbox يضمن توافقًا أفضل.

الأفكار النهائية حول جعل محرك الدمى يعمل على Vercel

يتطلب نشر Puppeteer بنجاح على Vercel فهم احتياجات الإعداد المحددة لمتصفح Chrome. تحديد خيارات الإطلاق ويساعد تكوين مسارات ذاكرة التخزين المؤقت لـ Puppeteer بشكل صحيح في منع الخطأ المحبط "تعذر العثور على Chrome". تضمن هذه التعديلات أداء محرك الدمى بشكل موثوق عبر البيئات المحلية والسحابية. 🚀

بمجرد تكييف هذه الحلول مع مشروعك، يصبح التقاط لقطات الشاشة من عناوين URL التي يقدمها المستخدم أمرًا سلسًا، مما يسمح بتطبيقات ويب أكثر ديناميكية. من خلال الإعداد المناسب، يظل Puppeteer أداة لا تقدر بثمن للأتمتة وتجميع الويب، حتى على الأنظمة الأساسية التي لا تحتوي على خادم مثل Vercel.