Vercel 導入時の「Chrome が見つかりませんでした (ver. 130.0.6723.116)」という Puppeteer Chrome エラーを修復する

解決策 1: Chrome を Vercel に正しくインストールするように Puppeteer を構成する

この 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: .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 flag は 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 より良い互換性が保証されます。

Puppeteer を Vercel 上で実行するための最終的な考え

Vercel に Puppeteer を正常にデプロイするには、Chrome の特定のセットアップのニーズを理解する必要があります。指定する 起動オプション Puppeteer のキャッシュ パスを正しく設定すると、イライラする「Chrome が見つかりません」エラーを防ぐことができます。これらの調整により、ローカル環境とクラウド環境の両方で Puppeteer が確実に機能することが保証されます。 🚀

これらのソリューションをプロジェクトに適応させると、ユーザーが指定した URL からのスクリーンショットのキャプチャがシームレスになり、より動的な Web アプリケーションが可能になります。適切にセットアップすれば、Vercel のようなサーバーレス プラットフォーム上でも、Puppeteer は自動化と Web スクレイピングのための貴重なツールであり続けます。