有了serverless,前端也可以快速开发一个操纵网页截图服务

  

<强>更多云原生技术资讯可关注阿里巴巴云原生技术圈。

  

操纵是什么?

  
  

操纵官网的介绍如下:
操纵木偶的人是一个节点库提供了一个高级API控制铬或铬DevTools协议。操纵木偶的无头默认情况下运行,但可以配置为运行完整的(non-headless)铬或铬。

     

通俗描述就是:操纵木偶的人可以将铬或铬者以* * *面的方式运行(当然也可以运行在有界面的服务器上),然后可以通过代码控制浏览器的行为,即使是非界面的模式运行,铬或铬也可以在内存中正确渲染网页的内容。你们,br/在那么操纵木偶的人能做什么呢?

  
      <李>生成网页截图或者PDF李   <李>抓取SPA(单页面应用程序)进行服务器渲染(* * *)   <李>高级爬虫,可以爬取大量异步渲染内容的网页   <李>模拟键盘输入,表单自动提交,登录网页等,实现UI自动化测试李   <李>捕获站点的时间线,以便追踪你的网站,帮助分析网站性能问题   
  

本文选择截图场景作为演示。

  

废话不多说了,我们直接给大家介绍下如何用函数计算产品来快速部署一个操纵网络应用。

  

如何快速部署一个分布式操纵网络应用?

  

为了快速部署分布式操纵网络应用,本文以函数计算服务为例来做展示。

  
  

<强>函数计算(函数计算):函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准备计算资源,并以弹性伸缩的方式运行用户代码,而用户只需根据实际代码运行所消耗的资源进行付费。函数计算更多信息参考。

     

有了函数计算服务,我们这里目标是搭建一个分布式应用,但做的事情其实很简单,那就是写好业务代码,部署到函数计算,仅此而已。

  

使用函数计算后,我们的系统架构图如下:

  

有了serverless,前端也可以快速开发一个操纵网页截图服务

  

效果演示

  

可以直接通过以下链接查看效果:& lt; br/在https://1911504709953557.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/puppeteer-test/html2png/?url=https//www.aliyun.com/product/fc
PS:第一次请求可能会有几秒的冷启动时间,通过使用预留模式可以完全去除冷启动,这题超纲,下次再讲。

  

搭建步骤步骤:

  

整体流程如下图所示:

  

有了serverless,前端也可以快速开发一个操纵网页截图服务

  

其中,需要我们操作的只有有趣的Init,有趣的安装以及有趣的部署命令,每个的步骤内容都会由这三个命令自动完成。

  

1。工具安装

  

<>强安装有趣的工具:

  

建议直接从这里下载二进制可执行程序,解压后即可直接使用。下载地址。

  

<>强安装码头工人:
可以按照这里介绍的方法进行安装。

  

2。初始化项目:

  

通过有趣的工具,使用下面的命令可以快速初始化一个操纵网络应用的脚手架:

  
 <代码>有趣的init - n puppeteer-test http-trigger-node-puppeteer  
  

其中<代码> - n puppeteer-test 表示初始化项目的目录名称,<代码> http-trigger-node-puppeteer 表示要使用的模板名称,可以省略该名称,省略后,可以从终端提示的列表中自行选择需要的模板。你们,br/祝辞执行完毕后,可以看到如下的目录结构:

  
 <代码>。
  ├──index.js
  ├──package.json
  └──template.yml  
  

相比较于传统的操纵应用,这里仅仅多了一个模板。yml文件,用于描述函数计算的资源。你们,br/祝辞;而指数。js就是我们的业务代码了,可以按照操纵官方帮助文档的要求书写自己的业务代码,这里不再重复阐述,核心代码如下:

  
 <代码> const浏览器=等待puppeteer.launch ({
  无头:没错,
  args:(
  “——no-sandbox”,
  “——disable-setuid-sandbox”,
  ]
  });
  const页面=等待browser.newPage ();
  等待page.emulateTimezone(“亚洲/上海”);
  等待page.goto (https://www.baidu.com, {
  “waitUntil”:“networkidle2”
  });
  等待页面。截图({路径:/tmp/例子,fullPage:真的,类型:“png”});
  等待browser.close(); 

有了serverless,前端也可以快速开发一个操纵网页截图服务