Naprawianie błędu przeglądarki Chrome „Nie można znaleźć przeglądarki Chrome (wersja 130.0.6723.116)” podczas wdrażania programu Vercel

Rozwiązanie 1: Konfigurowanie Puppeteera tak, aby poprawnie instalował Chrome na Vercel

To rozwiązanie backendowe oparte na Node.js konfiguruje ścieżkę pamięci podręcznej Puppeteera i polecenia instalacyjne, aby zapewnić poprawną instalację przeglądarki 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;

Rozwiązanie 2: Niestandardowa konfiguracja Puppeteer dla Vercel z plikiem .puppeteerrc.cjs

To rozwiązanie dostosowuje plik konfiguracyjny Puppeteera (.puppeteerrc.cjs), aby określić ścieżkę pamięci podręcznej Chrome i zapewnić zgodność ze strukturą plików 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'],
};

Rozwiązanie 3: Implementacja zmiennych środowiskowych i skryptów w package.json dla Puppeteer

To podejście modyfikuje pakiet.json plik, aby zainstalować określone pliki binarne przeglądarki Chrome i automatycznie skonfigurować konfiguracje Puppeteera podczas wdrażania.

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

Test jednostkowy funkcjonalności zrzutu ekranu lalkarza

Ten skrypt testowy Node.js Mocha sprawdza zdolność Puppeteera do przechwytywania zrzutów ekranu z adresu URL w różnych środowiskach.

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

Często zadawane pytania dotyczące wdrożeń Puppeteer i Cloud

1. Dlaczego na platformach chmurowych otrzymuję błędy „Nie można znaleźć przeglądarki Chrome”?
2. Te błędy często występują, ponieważ platformy chmurowe nie zawierają domyślnie pełnego pliku binarnego przeglądarki Chrome. Możesz to naprawić, określając executablePath w konfiguracji Lalkarza.
3. Jak upewnić się, że Puppeteer działa zarówno w środowisku lokalnym, jak i w chmurze?
4. Używanie executablePath I args z flagami przyjaznymi chmurom, takimi jak --no-sandbox może sprawić, że konfiguracja będzie wystarczająco elastyczna dla obu środowisk.
5. Co robi --no-sandbox flaga zrobić w Puppeteer?
6. The --no-sandbox flaga wyłącza zabezpieczenia piaskownicy przeglądarki Chrome, co pozwala Puppeteerowi działać w usługach w chmurze, które nie obsługują piaskownicy, ale należy z niej korzystać ostrożnie.
7. Dlaczego potrzebuję zwyczaju cacheDirectory dla Lalkarza?
8. Ustawianie niestandardowego cacheDirectory gwarantuje, że Puppeteer pobierze pliki binarne Chrome do znanej lokalizacji, co może zapobiec błędom podczas wdrażania, szczególnie w środowiskach bezserwerowych.
9. Jaki jest cel networkidle2 opcja w goto metoda?
10. The networkidle2 opcja czeka, aż będą nie więcej niż dwa aktywne połączenia sieciowe. Jest to przydatne do przechwytywania w pełni załadowanej strony i obsługi zawartości dynamicznej.
11. Czy Puppeteer może działać bez określonej wersji przeglądarki Chrome?
12. Tak, ale zaleca się określenie executablePath i upewnij się, że dostępna jest zgodna wersja przeglądarki Chrome, aby uzyskać spójne wyniki w konfiguracjach w chmurze.
13. Jak zarządzać pamięcią podręczną Puppeteer w różnych środowiskach?
14. Możesz określić uniwersalny cacheDirectory w .puppeteerrc.cjs plik, umożliwiając Puppeteerowi znajdowanie plików binarnych Chrome na platformach takich jak Vercel i Heroku.
15. Jest puppeteer-core różni się od puppeteer?
16. Tak, puppeteer-core wyklucza dołączoną przeglądarkę Chrome, aby zmniejszyć rozmiar, dlatego musisz określić plik binarny Chrome. Pełny puppeteer pakiet automatycznie zawiera przeglądarkę Chrome.
17. Co powinienem zrobić, jeśli Puppeteer działa wolno w środowiskach chmurowych?
18. Optymalizacja viewport ustawienia i wyłączenie niepotrzebnych opcji, takich jak devtools może poprawić wydajność w środowiskach o ograniczonych zasobach.
19. Czy Puppeteer jest kompatybilny ze wszystkimi dostawcami usług w chmurze?
20. Generalnie tak, ale każdy dostawca może mieć inne wymagania. Korzystanie z ustawień przyjaznych chmurze, takich jak --no-sandbox zapewnia lepszą kompatybilność.

Ostatnie przemyślenia na temat uruchomienia programu Puppeteer na platformie Vercel

Pomyślne wdrożenie Puppeteera w Vercel wymaga zrozumienia konkretnych potrzeb konfiguracyjnych przeglądarki Chrome. Określanie opcje uruchamiania i prawidłowe skonfigurowanie ścieżek pamięci podręcznej Puppeteera pomaga uniknąć frustrującego błędu „Nie można znaleźć Chrome”. Te dostosowania zapewniają niezawodne działanie Puppeteera zarówno w środowisku lokalnym, jak i w chmurze. 🚀

Po dostosowaniu tych rozwiązań do swojego projektu przechwytywanie zrzutów ekranu z adresów URL podanych przez użytkownika staje się płynne, co pozwala na bardziej dynamiczne aplikacje internetowe. Przy odpowiedniej konfiguracji Puppeteer pozostaje nieocenionym narzędziem do automatyzacji i przeglądania sieci, nawet na platformach bezserwerowych, takich jak Vercel.