ਵਰਸੇਲ ਤੈਨਾਤੀ 'ਤੇ 'ਕੁਡ ਨਾਟ ਫਾਈਂਡ ਕਰੋਮ (ਵਰਸ. 130.0.6723.116)' ਦੀ ਮੁਰੰਮਤ ਕੀਤੀ ਜਾ ਰਹੀ ਹੈ

ਹੱਲ 1: ਵਰਸੇਲ 'ਤੇ ਕਰੋਮ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਸਥਾਪਿਤ ਕਰਨ ਲਈ ਕਠਪੁਤਲੀ ਨੂੰ ਕੌਂਫਿਗਰ ਕਰਨਾ

ਇਹ 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 ਫਾਈਲ ਨਾਲ ਵਰਸੇਲ ਲਈ ਕਸਟਮ ਪਪੀਟੀਅਰ ਸੰਰਚਨਾ

ਇਹ ਹੱਲ Puppeteer ਦੀ ਸੰਰਚਨਾ ਫਾਈਲ (.puppeteerrc.cjs) ਨੂੰ ਕ੍ਰੋਮ ਕੈਸ਼ ਮਾਰਗ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਨ ਅਤੇ 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 ਵਿੱਚ ਵਾਤਾਵਰਨ ਵੇਰੀਏਬਲ ਅਤੇ ਸਕ੍ਰਿਪਟਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨਾ

ਇਹ ਪਹੁੰਚ ਨੂੰ ਸੋਧਦਾ ਹੈ package.json ਖਾਸ ਕਰੋਮ ਬਾਈਨਰੀਜ਼ ਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਲਈ ਫਾਈਲ ਅਤੇ ਤੈਨਾਤੀ ਦੌਰਾਨ ਆਪਣੇ ਆਪ ਪਪੀਟੀਅਰ ਸੰਰਚਨਾਵਾਂ ਨੂੰ ਸੈਟ ਅਪ ਕਰੋ।

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

ਕਠਪੁਤਲੀ ਸਕ੍ਰੀਨਸ਼ੌਟ ਕਾਰਜਸ਼ੀਲਤਾ ਲਈ ਯੂਨਿਟ ਟੈਸਟ

ਇਹ Node.js ਮੋਚਾ ਟੈਸਟ ਸਕ੍ਰਿਪਟ ਵੱਖ-ਵੱਖ ਵਾਤਾਵਰਣਾਂ ਵਿੱਚ ਇੱਕ 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();
            });
    });
});

ਕਠਪੁਤਲੀ ਅਤੇ ਕਲਾਉਡ ਤੈਨਾਤੀਆਂ ਬਾਰੇ ਆਮ ਸਵਾਲ

