修复 Vercel 部署上的“无法找到 Chrome（版本 130.0.6723.116）”Puppeteer Chrome 错误

解决方案 1：配置 Puppeteer 以在 Vercel 上正确安装 Chrome

这个基于 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：在 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 Flag 在 Puppeteer 中做什么？
6. 这 --no-sandbox flag 会禁用 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 跨 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 应用程序。通过正确的设置，Puppeteer 仍然是自动化和网页抓取的宝贵工具，即使在 Vercel 这样的无服务器平台上也是如此。