之前实现了在 Ubuntu 服务器上网页自动截图的功能，本文记录将其部署在服务器上的过程。

实现思路 {#实现思路}

在实现 Ubuntu 自动截图的基础上，需要将该功能部署成前端可以访问的服务

1. 配置好自动截图所需的服务
2. 前端发送需要使用的网址列表
3. 搭建后端程序，监听端口，启动线程异步执行截图功能并保存在某个文件夹
4. 保存的文件名为网址的 md5 字符串
5. 前端调用图像时在前端计算网址的 md5 值并拼凑出图像地址进行图像
6. nginx 反向代理提供 https 链接
7. 设置系统开机自动启动服务

实现步骤 {#实现步骤}

web 截图环境配置 {#web-截图环境配置}

• 参考 无界面 Ubuntu 服务器搭建 selenium + chromedriver 实现 Python 自动网页截图

前端发送网址列表 {#前端发送网址列表}

• 通过 ejs 模板结合 js 脚本代码获取 yaml 配置文件 中的网址列表

• 使用 jquery 发送 post 请求

搭建后端 {#搭建后端}

• 后端用 Python 实现监听端口服务，开放某个端口和路由
• 获取 request 后解析出网址列表
• 参考代码：

• 核心功能在 FileManager 类中实现

• 主要逻辑为获取 url 列表，挑出本地没有存到的图像，开启 异步执行 网页截图 保存到本地的工作
• 把获取不到的放到一个躺平列表里，之后再见到这个链接直接放弃
• 过程中保存日志

网址的 md5 字符串 {#网址的-md5-字符串}

• 由于网址可能出现千奇百怪的字符，为了统一并且不会碰撞，采用将网址字符串转换为 md5 字符串的方法

• 使用 Python 和 JS 中实现 md5 的函数/包完成转换

前端 {#前端}

• 用 ejs 模板语法与 js MD5 拼接出 MD5 图像链接

后端 {#后端}

• Python 实现 md5

nginx 反向代理提供 https 链接 {#nginx-反向代理提供-https-链接}

• 用之前 Nginx 的 docker 为本地端口映射出 https 协议的对外端口

设置系统开机自动启动服务 {#设置系统开机自动启动服务}

• ubuntu selenium + chromedriver 网页截图需要 xvfb

• 创建 shell 脚本

• 创建 systemctl 服务文件

• 设置开机启动

保存截图 {#保存截图}

• 在保存文件的目录下可以看到保存的截图文件

参考资料 {#参考资料}

• https://www.zywvvd.com/notes/tools/selenium-screenshot/ubuntu-selenium-chrome/ubuntu-selenium-chrome/

• https://www.zywvvd.com/notes/coding/python/asyncio/threading/

• https://www.zywvvd.com/notes/coding/node-js/node-js-ejs/node-js-ejs/

• https://www.zywvvd.com/notes/tools/yml/yml-usage/

• https://www.zywvvd.com/notes/coding/java-script/js-post-get/js-post-get/

• https://www.zywvvd.com/notes/coding/java-script/js-md5/js-md5/

• https://www.zywvvd.com/notes/coding/internet/nginx-docker-https/nginx-docker-https/

• https://www.zywvvd.com/notes/coding/shell/shell-usage/shell-usage/

• https://www.zywvvd.com/notes/system/linux/commands/systemd/systemd_practice/

文章链接：
https://www.zywvvd.com/notes/hexo/website/42-web-screenshot-service/web-screenshot-service/