摘要：在数字化出海的浪潮中，AI工作流正成为提升效率、降低成本的利器。本文作者通过n8n搭建了一个AI驱动的工作流，用于帮助网站出海并赚取美金。在第一部分介绍了如何连接Supabase数据库后，本文继续深入探讨如何实现网站截图以及生成SEO友好的介绍信息。

在数字化出海的浪潮中，AI工作流正成为提升效率、降低成本的利器。本文作者通过n8n搭建了一个AI驱动的工作流，用于帮助网站出海并赚取美金。在第一部分介绍了如何连接Supabase数据库后，本文继续深入探讨如何实现网站截图以及生成SEO友好的介绍信息。

书接上回：用n8n做AI工作流驱动网站出海赚美金1：连接Supabase数据库

年初的时候我做了一个AI编程工具的导航网站，打算流量上来后就可以接谷歌广告赚美金：

设想是根据AI编程开发的流程来推荐每个阶段的效率工具：灵感与想法、原型与设计、编程开发、数据库与存储、部署上线、扩展能力、数据分析、内容管理、协作与运营

这是整个网站的后端处理逻辑：

今天来解决第二个阶段：

效果是这样：

每个网站的截图作为卡片封面，网站自带的标题作为卡片标题，同时生成短描述

每个卡片点进去后就是一个详情描述，这里也是希望谷歌收录的信息，所以需要SEO友好

这个需求的核心就是网站截图，有 3种方式

1. 第一种是 本地部署python跑

例如tap4ai自带的后端就是用的pyppeteer，相当于调用Chrome去访问网址后，截图，核心代码

2. 第二种 是调用别人现成的API

目前测下来效果比较好、且免费的是 urlscan

这是它的文档地址https://urlscan.io/docs/api/

能顺利截reddit的图，示例：https://urlscan.io/liveshot/?width=600&height=400&url=https://www.reddit.com/

结构就是 https://urlscan.io/liveshot/?width=【宽度】&height=【高度】&url=【网址】

但测了几个网站，语言都是德语。如上图还会有一些遮挡，应该是设备设置的问题。

其他的，要么是被禁了，要么要付费。

例如用wordpress的预览功能，会限制被禁止，应该是因为服务器在国内的原因

https://s0.wp.com/mshots/v1/https://www.reddit.com/?w=600&h=400

其他的，例如 https://gugudata.com/，就要付费，效果未知，pass

3. 第三种，就是docker部署一个无头浏览器，通过端口的形式供n8n调用

具体参考：https://community.n8n.io/t/automate-screenshots-pdfs-and-more-integrating-n8n-with-self-hosted-browserless-playwright-changedetection-io/53351

这种，说实话还是很麻烦，尝试了一下没成功，就先放弃了。

看下来效果最好的还是第一种方法，但工作流平台都有一个通病：无法运行复杂的 python 脚本。

所以解决方案是把第一种，也就是tap4ai原本就有的python调用playwright截图功能封装成api，供n8n调用。

这个也是我解决很多复杂功能的方案：先在 Cursor完成单独模块的开发，再打包成 fastapi，通过宝塔面板部署到服务器上，再打开端口权限给 n8n 调用 。

参考 cursor 的提示词：请新建一个脚本，然后帮我把@website_crawler.py中的网页截图的相关能力，单独写到一个脚本里，如果涉及到调用其他的脚本也把代码一起放进去这是网页截图的核心部分，你需要去分析还需要哪些：…调用`sequentialthinking`MCP工具去一步一步思考处理，确保不要影响到其他的功能代码

继续把代码封装成 fastapi 接口：继续优化把@website_screenshot.py 封装成fastapi接口，用户传入一个网址后，返回截图的url，包括云存储url、缩略图url

同时，我还让 cursor 写了一个 api 测试脚本，测完没问题，我才部署：

插句题外话，部署服务器很推荐用宝塔面板，通过面板来操作，能省不少事。包括 n8n、dify 等的部署基本上都很丝滑。

1. 在宝塔面板新建文件夹

把关键文件，包括代码脚本、.env环境配置、requirements.txt等一起上传进去

2. 新建Python项目

在下图位置，填好信息即可。

3. 查看日志确保服务启动

4. 在线调试

fastapi 有自带一个接口文档同时还能在上面调试很方便：

例如我部署在3333端口，文档就在 http://ip:3333/docs

找到接口函数，点Try it out，并修改下面的请求参数

点Execute，下面Curl就是自动生成好的请求

下面Response boy我们看到返回200，数据正常

调通了，最后才是到 n8n 新建 HTTP Request 节点，确保能正常返回网站的截图信息：

至此，我们最麻烦的一步就解决了。

接下来，就可以着手去新建工作流。

方便起见，我们继续沿用上次的工作流，在提交网站后，直接就把提交的信息拿来抓网站截图和写介绍。

如图，上面的就是上次的工作流，解决的是从用户的输入中解析出网址，并提交到数据库，等待爬取。

不同的是，我补充了一个提取多个网站信息的节点，方便用户同时提交多个网站，甚至是把一个多网站介绍的文章放进去，也能直接全部录入了。

下面的是这次新增的工作流，解决的是把用户提交的网站进行截图、生成SEO友好的详情。

对于网站截图，上一小节已经说了通过把python脚本部署成API后，新建http请求。

接下来看写网页详情的这个节点：

测试一下录入网站：https://www.reddit.com

数据库有了：

前端也有了：

详情页也写好了：

感兴趣可以进去看看：

因为我服务器在海外，通过这样的形式，对于风控较高的Reddit也能正常截图，并不会出现拦截之类的。这也是为什么我要「多此一举」部署到线上的其中一个原因。

来源：人人都是产品经理