Исправление ошибки 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

Этот подход изменяет пакет.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 и облачных развертываниях

1. Почему я получаю ошибки «Не удалось найти Chrome» на облачных платформах?
2. Эти ошибки часто возникают из-за того, что облачные платформы по умолчанию не включают полный двоичный файл Chrome. Это можно исправить, указав executablePath в вашей настройке Puppeteer.
3. Как обеспечить работу Puppeteer как в локальной, так и в облачной среде?
4. С использованием executablePath и args с облачными флагами, такими как --no-sandbox может сделать вашу настройку достаточно гибкой для обеих сред.
5. Что означает --no-sandbox флаг сделать в Puppeteer?
6. --no-sandbox Флаг отключает безопасность песочницы Chrome, что позволяет Puppeteer работать в облачных сервисах, которые не поддерживают песочницу, но его следует использовать с осторожностью.
7. Зачем мне нужен кастом cacheDirectory для Кукольника?
8. Настройка пользовательского cacheDirectory гарантирует, что Puppeteer загружает двоичные файлы Chrome в известное место, что может предотвратить ошибки во время развертывания, особенно в бессерверных средах.
9. Какова цель networkidle2 вариант в goto метод?
10. 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.