服务器中使用puppeteer踩坑记录

2,911 阅读3分钟

前几天为博客友链页面做了一个获取友链跳转博客的缩略图,并且在后端设置了定时任务,每天去截屏更新一次。但是实际上并没有更新最新的截屏,从日志中才发现了puppeteer已经报错,因此并没有截屏成功

首先在本地运行正常的puppeteer,上了服务器每次运行都会报错,此时错误如下:

Error: Could not find Chromium (rev. 1056772). This can occur if either
1. you did not perform an installation before running the script (e.g. `npm install`) or
2. your cache path is incorrectly configured (which is: /home/www/.cache/puppeteer).
For (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration.
at ChromeLauncher.resolveExecutablePath (/blog-server/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ProductLauncher.js:120:27)
at ChromeLauncher.executablePath (/blog-server/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ChromeLauncher.js:166:25)
at ChromeLauncher.launch (/blog-server/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ChromeLauncher.js:70:37)
at async TasksService.setScreenShot (/blog-server/dist/schedule/tasks.service.js:37:29)

发生该错误的原因是 puppeteer 在某些构建步骤中打包并移动到新位置,导致了问题的产生
必须在构建好的项目中新增名为  .puppeteerrc.cjs 的文件,并将其放在根目录,  .puppeteerrc.cjs的配置如下(重装puppeteer生效)

// .puppeteerrc.cjs

const { join } = require('path');

module.exports = {
  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
};

在经过上面的操作,再次部署,已经可以找到 Chromium 了,但又出现了新的问题,如下............

Error: Failed to launch the browser process!
/blog-server/.cache/puppeteer/chrome/linux-1056772/chrome-linux/chrome: error while loading shared libraries: libatk-1.0.so.0: cannot open shared object file: No such file or directory


TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md

at onClose (/blog-server/node_modules/puppeteer-core/lib/cjs/puppeteer/node/BrowserRunner.js:299:20)
at Interface.<anonymous> (/www/wwwroot/blog-server/node_modules/puppeteer-core/lib/cjs/puppeteer/node/BrowserRunner.js:287:24)
at Interface.emit (node:events:406:35)
at Interface.close (node:readline:586:8)
at Socket.onend (node:readline:277:10)
at Socket.emit (node:events:406:35)
at endReadableNT (node:internal/streams/readable:1343:12)
at processTicksAndRejections (node:internal/process/task_queues:83:21)

此时我想打人.............

查看了官方github中readme里的常见问题和解决办法才知道出现问题原因居然是服务器缺少一些依赖,我使用的是CentOS的服务器,根据官方给出的方式下载缺失依赖

yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 -y

// 使用上面的命令安装完依赖包后 使用nss进行更新
yum update nss -y

此时的我抱着充满希望的心,重启了项目,盯着日志等待着截屏成功的通知...没想到,又是同样的错!

Error: Failed to launch the browser process!

又是啥情况!!!!!
找了好一会原因,才明白原因是Chrome的沙箱机制,这个我就不多介绍了,因为我也没怎么懂,我把官方的描述放下面了
github.com/puppeteer/p…

解决办法嘛官方给了两种:

  1. 如果完全信任在 Chrome 中打开的内容,可以关闭沙箱,在启动puppeteer时配置参数

    const browser = await puppeteer.launch({
      args: ['--no-sandbox', '--disable-setuid-sandbox'],
    });
    
  2. 根据官方的方案去配置沙箱.............

因为完全信任打开的内容,因此本人选择了前者

但是让我没想到的是,让服务器又背刺了...重启服务后,截屏正常,终于是松了一口气。但是仔细一看截屏的内容??????????中文乱码了...

原因是,centos中缺失中文字体的原因

随后,只能是在对字体下手了。。

  1. 安装fontconfig来管理字体库

    yum -y install fontconfig
    

    安装完fontconfig后,在/usr/shared目录可以看到fonts和fontconfig目录

  2. 创建字体目录并并修改权限

    // 创建字体目录:
    mkdir /usr/share/fonts/chinese
    // 修改字体文件的权限,使root用户以外的用户也可以使用:
    chmod -R 755 /usr/share/fonts/chinese
    
  3. 在 windows 的 C:\Windows\Fonts目录下找到需要的字体, copy 到 /usr/share/fonts/chinese目录下

  4. 建立字体索引信息,更新字体缓存

    cd /usr/share/fonts/chinese
    mkfontscale 
    //如果提示 mkfontscale: command not found,需自行安装 # yum install mkfontscale mkfontdir
    fc-cache -fv 
    //如果提示 fc-cache: command not found,则需要安装# yum install fontconfig
    

    设置完再次截屏,中文成功展示,终于踩完坑了!!