Tools: The Ultimate Guide: Puppeteer Setup on Ubuntu 24.04

Tools: The Ultimate Guide: Puppeteer Setup on Ubuntu 24.04

Phase 1: Clear the Path (The OS Level)

1. Fix Package Conflicts (If Applicable)

2. Install Node.js 20 LTS

3. Install the "Noble" Dependency Stack

Phase 2: Architecture (The Industry Standard for Puppeteer Setup Ubuntu 24.04)

4. Predictable Browser Locations

5. Version-Agnostic Symlinking

Phase 3: Implementation (The Plugin Side)

6. Clean PHP Configuration

Phase 4: Verification & Security for Robust Puppeteer Setup Ubuntu 24.04

7. The "No-Sandbox" Requirement

8. Final Health Check

Summary of Benefits Ubuntu 24.04 (Noble Numbat) introduces significant changes, including t64 libraries and stricter unprivileged user namespaces. These updates often break standard guides for older Ubuntu versions, leading to frustrating "shared object not found" or "permission denied" errors when trying to run headless browsers. This comprehensive guide will walk you through building a version-agnostic, rock-solid environment for Puppeteer Setup Ubuntu 24.04, ensuring your automation projects run smoothly and reliably. Before diving into Node.js, it's crucial to ensure your system's package manager isn't held back by existing conflicts. This particular step addresses common issues on servers running control panels like CloudPanel or Percona with PHP. If you're not experiencing such conflicts, you can likely skip this. For stability and long-term support, it's highly recommended to install Node.js using the official NodeSource repository rather than the default Ubuntu repository. This ensures you get the latest LTS version. Ubuntu 24.04 has renamed many core libraries, moving them to t64 versions. For Chrome to launch successfully, you must install these specific t64 dependencies. Missing any of these will result in launch failures. By default, Puppeteer downloads and caches browser binaries in your user's ~/.cache directory. While convenient for development, in a production environment, it's better to have the browser located within your project folder. This simplifies permission management and ensures consistency across deployments. Create a .puppeteerrc.cjs file in your project's root directory: Hardcoding a specific browser version (e.g., /linux-148.0.7778.97/) in your application code is a major vulnerability. Every time Puppeteer updates its bundled browser, your code will break. The solution is to create a system alias (symlink) that always points to the latest installed browser. Run the following commands as root: With the symlink in place, your PHP application (e.g., using Spatie's Browsershot or a custom Puppeteer-PHP wrapper) can now reference the headless browser with a clean, version-proof path. This makes your configuration robust against future browser updates. On Linux servers without a graphical user interface (GUI), Chrome cannot run its security sandbox. To allow Puppeteer to launch, you must instruct Chrome to run without the sandbox. While this lowers security, it's a common and necessary compromise for headless server environments. To allow unprivileged user namespaces (required for noSandbox): To confirm that Chrome can "see" all its required system libraries and dependencies, perform a final health check. This command will list any missing libraries, indicating a problem with your dependency installation. If this command returns nothing, your Puppeteer Setup Ubuntu 24.04 is 100% healthy and ready for action! By following this guide, you've established a robust Puppeteer environment with several key advantages: Your digital fortress for web automation is now complete. Happy Automating! Have you implemented Puppeteer Setup Ubuntu 24.04 in your projects? What challenges or successes have you encountered? Share your insights and experiences in the comments below! Templates let you quickly answer FAQs or store snippets for re-use. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse

Command

Copy

$ -weight: 600;">sudo dpkg -i --force-overwrite /var/cache/-weight: 500;">apt/archives/php8.3-redis_*.deb -weight: 600;">sudo -weight: 500;">apt --fix-broken -weight: 500;">install -y -weight: 600;">sudo dpkg -i --force-overwrite /var/cache/-weight: 500;">apt/archives/php8.3-redis_*.deb -weight: 600;">sudo -weight: 500;">apt --fix-broken -weight: 500;">install -y -weight: 600;">sudo dpkg -i --force-overwrite /var/cache/-weight: 500;">apt/archives/php8.3-redis_*.deb -weight: 600;">sudo -weight: 500;">apt --fix-broken -weight: 500;">install -y -weight: 500;">curl -fsSL https://deb.nodesource.com/setup_20.x | -weight: 600;">sudo -E bash - -weight: 600;">sudo -weight: 500;">apt-get -weight: 500;">install -y nodejs -weight: 500;">npm -weight: 500;">curl -fsSL https://deb.nodesource.com/setup_20.x | -weight: 600;">sudo -E bash - -weight: 600;">sudo -weight: 500;">apt-get -weight: 500;">install -y nodejs -weight: 500;">npm -weight: 500;">curl -fsSL https://deb.nodesource.com/setup_20.x | -weight: 600;">sudo -E bash - -weight: 600;">sudo -weight: 500;">apt-get -weight: 500;">install -y nodejs -weight: 500;">npm -weight: 600;">sudo -weight: 500;">apt-get -weight: 500;">install -y \ fonts-liberation libasound2t64 libatk-bridge2.0-0t64 libatk1.0-0t64 \ libatspi2.0-0t64 libcairo2 libcups2t64 libdbus-1-3 libdrm-dev \ libexpat1 libfontconfig1 libgbm-dev libgdk-pixbuf2.0-0 \ libglib2.0-0t64 libgtk-3-0t64 libjpeg-dev libnss3 libnspr4 \ libpango-1.0-0 libpangocairo-1.0-0 libxdamage1 libxext6 \ libxfixes3 libxkbcommon0 libxrandr2 libxrender1 libxss1 \ libxtst6 xdg-utils zlib1g libvulkan1 -weight: 600;">sudo -weight: 500;">apt-get -weight: 500;">install -y \ fonts-liberation libasound2t64 libatk-bridge2.0-0t64 libatk1.0-0t64 \ libatspi2.0-0t64 libcairo2 libcups2t64 libdbus-1-3 libdrm-dev \ libexpat1 libfontconfig1 libgbm-dev libgdk-pixbuf2.0-0 \ libglib2.0-0t64 libgtk-3-0t64 libjpeg-dev libnss3 libnspr4 \ libpango-1.0-0 libpangocairo-1.0-0 libxdamage1 libxext6 \ libxfixes3 libxkbcommon0 libxrandr2 libxrender1 libxss1 \ libxtst6 xdg-utils zlib1g libvulkan1 -weight: 600;">sudo -weight: 500;">apt-get -weight: 500;">install -y \ fonts-liberation libasound2t64 libatk-bridge2.0-0t64 libatk1.0-0t64 \ libatspi2.0-0t64 libcairo2 libcups2t64 libdbus-1-3 libdrm-dev \ libexpat1 libfontconfig1 libgbm-dev libgdk-pixbuf2.0-0 \ libglib2.0-0t64 libgtk-3-0t64 libjpeg-dev libnss3 libnspr4 \ libpango-1.0-0 libpangocairo-1.0-0 libxdamage1 libxext6 \ libxfixes3 libxkbcommon0 libxrandr2 libxrender1 libxss1 \ libxtst6 xdg-utils zlib1g libvulkan1 const { join } = require('path'); module.exports = { // Forces Chrome to stay inside the project folder cacheDirectory: join(__dirname, '.cache', 'puppeteer'), }; const { join } = require('path'); module.exports = { // Forces Chrome to stay inside the project folder cacheDirectory: join(__dirname, '.cache', 'puppeteer'), }; const { join } = require('path'); module.exports = { // Forces Chrome to stay inside the project folder cacheDirectory: join(__dirname, '.cache', 'puppeteer'), }; # Create the alias (shortcut) # IMPORTANT: Replace '/path/to/your/actual/chrome-headless-shell' with the exact path # to the 'chrome-headless-shell' executable downloaded by Puppeteer. # You can typically find this path by running: # find ~/.cache/puppeteer -name "chrome-headless-shell" # after Puppeteer has downloaded it once. ln -sf /path/to/your/actual/chrome-headless-shell /usr/local/bin/headless-chrome # Grant ownership to the web user # Replace 'your_web_user' with the actual user your web server (e.g., Nginx, Apache, PHP-FPM) runs as. chown -h your_web_user:your_web_user /usr/local/bin/headless-chrome # Create the alias (shortcut) # IMPORTANT: Replace '/path/to/your/actual/chrome-headless-shell' with the exact path # to the 'chrome-headless-shell' executable downloaded by Puppeteer. # You can typically find this path by running: # find ~/.cache/puppeteer -name "chrome-headless-shell" # after Puppeteer has downloaded it once. ln -sf /path/to/your/actual/chrome-headless-shell /usr/local/bin/headless-chrome # Grant ownership to the web user # Replace 'your_web_user' with the actual user your web server (e.g., Nginx, Apache, PHP-FPM) runs as. chown -h your_web_user:your_web_user /usr/local/bin/headless-chrome # Create the alias (shortcut) # IMPORTANT: Replace '/path/to/your/actual/chrome-headless-shell' with the exact path # to the 'chrome-headless-shell' executable downloaded by Puppeteer. # You can typically find this path by running: # find ~/.cache/puppeteer -name "chrome-headless-shell" # after Puppeteer has downloaded it once. ln -sf /path/to/your/actual/chrome-headless-shell /usr/local/bin/headless-chrome # Grant ownership to the web user # Replace 'your_web_user' with the actual user your web server (e.g., Nginx, Apache, PHP-FPM) runs as. chown -h your_web_user:your_web_user /usr/local/bin/headless-chrome <?php use Spatie\Browsershot\Browsershot; $siteURL = 'https://example.com'; // Replace with your target URL $browsershot = Browsershot::url($siteURL) // 🚀 Professional: Always points to the latest linked version ->setChromePath('/usr/local/bin/headless-chrome') ->setNodeBinary('/usr/bin/node') ->setNpmBinary('/usr/bin/-weight: 500;">npm') ->fullPage() ->windowSize(1920, 1080) ->deviceScaleFactor(1) ->userAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36') ->waitUntil('load') ->timeout(120000) ->ignoreHttpsErrors() ->disableGpu() ->noSandbox(); // Example usage (uncomment to use): // $browsershot->save('screenshot.png'); // echo $browsershot->bodyHtml(); ?> <?php use Spatie\Browsershot\Browsershot; $siteURL = 'https://example.com'; // Replace with your target URL $browsershot = Browsershot::url($siteURL) // 🚀 Professional: Always points to the latest linked version ->setChromePath('/usr/local/bin/headless-chrome') ->setNodeBinary('/usr/bin/node') ->setNpmBinary('/usr/bin/-weight: 500;">npm') ->fullPage() ->windowSize(1920, 1080) ->deviceScaleFactor(1) ->userAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36') ->waitUntil('load') ->timeout(120000) ->ignoreHttpsErrors() ->disableGpu() ->noSandbox(); // Example usage (uncomment to use): // $browsershot->save('screenshot.png'); // echo $browsershot->bodyHtml(); ?> <?php use Spatie\Browsershot\Browsershot; $siteURL = 'https://example.com'; // Replace with your target URL $browsershot = Browsershot::url($siteURL) // 🚀 Professional: Always points to the latest linked version ->setChromePath('/usr/local/bin/headless-chrome') ->setNodeBinary('/usr/bin/node') ->setNpmBinary('/usr/bin/-weight: 500;">npm') ->fullPage() ->windowSize(1920, 1080) ->deviceScaleFactor(1) ->userAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36') ->waitUntil('load') ->timeout(120000) ->ignoreHttpsErrors() ->disableGpu() ->noSandbox(); // Example usage (uncomment to use): // $browsershot->save('screenshot.png'); // echo $browsershot->bodyHtml(); ?> -weight: 600;">sudo sysctl -w kernel.unprivileged_userns_clone=1 -weight: 600;">sudo sysctl -w kernel.unprivileged_userns_clone=1 -weight: 600;">sudo sysctl -w kernel.unprivileged_userns_clone=1 ldd /usr/local/bin/headless-chrome | grep "not found" ldd /usr/local/bin/headless-chrome | grep "not found" ldd /usr/local/bin/headless-chrome | grep "not found" - Zero-Downtime Updates: Update the browser, -weight: 500;">update the symlink, and your application code remains untouched and functional. - Permission Sanity: Eliminate frustrating EACCES or other permission errors between the root user and your web user. - Ubuntu 24.04 Compatibility: Your setup is fully compliant with the new t64 architecture, avoiding common Noble Numbat pitfalls. - Predictable Deployments: Browser location and access are standardized, making deployments and scaling simpler.