使用 gatsby-transformer-screenshot 为网站 URL 自动生成截图Gatsby 插件与 AWS Lambda 架构解析【免费下载链接】gatsbyReact-based framework with performance, scalability, and security built in.项目地址: https://gitcode.com/gh_mirrors/ga/gatsby导读本文基于 Gatsby 官方仓库中的gatsby-transformer-screenshot插件文档完整讲解如何在 Gatsby 项目中自动为一批网站 URL 生成截图插件监听 YAML 数据源中的站点节点通过 AWS Lambda 无服务器函数 S3 存储完成截图抓取并以Screenshot子节点含screenshotFile字段的形式接入 Gatsby 数据层可直接配合gatsby-plugin-image使用。读完本文你将掌握该插件的安装配置、GraphQL 查询方式、AWS Lambda 端到端部署流程以及基于源码的缓存、重试、占位图等底层机制。插件定位把 URL 列表变成 PNG 截图节点gatsby-transformer-screenshot是一个转换器 远程资源型插件它默认监听名为SitesYaml的节点来源于 YAML 文件sites.yml只要节点带有url字段插件就会向你自己部署的 AWS Lambda 截图服务发起请求获取截图 PNG 的远程地址与过期时间通过gatsby-source-filesystem的createRemoteFileNode把截图下载为本地文件节点创建Screenshot子节点并挂到原始站点节点下暴露screenshotFile字段。数据源格式sites.yml 示例- url: https://reactjs.org/ name: React - url: https://about.sourcegraph.com/ name: Sourcegraph - url: https://simply.co.za/ name: Simply安装与基本配置安装插件npm install gatsby-transformer-screenshot插件声明peerDependencies为gatsby: ^5.0.0-nextNode 引擎要求18.0.0 26见 package.json使用前请确认项目版本匹配。在 gatsby-config.js 中注册module.exports { plugins: [ { resolve: gatsby-transformer-screenshot, options: { // 见下文 Lambda setup需要先创建自己的截图端点 screenshotEndpoint: your-aws-endpoint, } } ], }默认情况下插件只处理来自sites.yml的节点。如果你希望同时处理其他来源的节点类型例如站点 Starter 数据可以通过nodeTypes传入类型数组module.exports { plugins: [ { resolve: gatsby-transformer-screenshot, options: { nodeTypes: [StartersYaml, WhateverType], }, }, ], }从源码看类型判定逻辑位于 src/gatsby-node.js 的shouldOnCreateNodeconst validNodeTypes [SitesYaml].concat(pluginOptions.nodeTypes || []) return validNodeTypes.includes(node.internal.type) node.url即只有节点类型命中白名单且带有url字段时onCreateNode才会为其创建截图节点。数据流与并发控制源码解读插件在onCreateNode中并不会同步等待截图完成而是把任务推入一个基于fastq的并发受限队列src/gatsby-node.jsconst LAMBDA_CONCURRENCY_LIMIT 50 const screenshotQueue Queue.promise(worker, LAMBDA_CONCURRENCY_LIMIT)队列并发上限为50避免一次性对 Lambda 发起过多请求每次任务执行worker时会先做两次尝试首次失败后等待 1 秒重试若仍失败则抛出错误由onCreateNode的 try/catch 捕获后静默跳过该站点src/gatsby-node.js。每次截图成功后会创建如下的Screenshot节点src/gatsby-node.jsconst screenshotNode { id: createNodeId(${parent} Screenshot), url, expires, // 来自 Lambda 响应的过期时间 parent, children: [], internal: { type: Screenshot }, screenshotFile___NODE: fileNode.id, // 关联到远程文件节点 usingPlaceholder: USE_PLACEHOLDER_IMAGE, }同时通过createParentChildLink把Screenshot挂为站点节点的子节点于是便可在 GraphQL 中以childScreenshot查询。缓存与过期机制插件的onPreBootstrap钩子负责体检已存在的Screenshot节点src/gatsby-node.js若节点已过期new Date() new Date(n.expires)或占位图开关GATSBY_SCREENSHOT_PLACEHOLDER与节点记录的usingPlaceholder不一致则重新入队请求 Lambda若未过期则调用touchNode防止 Gatsby 垃圾回收远程文件节点从而复用缓存的截图避免重复下载。GraphQL 查询方式截图文件是普通的 PNG 文件节点查询方式如下{ allSitesYaml { edges { node { url childScreenshot { screenshotFile { id } } } } } }screenshotFile与从文件系统加载的任何图片一致因此可以与本仓库的gatsby-plugin-image如gatsbyImageData组合使用在页面上渲染响应式截图。官方文档也特别说明可以将截图数据与gatsby-source-filesystem生态打通远程文件节点正是由其创建。Lambda 服务端部署指南你需要自行在 AWS Lambda 上运行截图服务。插件本身不提供托管端点screenshotEndpoint指向的就是你部署好的服务。AWS Lambda 是无服务器计算平台可在不搭建服务器的情况下响应事件运行代码。本插件使用 Lambda 截图并把图片存入 AWS S3。第一步创建 S3 桶并配置生命周期策略在 AWS 中创建用于存放截图的 S3 桶为该桶创建 Lifecycle Policy生命周期策略设定文件过期天数——截图将缓存到该日期为止插件据此复用缓存。第二步打包 Lambda 函数在插件目录packages/gatsby-transformer-screenshot下执行npm run build-lambda-package该命令见 package.json 的 scripts会生成lambda-dist临时目录拷贝 lambda/index.js、lambda/screenshot.js 与 lambda/package.json在目录内执行npm install --production安装运行时依赖chrome-aws-lambda、puppeteer-core、gatsby-core-utils、aws-sdk打包为lambda-package.zip。将生成的lambda-package.zip上传为 AWS Lambda 函数的源码包。最后必须为 Lambda 设置环境变量S3_BUCKET指向第一步创建的桶。第三步通过 API Gateway 暴露 HTTP 接口创建新的 API在/下创建新资源选择Configure as proxy resource配置为代理资源所有设置保持默认在该资源上创建方法集成类型选择Lambda Function ProxyLambda 函数代理填入你的 Lambda 函数详情。完成后把 API 的调用 URL 填入插件配置的screenshotEndpoint。Lambda 内部实现要点Lambda 的入口处理器 lambda/index.js 接收{url: ...}请求体可选width、height、fullPage参数默认 1024×768、非整页用chrome-aws-lambda启动无头 Chromiumheadless: true设备像素比 2打开页面并等待networkidle2事件再额外等待 1 秒让图片淡入调用page.screenshot({ fullPage })截取 PNG写入存储见 lambda/screenshot.js设置S3_BUCKET时上传至 S3ACL 为public-readContentType 为image/png并解析 S3 返回的Expiration作为expires时间响应体形如{ url, expires, success: true }插件端拿到后据此创建远程文件节点。存储层支持两套实现S3Screenshot生产与FSScreenshot本地测试写入./screenshots目录。lambda 目录的 README 提供了两种手动测试方式# 本地测试 Puppeteer 截图功能截图保存在 ./screenshots TEST_WITH_LOCAL_FStrue SITE_URLhttps://en.wikipedia.org/wiki/Wool node __manual_tests__/local-test.js # 测试已部署的 Lambda 端点 SCREENSHOT_ENDPOINTURL to Lambda endpoint SITE_URLhttps://en.wikipedia.org/wiki/Iron node __manual_tests__/remote-test.js注意成功运行的截图会被缓存重新测试截图功能时请更换SITE_URL。占位图模式加速开发与查询当站点列表很大时逐个下载并处理截图会拖慢数据源构建与查询。插件提供了占位图开关开启后不再请求 Lambda而是统一复用插件内置的 placeholder.png并把expires设置为远期的 2999 年见 src/gatsby-node.js从而让构建流程快速通过、后续再批量替换真实截图。方式一环境变量GATSBY_SCREENSHOT_PLACEHOLDERtrue gatsby develop方式二dotenv .env.development在gatsby-config.js中引入dotenvGatsby 环境变量机制见官方文档并在项目根目录新建.env.developmentGATSBY_SCREENSHOT_PLACEHOLDERtrue占位文件节点的创建实现在 src/placeholder-file-node.js首次调用时通过gatsby-source-filesystem的createFileNode把placeholder.png注册为文件节点并以模块级变量缓存复用后续所有站点共享同一个文件节点开销极低。适用前提与限制必须自建 Lambda 端点screenshotEndpoint指向的服务决定截图能力插件自身只负责调度与落盘缓存依赖 S3 生命周期策略expires来自 S3 对象元数据桶未配置过期策略时缓存语义不完整构建依赖外部网络onCreateNode会请求 Lambda 与目标站点目标站可达性影响构建稳定性失败站点会静默跳过节点类型白名单只有SitesYaml及nodeTypes中显式声明的类型才会被处理。小结gatsby-transformer-screenshot是一个数据驱动 无服务器的完整截图方案sites.yml提供 URL 列表AWS Lambdachrome-aws-lambda Puppeteer负责抓图S3 负责缓存Gatsby 插件层用并发队列、过期重试、touchNode防回收与占位图开关把整条链路打磨成可稳定复用的数据源能力。如果你需要在 Gatsby 站点中展示大量网站的实时缩略图可以参考本文配置与 插件源码 按需调整并发数、重试策略与存储后端。【免费下载链接】gatsbyReact-based framework with performance, scalability, and security built in.项目地址: https://gitcode.com/gh_mirrors/ga/gatsby创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考