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

161 阅读3分钟
踩坑整整5天才和运维大哥部署成功……

先说下具体的思路,因为puppeteer的运行必须依赖于浏览器,这里使用的是chrome,先安装chrome,然后部署node服务

此处安装浏览器的方法有两种, 是因为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 // 就可以运行了。