വെർസൽ വിന്യാസത്തിലെ 'ക്രോം കണ്ടെത്താനായില്ല (പതിപ്പ്. 130.0.6723.116)' പപ്പറ്റീർ ക്രോം പിശക് റിപ്പയർ ചെയ്യുന്നു

പരിഹാരം 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 ഫയൽ ഉള്ള വെർസലിനായുള്ള ഇഷ്‌ടാനുസൃത പപ്പീറ്റർ കോൺഫിഗറേഷൻ

ക്രോം കാഷെ പാത്ത് വ്യക്തമാക്കുന്നതിനും വെർസലിൻ്റെ ഫയൽ ഘടനയുമായി അനുയോജ്യത ഉറപ്പാക്കുന്നതിനും ഈ പരിഹാരം പപ്പറ്റീറിൻ്റെ കോൺഫിഗറേഷൻ ഫയൽ (.puppeteerrc.cjs) ക്രമീകരിക്കുന്നു.

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-ന് പാക്കേജ്.json-ൽ പരിസ്ഥിതി വേരിയബിളുകളും സ്ക്രിപ്റ്റുകളും നടപ്പിലാക്കുന്നു

ഈ സമീപനം പരിഷ്കരിക്കുന്നു pack.json നിർദ്ദിഷ്‌ട Chrome ബൈനറികൾ ഇൻസ്‌റ്റാൾ ചെയ്യാനും വിന്യാസ സമയത്ത് പപ്പറ്റീർ കോൺഫിഗറേഷനുകൾ സ്വയമേവ സജ്ജീകരിക്കാനുമുള്ള ഫയൽ.

// 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-ൽ നിന്ന് ഒരു സ്‌ക്രീൻഷോട്ട് ക്യാപ്‌ചർ ചെയ്യാനുള്ള 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();
            });
    });
});

പപ്പറ്റീറിനെയും ക്ലൗഡ് വിന്യാസത്തെയും കുറിച്ചുള്ള പൊതുവായ ചോദ്യങ്ങൾ

