ubuntu22.04下Puppeteer+Nodejs截图服务安装

Feb 23, 2024

—

from

本文操作的vps是美国的buyvm.net购买的，特点就是不限带宽，不限流量，购买链接。
网络上有多种安装Puppeteer+Nodejs截图服务的方法，本文是安装环境步骤：

nodejs的js脚本写好后，建议先直接运行 node xxx.js 前台查看报错，解决好问题后，再进行下面的pm2 的进程管理。

nodejs服务可能用到pm2，安装文档：
https://moneyslow.com/%e4%bd%bf%e7%94%a8pm2%e8%bf%9b%e7%a8%8b%e7%ae%a1%e7%90%86%e5%99%a8%ef%bc%8c%e8%ae%a9nodejs%e7%a8%8b%e5%ba%8f%e5%bc%80%e6%9cno%ba%e8%87%aa%e5%8a%a8%e5%90%af%e5%8a%a8.html

第一步，安装node最新版本：

安装18版本的nodejs：
curl -s https://deb.nodesource.com/setup_18.x | sudo bash
apt install nodejs

安装如果报错，执行下面：
apt purge nodejs
apt autoremove

再次执行：
apt install nodejs

查看版本：
root@moneyslow:~# node -v
v18.19.1

第二步，安装google-chrome浏览器命令

尝试执行js服务：
root@moneyslow:# node app.js 
Server is running on port 3000
failed Error: Failed to launch the browser process! spawn google-chrome ENOENT

看报错，缺浏览器，安装google-chrome：
wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmour -o /usr/share/keyrings/google_linux_signing_key.gpg

echo "deb [arch=amd64 signed-by=/usr/share/keyrings/google_linux_signing_key.gpg] http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list

root@moneyslow:/# cat /etc/apt/sources.list.d/google.list
deb [arch=amd64 signed-by=/usr/share/keyrings/google_linux_signing_key.gpg] http://dl.google.com/linux/chrome/deb/ stable main

安装浏览器：
apt install google-chrome-stable
如果出现依赖错误，根据提示执行：
apt --fix-broken install
再次执行：
apt install google-chrome-stable
如果出现错误：Unable to locate package google-chrome-stable
尝试更新一下软件库：apt-get update
再次安装：apt-get install google-chrome-stable
查看版本：
root@moneyslow:~# google-chrome --version
Google Chrome 122.0.6261.69 
root@us:~# google-chrome --version
Google Chrome 124.0.6367.60 
root@VM-8-2-ubuntu:~# google-chrome --version
Google Chrome 128.0.6613.84

截图页面方块字的问题：

https://moneyslow.com/puppeteernodejs%e6%88%aa%e5%9b%be%e4%b9%b1%e7%a0%81%e4%b8%ad%e6%96%87%e5%8f%98%e6%96%b9%e5%9d%97%e5%9c%a8ubuntu-22-04%e4%b8%8a%e5%ae%89%e8%a3%85%e4%b8%ad%e6%96%87%e5%ad%97%e4%bd%93.html

pm2管理js服务，参考：
https://moneyslow.com/%e4%bd%bf%e7%94%a8pm2%e8%bf%9b%e7%a8%8b%e7%ae%a1%e7%90%86%e5%99%a8%ef%bc%8c%e8%ae%a9nodejs%e7%a8%8b%e5%ba%8f%e5%bc%80%e6%9c%ba%e8%87%aa%e5%8a%a8%e5%90%af%e5%8a%a8.html

第三步，先进行前台启动，解决可能的报错：

root@moneyslow:~# cd /xxx/
pm2 start app.js --name jietu   
[PM2] Starting /xxx/app.js in fork_mode (1 instance)
[PM2] Done.
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐
│ id │ name               │ mode     │ ↺    │ status    │ cpu      │ memory   │
├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤
│ 0  │ jietu              │ fork     │ 0    │ online    │ 0%       │ 22.0mb   │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘
root@moneyslow:/xxx/# pm2 list
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐
│ id │ name               │ mode     │ ↺    │ status    │ cpu      │ memory   │
├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤
│ 0  │ jietu              │ fork     │ 0    │ online    │ 0%       │ 82.0mb   │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘

第四步：设置开机自启动服务：

现在是手动启动，如果想开机自启动，执行：
 pm2 startup  
。。。。
[PM2] Writing init configuration in /etc/systemd/system/pm2-root.service
[PM2] Making script booting at startup...
[PM2] [-] Executing: systemctl enable pm2-root...
[PM2] [v] Command successfully executed.
+---------------------------------------+
[PM2] Freeze a process list on reboot via:
$ pm2 save

[PM2] Remove init script via:
$ pm2 unstartup systemd

看到了，上面自动生成了启动脚本：/etc/systemd/system/pm2-root.service
让我们执行开机启动服务，执行命令：
systemctl enable pm2-root
查看状态：

root@moneyslow:~# systemctl status pm2-root
● pm2-root.service - PM2 process manager
     Loaded: loaded (/etc/systemd/system/pm2-root.service; enabled; vendor preset: ena>
     Active: active (running) since Fri 2024-02-23 15:45:26 CST; 3min 4s ago
       Docs: https://pm2.keymetrics.io/

重启服务器进行验证，应该是自动启动服务了。

其他可能对你有帮助的文章：
https://www.baeldung.com/linux/command-line-website-screenshots
https://urlbox.com/7-ways-website-screenshots-nodejs-javascript

nodejs的截图速度优化：
https://cloud.tencent.com/developer/article/1673764

//      args: ['--no-sandbox', '--disable-setuid-sandbox', '--enable-ipv6'],
      args: ['--disable-gpu', '--disable-dev-shm-usage', '--no-first-run', '--no-zygote', '--single-process', '--no-sandbox', '--di
sable-setuid-sandbox', '--enable-ipv6'],

关于监听端口：
https://www.grouparoo.com/blog/node-js-and-ipv6
关于抓去截图的优化：
https://scrapeops.io/puppeteer-web-scraping-playbook/nodejs-puppeteer-optimize-puppeteer/

nodejs