1. ਮੈਨੂੰ ਕਲਾਉਡ ਪਲੇਟਫਾਰਮਾਂ 'ਤੇ “Chrome ਨਹੀਂ ਲੱਭ ਸਕਿਆ” ਤਰੁੱਟੀਆਂ ਕਿਉਂ ਮਿਲਦੀਆਂ ਹਨ?
2. ਇਹ ਤਰੁੱਟੀਆਂ ਅਕਸਰ ਵਾਪਰਦੀਆਂ ਹਨ ਕਿਉਂਕਿ ਕਲਾਉਡ ਪਲੇਟਫਾਰਮਾਂ ਵਿੱਚ ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ ਪੂਰੀ Chrome ਬਾਈਨਰੀ ਸ਼ਾਮਲ ਨਹੀਂ ਹੁੰਦੀ ਹੈ। ਤੁਸੀਂ ਨਿਸ਼ਚਿਤ ਕਰਕੇ ਇਸ ਨੂੰ ਠੀਕ ਕਰ ਸਕਦੇ ਹੋ executablePath ਤੁਹਾਡੇ ਕਠਪੁਤਲੀ ਸੈੱਟਅੱਪ ਵਿੱਚ.
3. ਮੈਂ ਇਹ ਕਿਵੇਂ ਯਕੀਨੀ ਬਣਾ ਸਕਦਾ ਹਾਂ ਕਿ ਕਠਪੁਤਲੀ ਸਥਾਨਕ ਅਤੇ ਕਲਾਉਡ ਵਾਤਾਵਰਣ ਦੋਵਾਂ 'ਤੇ ਕੰਮ ਕਰਦੀ ਹੈ?
4. ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ executablePath ਅਤੇ args ਵਰਗੇ ਬੱਦਲ-ਅਨੁਕੂਲ ਝੰਡੇ ਦੇ ਨਾਲ --no-sandbox ਤੁਹਾਡੇ ਸੈੱਟਅੱਪ ਨੂੰ ਦੋਵਾਂ ਵਾਤਾਵਰਣਾਂ ਲਈ ਕਾਫ਼ੀ ਲਚਕਦਾਰ ਬਣਾ ਸਕਦਾ ਹੈ।
5. ਕੀ ਕਰਦਾ ਹੈ --no-sandbox ਫਲੈਗ ਕਠਪੁਤਲੀ ਵਿੱਚ ਕਰਦੇ ਹਨ?
6. ਦ --no-sandbox ਫਲੈਗ ਕ੍ਰੋਮ ਦੀ ਸੈਂਡਬਾਕਸ ਸੁਰੱਖਿਆ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ, ਜੋ ਕਿ ਕਠਪੁਤਲੀ ਨੂੰ ਕਲਾਉਡ ਸੇਵਾਵਾਂ 'ਤੇ ਚਲਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਜੋ ਸੈਂਡਬਾਕਸਿੰਗ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੀਆਂ, ਪਰ ਇਸਨੂੰ ਸਾਵਧਾਨੀ ਨਾਲ ਵਰਤਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।
7. ਮੈਨੂੰ ਇੱਕ ਰਿਵਾਜ ਦੀ ਲੋੜ ਕਿਉਂ ਹੈ cacheDirectory ਕਠਪੁਤਲੀ ਲਈ?
8. ਇੱਕ ਕਸਟਮ ਸੈੱਟ ਕਰਨਾ cacheDirectory ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ Puppeteer ਇੱਕ ਜਾਣੇ-ਪਛਾਣੇ ਸਥਾਨ 'ਤੇ ਕ੍ਰੋਮ ਬਾਈਨਰੀਆਂ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਦਾ ਹੈ, ਜੋ ਕਿ ਤੈਨਾਤੀ ਦੌਰਾਨ ਗਲਤੀਆਂ ਨੂੰ ਰੋਕ ਸਕਦਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਸਰਵਰ ਰਹਿਤ ਵਾਤਾਵਰਨ ਵਿੱਚ।
9. ਦਾ ਮਕਸਦ ਕੀ ਹੈ networkidle2 ਵਿੱਚ ਵਿਕਲਪ goto ਢੰਗ?
10. ਦ networkidle2 ਵਿਕਲਪ ਉਦੋਂ ਤੱਕ ਉਡੀਕ ਕਰਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਦੋ ਤੋਂ ਵੱਧ ਸਰਗਰਮ ਨੈੱਟਵਰਕ ਕੁਨੈਕਸ਼ਨ ਨਹੀਂ ਹੁੰਦੇ। ਇਹ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਕੀਤੇ ਪੰਨੇ ਨੂੰ ਕੈਪਚਰ ਕਰਨ ਅਤੇ ਗਤੀਸ਼ੀਲ ਸਮੱਗਰੀ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਲਾਭਦਾਇਕ ਹੈ।
11. ਕੀ ਕਠਪੁਤਲੀ ਇੱਕ ਖਾਸ Chrome ਸੰਸਕਰਣ ਤੋਂ ਬਿਨਾਂ ਕੰਮ ਕਰ ਸਕਦੀ ਹੈ?
12. ਹਾਂ, ਪਰ ਇਹ ਨਿਰਧਾਰਤ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ executablePath ਅਤੇ ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਕਲਾਉਡ ਸੈਟਅਪਾਂ ਵਿੱਚ ਇਕਸਾਰ ਨਤੀਜਿਆਂ ਲਈ ਇੱਕ ਅਨੁਕੂਲ Chrome ਸੰਸਕਰਣ ਪਹੁੰਚਯੋਗ ਹੈ।
13. ਮੈਂ ਵੱਖ-ਵੱਖ ਵਾਤਾਵਰਣਾਂ ਵਿੱਚ ਕਠਪੁਤਲੀ ਕੈਸ਼ ਦਾ ਪ੍ਰਬੰਧਨ ਕਿਵੇਂ ਕਰਾਂ?
14. ਤੁਸੀਂ ਇੱਕ ਯੂਨੀਵਰਸਲ ਨਿਰਧਾਰਤ ਕਰ ਸਕਦੇ ਹੋ cacheDirectory ਵਿੱਚ .puppeteerrc.cjs ਫਾਈਲ, ਕਠਪੁਤਲੀ ਨੂੰ ਵਰਸੇਲ ਅਤੇ ਹੇਰੋਕੂ ਵਰਗੇ ਪਲੇਟਫਾਰਮਾਂ ਵਿੱਚ ਕ੍ਰੋਮ ਬਾਈਨਰੀ ਲੱਭਣ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ।
15. ਹੈ puppeteer-core ਤੋਂ ਵੱਖਰਾ puppeteer?
16. ਹਾਂ, puppeteer-core ਆਕਾਰ ਘਟਾਉਣ ਲਈ ਬੰਡਲ ਕੀਤੇ Chrome ਨੂੰ ਸ਼ਾਮਲ ਨਹੀਂ ਕਰਦਾ, ਇਸ ਲਈ ਤੁਹਾਨੂੰ ਇੱਕ Chrome ਬਾਈਨਰੀ ਨਿਰਧਾਰਤ ਕਰਨ ਦੀ ਲੋੜ ਪਵੇਗੀ। ਪੂਰਾ puppeteer ਪੈਕੇਜ ਵਿੱਚ ਆਪਣੇ ਆਪ ਹੀ Chrome ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ।
17. ਮੈਨੂੰ ਕੀ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਜੇਕਰ ਕਠਪੁਤਲੀ ਕਲਾਉਡ ਵਾਤਾਵਰਨ 'ਤੇ ਹੌਲੀ ਹੈ?
18. ਅਨੁਕੂਲ ਬਣਾਉਣਾ viewport ਸੈਟਿੰਗਾਂ ਅਤੇ ਬੇਲੋੜੀ ਵਿਕਲਪਾਂ ਨੂੰ ਅਯੋਗ ਕਰਨਾ ਜਿਵੇਂ ਕਿ devtools ਸਰੋਤ-ਸੀਮਤ ਵਾਤਾਵਰਣ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਨ ਵਿੱਚ ਸੁਧਾਰ ਕਰ ਸਕਦਾ ਹੈ।
19. ਕੀ ਕਠਪੁਤਲੀ ਸਾਰੇ ਕਲਾਉਡ ਪ੍ਰਦਾਤਾਵਾਂ ਦੇ ਅਨੁਕੂਲ ਹੈ?
20. ਆਮ ਤੌਰ 'ਤੇ, ਹਾਂ, ਪਰ ਹਰੇਕ ਪ੍ਰਦਾਤਾ ਦੀਆਂ ਵਿਲੱਖਣ ਲੋੜਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਵਰਗੀਆਂ ਕਲਾਉਡ-ਅਨੁਕੂਲ ਸੈਟਿੰਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ --no-sandbox ਬਿਹਤਰ ਅਨੁਕੂਲਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ.