1. എന്തുകൊണ്ടാണ് എനിക്ക് ക്ലൗഡ് പ്ലാറ്റ്‌ഫോമുകളിൽ "Chrome കണ്ടെത്താനായില്ല" എന്ന പിശകുകൾ ലഭിക്കുന്നത്?
2. ക്ലൗഡ് പ്ലാറ്റ്‌ഫോമുകളിൽ സ്ഥിരസ്ഥിതിയായി പൂർണ്ണ Chrome ബൈനറി ഉൾപ്പെടാത്തതിനാൽ ഈ പിശകുകൾ പലപ്പോഴും സംഭവിക്കാറുണ്ട്. വ്യക്തമാക്കുന്നതിലൂടെ നിങ്ങൾക്ക് ഇത് പരിഹരിക്കാനാകും executablePath നിങ്ങളുടെ Puppeteer സജ്ജീകരണത്തിൽ.
3. പ്രാദേശിക, ക്ലൗഡ് പരിതസ്ഥിതികളിൽ പപ്പറ്റീർ പ്രവർത്തിക്കുന്നുവെന്ന് ഞാൻ എങ്ങനെ ഉറപ്പാക്കും?
4. ഉപയോഗിക്കുന്നത് executablePath ഒപ്പം args പോലുള്ള ക്ലൗഡ് ഫ്രണ്ട്ലി ഫ്ലാഗുകൾക്കൊപ്പം --no-sandbox നിങ്ങളുടെ സജ്ജീകരണം രണ്ട് പരിതസ്ഥിതികൾക്കും വേണ്ടത്ര അയവുള്ളതാക്കാൻ കഴിയും.
5. എന്താണ് ചെയ്യുന്നത് --no-sandbox പപ്പറ്റീറിൽ ഫ്ലാഗ് ചെയ്യുക?
6. ദി --no-sandbox ഫ്ലാഗ് Chrome-ൻ്റെ സാൻഡ്‌ബോക്‌സ് സുരക്ഷ പ്രവർത്തനരഹിതമാക്കുന്നു, ഇത് സാൻഡ്‌ബോക്‌സിംഗിനെ പിന്തുണയ്‌ക്കാത്ത ക്ലൗഡ് സേവനങ്ങളിൽ പ്രവർത്തിക്കാൻ പപ്പറ്റീറിനെ അനുവദിക്കുന്നു, എന്നാൽ ഇത് ജാഗ്രതയോടെ ഉപയോഗിക്കണം.
7. എനിക്ക് എന്തിനാണ് ഒരു ആചാരം വേണ്ടത് cacheDirectory പപ്പറ്റീറിന്?
8. ഒരു കസ്റ്റം ക്രമീകരിക്കുന്നു cacheDirectory പപ്പറ്റീർ അറിയപ്പെടുന്ന ഒരു സ്ഥലത്തേക്ക് Chrome ബൈനറികൾ ഡൗൺലോഡ് ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുന്നു, ഇത് വിന്യാസ സമയത്ത്, പ്രത്യേകിച്ച് സെർവർ ഇല്ലാത്ത പരിതസ്ഥിതികളിൽ പിശകുകൾ തടയാൻ കഴിയും.
9. എന്താണ് ഉദ്ദേശ്യം networkidle2 എന്നതിൽ ഓപ്ഷൻ goto രീതി?
10. ദി networkidle2 രണ്ടിൽ കൂടുതൽ സജീവ നെറ്റ്‌വർക്ക് കണക്ഷനുകൾ ഉണ്ടാകുന്നതുവരെ ഓപ്ഷൻ കാത്തിരിക്കുന്നു. പൂർണ്ണമായി ലോഡ് ചെയ്ത പേജ് ക്യാപ്‌ചർ ചെയ്യുന്നതിനും ഡൈനാമിക് ഉള്ളടക്കം കൈകാര്യം ചെയ്യുന്നതിനും ഇത് ഉപയോഗപ്രദമാണ്.
11. ഒരു നിർദ്ദിഷ്‌ട Chrome പതിപ്പ് ഇല്ലാതെ പപ്പറ്റീറിന് പ്രവർത്തിക്കാൻ കഴിയുമോ?
12. അതെ, എന്നാൽ ഇത് വ്യക്തമാക്കാൻ ശുപാർശ ചെയ്യുന്നു executablePath ക്ലൗഡ് സജ്ജീകരണങ്ങളിലെ സ്ഥിരമായ ഫലങ്ങൾക്കായി അനുയോജ്യമായ Chrome പതിപ്പ് ആക്‌സസ് ചെയ്യാനാകുമെന്ന് ഉറപ്പാക്കുക.
13. വ്യത്യസ്‌ത പരിതസ്ഥിതികളിൽ പപ്പറ്റീർ കാഷെ എങ്ങനെ കൈകാര്യം ചെയ്യാം?
14. നിങ്ങൾക്ക് ഒരു സാർവത്രികം വ്യക്തമാക്കാൻ കഴിയും cacheDirectory ൽ .puppeteerrc.cjs ഫയൽ, വെർസൽ, ഹീറോകു തുടങ്ങിയ പ്ലാറ്റ്‌ഫോമുകളിൽ ഉടനീളം Chrome ബൈനറികൾ കണ്ടെത്താൻ പപ്പറ്റീറിനെ അനുവദിക്കുന്നു.
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-കളിൽ നിന്ന് സ്‌ക്രീൻഷോട്ടുകൾ ക്യാപ്‌ചർ ചെയ്യുന്നത് തടസ്സരഹിതമാകും, ഇത് കൂടുതൽ ചലനാത്മകമായ വെബ് ആപ്ലിക്കേഷനുകളെ അനുവദിക്കുന്നു. ശരിയായ സജ്ജീകരണത്തോടെ, വെർസൽ പോലുള്ള സെർവർലെസ് പ്ലാറ്റ്‌ഫോമുകളിൽ പോലും ഓട്ടോമേഷനും വെബ് സ്‌ക്രാപ്പിംഗിനും പപ്പറ്റീർ വിലമതിക്കാനാവാത്ത ഉപകരണമായി തുടരുന്നു.