Sửa lỗi 'Không thể tìm thấy Chrome (ver. 130.0.6723.116)' Lỗi Puppeteer Chrome khi triển khai Vercel

Giải pháp 1: Định cấu hình Puppeteer để cài đặt Chrome chính xác trên Vercel

Giải pháp phụ trợ dựa trên Node.js này định cấu hình các lệnh cài đặt và đường dẫn bộ đệm của Puppeteer để đảm bảo Chrome cài đặt chính xác.

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;

Giải pháp 2: Cấu hình Puppeteer tùy chỉnh cho Vercel bằng tệp .puppeteerrc.cjs

Giải pháp này điều chỉnh tệp cấu hình của Puppeteer (.puppeteerrc.cjs) để chỉ định đường dẫn bộ đệm của Chrome và đảm bảo khả năng tương thích với cấu trúc tệp của 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'],
};

Giải pháp 3: Triển khai các biến môi trường và tập lệnh trong pack.json cho Puppeteer

Cách tiếp cận này sửa đổi các gói.json để cài đặt các tệp nhị phân Chrome cụ thể và tự động thiết lập cấu hình Puppeteer trong quá trình triển khai.

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

Kiểm tra đơn vị cho chức năng chụp ảnh màn hình của Puppeteer

Tập lệnh kiểm tra Node.js Mocha này xác minh khả năng của Puppeteer trong việc chụp ảnh màn hình từ một URL trong nhiều môi trường khác nhau.

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

Các câu hỏi thường gặp về việc triển khai Puppeteer và Cloud

1. Tại sao tôi gặp lỗi “Không thể tìm thấy Chrome” trên nền tảng đám mây?
2. Những lỗi này thường xảy ra do nền tảng đám mây không bao gồm tệp nhị phân Chrome đầy đủ theo mặc định. Bạn có thể khắc phục điều này bằng cách chỉ định executablePath trong thiết lập Puppeteer của bạn.
3. Làm cách nào để đảm bảo Puppeteer hoạt động trên cả môi trường cục bộ và đám mây?
4. sử dụng executablePath Và args với những lá cờ thân thiện với đám mây như --no-sandbox có thể làm cho thiết lập của bạn đủ linh hoạt cho cả hai môi trường.
5. cái gì làm --no-sandbox cờ làm gì trong Puppeteer?
6. các --no-sandbox cờ vô hiệu hóa bảo mật hộp cát của Chrome, cho phép Puppeteer chạy trên các dịch vụ đám mây không hỗ trợ hộp cát nhưng nên thận trọng khi sử dụng.
7. Tại sao tôi cần một tùy chỉnh cacheDirectory cho Người múa rối?
8. Thiết lập tùy chỉnh cacheDirectory đảm bảo rằng Puppeteer tải các tệp nhị phân của Chrome xuống một vị trí đã biết, điều này có thể ngăn ngừa lỗi trong quá trình triển khai, đặc biệt là trong môi trường không có máy chủ.
9. Mục đích của việc này là gì networkidle2 tùy chọn trong goto phương pháp?
10. các networkidle2 tùy chọn đợi cho đến khi không có nhiều hơn hai kết nối mạng đang hoạt động. Điều này rất hữu ích để chụp một trang được tải đầy đủ và xử lý nội dung động.
11. Puppeteer có thể hoạt động mà không cần phiên bản Chrome được chỉ định không?
12. Có, nhưng nên chỉ định executablePath và đảm bảo có thể truy cập được phiên bản Chrome tương thích để có kết quả nhất quán khi thiết lập đám mây.
13. Làm cách nào để quản lý bộ đệm Puppeteer trên các môi trường khác nhau?
14. Bạn có thể chỉ định một phổ quát cacheDirectory trong .puppeteerrc.cjs tệp, cho phép Puppeteer tìm các tệp nhị phân của Chrome trên các nền tảng như Vercel và Heroku.
15. Là puppeteer-core khác với puppeteer?
16. Đúng, puppeteer-core không bao gồm Chrome đi kèm để giảm kích thước, vì vậy bạn sẽ cần chỉ định tệp nhị phân Chrome. đầy đủ puppeteer gói bao gồm Chrome tự động.
17. Tôi nên làm gì nếu Puppeteer hoạt động chậm trên môi trường đám mây?
18. Tối ưu hóa viewport cài đặt và tắt các tùy chọn không cần thiết như devtools có thể cải thiện hiệu suất trong môi trường hạn chế về tài nguyên.
19. Puppeteer có tương thích với tất cả các nhà cung cấp đám mây không?
20. Nói chung là có, nhưng mỗi nhà cung cấp có thể có những yêu cầu riêng. Sử dụng cài đặt thân thiện với đám mây như --no-sandbox đảm bảo khả năng tương thích tốt hơn.

Suy nghĩ cuối cùng về việc bắt Puppeteer chạy trên Vercel

Việc triển khai thành công Puppeteer trên Vercel đòi hỏi phải hiểu rõ các nhu cầu thiết lập cụ thể cho Chrome. Chỉ định tùy chọn khởi chạy và định cấu hình chính xác đường dẫn bộ đệm của Puppeteer giúp ngăn chặn lỗi "Không thể tìm thấy Chrome" khó chịu. Những điều chỉnh này đảm bảo Puppeteer hoạt động đáng tin cậy trên cả môi trường cục bộ và đám mây. 🚀

Sau khi bạn điều chỉnh các giải pháp này cho phù hợp với dự án của mình, việc chụp ảnh màn hình từ các URL do người dùng cung cấp sẽ trở nên liền mạch, cho phép tạo ra các ứng dụng web động hơn. Với thiết lập phù hợp, Puppeteer vẫn là một công cụ vô giá để tự động hóa và quét web, ngay cả trên các nền tảng không có máy chủ như Vercel.