ਵਰਸੇਲ 'ਤੇ ਕਠਪੁਤਲੀ ਨੂੰ ਚਲਾਉਣ ਲਈ ਅੰਤਿਮ ਵਿਚਾਰ

Vercel 'ਤੇ Puppeteer ਨੂੰ ਸਫਲਤਾਪੂਰਵਕ ਤੈਨਾਤ ਕਰਨ ਲਈ Chrome ਲਈ ਖਾਸ ਸੈੱਟਅੱਪ ਲੋੜਾਂ ਨੂੰ ਸਮਝਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਨਿਰਧਾਰਿਤ ਕਰ ਰਿਹਾ ਹੈ ਲਾਂਚ ਵਿਕਲਪ ਅਤੇ Puppeteer ਦੇ ਕੈਸ਼ ਮਾਰਗਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਕੌਂਫਿਗਰ ਕਰਨਾ ਨਿਰਾਸ਼ਾਜਨਕ "Chrome ਨਹੀਂ ਲੱਭ ਸਕਿਆ" ਗਲਤੀ ਨੂੰ ਰੋਕਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ। ਇਹ ਵਿਵਸਥਾਵਾਂ ਸਥਾਨਕ ਅਤੇ ਕਲਾਉਡ ਵਾਤਾਵਰਣ ਦੋਵਾਂ ਵਿੱਚ ਕਠਪੁਤਲੀ ਫੰਕਸ਼ਨ ਨੂੰ ਭਰੋਸੇਯੋਗਤਾ ਨਾਲ ਯਕੀਨੀ ਬਣਾਉਂਦੀਆਂ ਹਨ। 🚀

ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਇਹਨਾਂ ਹੱਲਾਂ ਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਢਾਲ ਲੈਂਦੇ ਹੋ, ਤਾਂ ਉਪਭੋਗਤਾ ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤੇ ਗਏ URL ਤੋਂ ਸਕ੍ਰੀਨਸ਼ਾਟ ਕੈਪਚਰ ਕਰਨਾ ਸਹਿਜ ਬਣ ਜਾਂਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਵਧੇਰੇ ਗਤੀਸ਼ੀਲ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਦੀ ਆਗਿਆ ਮਿਲਦੀ ਹੈ। ਸਹੀ ਸੈਟਅਪ ਦੇ ਨਾਲ, ਕਠਪੁਤਲੀ ਆਟੋਮੇਸ਼ਨ ਅਤੇ ਵੈਬ ਸਕ੍ਰੈਪਿੰਗ ਲਈ ਇੱਕ ਅਨਮੋਲ ਟੂਲ ਬਣਿਆ ਹੋਇਆ ਹੈ, ਇੱਥੋਂ ਤੱਕ ਕਿ ਵਰਸੇਲ ਵਰਗੇ ਸਰਵਰ ਰਹਿਤ ਪਲੇਟਫਾਰਮਾਂ 'ਤੇ ਵੀ।