Виправлення помилки Puppeteer Chrome «Не вдалося знайти Chrome (версія 130.0.6723.116)» під час розгортання 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

Такий підхід змінює package.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";

Модульний тест Puppeteer для скріншотів

Цей тестовий скрипт 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

1. Чому я отримую повідомлення про помилку «Не вдалося знайти Chrome» на хмарних платформах?
2. Ці помилки часто виникають через те, що хмарні платформи за замовчуванням не включають повний двійковий файл Chrome. Ви можете виправити це, вказавши executablePath у налаштуваннях Puppeteer.
3. Як переконатися, що Puppeteer працює як у локальному, так і в хмарному середовищі?
4. Використання executablePath і args із зручними для хмари прапорами, як --no-sandbox може зробити вашу установку достатньо гнучкою для обох середовищ.
5. Що означає --no-sandbox прапор робити в Puppeteer?
6. The --no-sandbox прапорець вимикає безпеку пісочниці Chrome, що дозволяє Puppeteer працювати в хмарних службах, які не підтримують пісочницю, але її слід використовувати з обережністю.
7. Навіщо мені звичай cacheDirectory для Ляльковода?
8. Встановлення настроюваного cacheDirectory гарантує, що Puppeteer завантажує двійкові файли Chrome у відоме місце, що може запобігти помилкам під час розгортання, особливо в безсерверних середовищах.
9. Яка мета networkidle2 варіант в goto метод?
10. The networkidle2 опція чекає, доки не залишиться більше двох активних мережевих підключень. Це корисно для захоплення повністю завантаженої сторінки та обробки динамічного вмісту.
11. Чи може Puppeteer працювати без зазначеної версії Chrome?
12. Так, але рекомендується вказати executablePath і переконайтеся, що сумісна версія Chrome доступна для стабільних результатів у хмарних налаштуваннях.
13. Як мені керувати кеш-пам’яттю Puppeteer у різних середовищах?
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 забезпечує кращу сумісність.

Останні думки про те, як змусити Puppeteer працювати на Vercel

Успішне розгортання Puppeteer на Vercel вимагає розуміння конкретних потреб налаштування Chrome. Конкретизуючи параметри запуску і правильне налаштування шляхів кешу Puppeteer допомагає запобігти неприємній помилці «Не вдалося знайти Chrome». Ці налаштування забезпечують надійну роботу Puppeteer у локальному та хмарному середовищах. 🚀

Щойно ви адаптуєте ці рішення до свого проекту, знімки екрана з URL-адрес, наданих користувачем, стає безперебійним, що дозволяє створювати більш динамічні веб-додатки. За належного налаштування Puppeteer залишається безцінним інструментом для автоматизації та веб-збирання навіть на безсерверних платформах, таких як Vercel.