Node.js + puppeteer + chrome 环境部署至linux

踩坑整整5天才和运维大哥部署成功......

先说下具体的思路，因为puppeteer的运行必须依赖于浏览器，这里使用的是chrome,

此处安装浏览器的方法有两种， 是因为puppeteer提供了两种连接调试浏览器的方案 连接已有的浏览器如下所示：

      console.log("🔗 连接到本地Chrome浏览器...");
      const browserURL = 'http://localhost:9222'; //   浏览器服务启动之后可以直接访问
      
     /*   
     
     
     避坑：这里会有个问题，就是页面会一直保存在 对应端口的浏览器页面在浏览器的本地存储，也就是说，如果你的脚本执行的任务有登录的逻辑，那么下次脚本运行之后，会直接访问到第一次登录的用户信息，类似于用户自己操作登录后，后续进入也不用登录是一个逻辑。
     
     这里是本地连接和使用自带的chrome的一个很大的区别，
   请务必在js逻辑中做兼容处理，
   
   否则你会发现，该模式和自带的模式出现不一样的结果，而不知道问题所在。
     
     
        */
      
      browser = await puppeteer.connect({
        browserURL: browserURL,
        defaultViewport: null
      });
      
      
    
      
      
      
      
      
      
      const version = await browser.version();
      console.log(version);

使用puppeteer自带的如下所示：

// 启动新的浏览器实例（默认模式）
      // 使用puppeteer自带的Chromium，避免系统浏览器依赖
      const browserConfig = {
        headless: false, // 使用配置中的无头模式
        // 不指定executablePath，让puppeteer使用自带的浏览器
        args: [  // 相关配置参数
          ...config.browser.args,
          `--window-size=${config.browser.windowSize.width},${config.browser.windowSize.height}`,
          "--no-sandbox",
          "--disable-setuid-sandbox",
          "--disable-dev-shm-usage",
        ],
        ignoreHTTPSErrors: true,
        defaultViewport: null,
        timeout: 6 * 1000,
      };

      console.log(getTimestampedLog("📱 启动浏览器..."));
      browser = await puppeteer.launch(browserConfig);
      const version = await browser.version();
      console.log(version);

第一种就是: 直接使用，puppeteer自己的浏览器，缺点是: 安装慢，部署很容易失败

第二就是:会有什么权限问题导致无法启动 例如这样：（自动化操作失败：Failed to launch the browser process: spawn /root/.cache/puppeteer/chrome/1inux-142.0.7444.61/chrome-1inux64/chrome ENOE）

综上所述：

本文采用第二条路就是，单独安装运行chrome服务， 然后，用puppeteer链接本地的chrome服务。

1, 安装chrome 并运行服务至9222端口

注意：本人的服务器是cent os7（下面两种方案都可以用， 方案二是因为运维的服务器， 系统不支持方案一， 因此提供docker 的方案）

chrome 安装

方案一：

1, liunx 先安装一下谷歌浏览器

sudo yum install https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm -y

2. 启动浏览器 无头模式 开放本地 9222 端口

google-chrome-stable --no-sandbox --headless --disable-gpu --remote-debugging-port=9222

方案二：（提前安装 docker ）

拉取镜像

docker pull selenium/standalone-chrome

运行镜像

docker run -d \
  -p 9222:9222 \
  -v /dev/shm:/dev/shm \
  --name chrome-debug \
  --entrypoint google-chrome \
  selenium/standalone-chrome \
  --remote-debugging-address=0.0.0.0 \
  --remote-debugging-port=9222 \
  --no-sandbox \
  --headless

检测是否运行成功

curl http://localhost:9222/json/version

运行成功会输出如下的信息：

{
   "Browser": "Chrome/142.0.7444.162",
   "Protocol-Version": "1.3",
   "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/142.0.0.0 Safari/537.36",
   "V8-Version": "14.2.231.18",
   "WebKit-Version": "537.36 (@c076baf266c3ed5efb225de664cfa7b183668ad6)",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/browser/5f3804d2-146a-475c-a43a-c5e211387413"
}

有如上的信息，恭喜你，已经安装成功了！！！

2，部署一下 puppeteer 的node服务。 这里就看看什么版本的 puppeteer 了。 本人用的新版本的 "puppeteer": "^24.29.1" node > 18 即可。

npm install //安装
node xxx.js // 运行

如果失败了，配置镜像什么的就好了。（不必过多赘述，前端估计都遇到过）

如继续失败，还可以使用cnpm

npm i -g cnpm

cnpm install

即可，cnpm几乎不会失败。

node xxx.js // 就可以运行了。