Reparando o erro 'Não foi possível encontrar o Chrome (ver. 130.0.6723.116)' Puppeteer Chrome na implantação do Vercel

Solução 1: configurando o Puppeteer para instalar o Chrome corretamente no Vercel

Esta solução de back-end baseada em Node.js configura o caminho do cache e os comandos de instalação do Puppeteer para garantir que o Chrome seja instalado corretamente.

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;

Solução 2: configuração personalizada do Puppeteer para Vercel com um arquivo .puppeteerrc.cjs

Esta solução ajusta o arquivo de configuração do Puppeteer (.puppeteerrc.cjs) para especificar o caminho do cache do Chrome e garantir compatibilidade com a estrutura de arquivos do 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'],
};

Solução 3: Implementando variáveis ​​de ambiente e scripts em package.json para Puppeteer

Esta abordagem modifica o pacote.json arquivo para instalar binários específicos do Chrome e definir as configurações do Puppeteer automaticamente durante a implantação.

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

Teste de unidade para funcionalidade de captura de tela do Puppeteer

Este script de teste Node.js Mocha verifica a capacidade do Puppeteer de capturar uma captura de tela de um URL em vários ambientes.

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

Perguntas comuns sobre implantações do Puppeteer e da nuvem

1. Por que recebo erros “Não foi possível encontrar o Chrome” em plataformas de nuvem?
2. Esses erros geralmente ocorrem porque as plataformas em nuvem não incluem o binário completo do Chrome por padrão. Você pode corrigir isso especificando executablePath na configuração do Puppeteer.
3. Como posso garantir que o Puppeteer funcione em ambientes locais e em nuvem?
4. Usando executablePath e args com sinalizadores compatíveis com a nuvem, como --no-sandbox pode tornar sua configuração flexível o suficiente para ambos os ambientes.
5. O que o --no-sandbox bandeira fazer no Puppeteer?
6. O --no-sandbox sinalizador desativa a segurança do sandbox do Chrome, o que permite que o Puppeteer seja executado em serviços em nuvem que não oferecem suporte ao sandbox, mas deve ser usado com cautela.
7. Por que preciso de um personalizado cacheDirectory para Marionetista?
8. Definindo um costume cacheDirectory garante que o Puppeteer baixe os binários do Chrome em um local conhecido, o que pode evitar erros durante a implantação, especialmente em ambientes sem servidor.
9. Qual é o propósito do networkidle2 opção no goto método?
10. O networkidle2 opção espera até que não haja mais do que duas conexões de rede ativas. Isso é útil para capturar uma página totalmente carregada e manipular conteúdo dinâmico.
11. O Puppeteer pode funcionar sem uma versão específica do Chrome?
12. Sim, mas é recomendado especificar executablePath e garantir que uma versão compatível do Chrome esteja acessível para obter resultados consistentes nas configurações da nuvem.
13. Como faço para gerenciar o cache do Puppeteer em diferentes ambientes?
14. Você pode especificar um universal cacheDirectory no .puppeteerrc.cjs arquivo, permitindo que o Puppeteer encontre binários do Chrome em plataformas como Vercel e Heroku.
15. É puppeteer-core diferente de puppeteer?
16. Sim, puppeteer-core exclui o Chrome incluído para reduzir o tamanho, então você precisará especificar um binário do Chrome. O completo puppeteer o pacote inclui o Chrome automaticamente.
17. O que devo fazer se o Puppeteer estiver lento em ambientes de nuvem?
18. Otimizando viewport configurações e desativando opções desnecessárias, como devtools pode melhorar o desempenho em ambientes com recursos limitados.
19. O Puppeteer é compatível com todos os provedores de nuvem?
20. Geralmente sim, mas cada fornecedor pode ter requisitos exclusivos. Usando configurações compatíveis com a nuvem, como --no-sandbox garante melhor compatibilidade.

Considerações finais sobre como fazer o Puppeteer rodar no Vercel

A implantação bem-sucedida do Puppeteer no Vercel requer a compreensão das necessidades específicas de configuração do Chrome. Especificando opções de lançamento e configurar corretamente os caminhos de cache do Puppeteer ajuda a evitar o frustrante erro “Não foi possível encontrar o Chrome”. Esses ajustes garantem que o Puppeteer funcione de maneira confiável em ambientes locais e em nuvem. 🚀

Depois de adaptar essas soluções ao seu projeto, a captura de capturas de tela de URLs fornecidos pelo usuário torna-se perfeita, permitindo aplicações web mais dinâmicas. Com a configuração adequada, o Puppeteer continua sendo uma ferramenta inestimável para automação e web scraping, mesmo em plataformas sem servidor como Vercel.