Vercel 배포 시 'Chrome을 찾을 수 없음(ver. 130.0.6723.116)' Puppeteer Chrome 오류 복구

해결 방법 1: Vercel에 Chrome을 올바르게 설치하도록 Puppeteer 구성

이 Node.js 기반 백엔드 솔루션은 Chrome이 올바르게 설치되도록 Puppeteer의 캐시 경로와 설치 명령을 구성합니다.

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: .puppeteerrc.cjs 파일을 사용한 Vercel용 사용자 정의 Puppeteer 구성

이 솔루션은 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: Puppeteer용 package.json에 환경 변수 및 스크립트 구현

이 접근 방식은 패키지.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 테스트 스크립트는 다양한 환경에서 URL의 스크린샷을 캡처하는 Puppeteer의 기능을 확인합니다.

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 옵션은 활성 네트워크 연결이 2개 이하가 될 때까지 기다립니다. 이는 완전히 로드된 페이지를 캡처하고 동적 콘텐츠를 처리하는 데 유용합니다.
11. Puppeteer는 지정된 Chrome 버전 없이 작동할 수 있나요?
12. 예, 하지만 지정하는 것이 좋습니다 executablePath 클라우드 설정에서 일관된 결과를 얻으려면 호환되는 Chrome 버전에 액세스할 수 있는지 확인하세요.
13. 다양한 환경에서 Puppeteer 캐시를 어떻게 관리합니까?
14. 범용을 지정할 수 있습니다. cacheDirectory 에서 .puppeteerrc.cjs 파일을 사용하면 Puppeteer가 Vercel 및 Heroku와 같은 플랫폼에서 Chrome 바이너리를 찾을 수 있습니다.
15. ~이다 puppeteer-core 와는 다르다 puppeteer?
16. 예, puppeteer-core 크기를 줄이기 위해 번들로 제공되는 Chrome을 제외하므로 Chrome 바이너리를 지정해야 합니다. 전체 puppeteer 패키지에는 Chrome이 자동으로 포함됩니다.
17. 클라우드 환경에서 Puppeteer가 느려지면 어떻게 해야 하나요?
18. 최적화 viewport 설정 및 다음과 같은 불필요한 옵션을 비활성화합니다. devtools 리소스가 제한된 환경에서 성능을 향상시킬 수 있습니다.
19. Puppeteer는 모든 클라우드 제공업체와 호환됩니까?
20. 일반적으로 그렇습니다. 그러나 각 제공업체마다 고유한 요구 사항이 있을 수 있습니다. 다음과 같은 클라우드 친화적인 설정 사용 --no-sandbox 더 나은 호환성을 보장합니다.

Vercel에서 Puppeteer를 실행하는 것에 대한 최종 생각

Vercel에 Puppeteer를 성공적으로 배포하려면 Chrome의 특정 설정 요구 사항을 이해해야 합니다. 지정 실행 옵션 Puppeteer의 캐시 경로를 올바르게 구성하면 실망스러운 'Chrome을 찾을 수 없습니다' 오류를 방지하는 데 도움이 됩니다. 이러한 조정을 통해 Puppeteer는 로컬 및 클라우드 환경 모두에서 안정적으로 작동합니다. 🚀

이러한 솔루션을 프로젝트에 적용하면 사용자가 제공한 URL에서 스크린샷 캡처가 원활해지면서 보다 동적인 웹 애플리케이션이 가능해집니다. 적절한 설정을 통해 Puppeteer는 Vercel과 같은 서버리스 플랫폼에서도 자동화 및 웹 스크래핑을 위한 귀중한 도구로 남아 있습니다.