[转载，后续补上实践case]

有了 Docker，用 JavaScript 框架开发的 Web 站点也能很好地支持网络爬虫的内容抓取

【编者的话】Prerender 服务能够为网络爬虫提供预先渲染的动态页面内容，解决了用 JavaScript 框架构建的 Web 站点不支持爬虫抓取的问题。本文详细描述了一种解决方案，尤其是提供了集成 Prerender 服务的 Docker 容器镜像。

如果你正在使用 AngularJS 构建一个面向大众消费者的应用，你肯定希望用户能把它分享到社交媒体上。对于特定的应用而言，丰富的社交分享差不多是最重要的营销渠道。所谓「丰富的社交分享」，是指像下面这样的分享：

可以看到， Facebook, Twitter 等社交站点能够获取非常丰富的内容，不仅限于网页标题和图片。为什么可以做到这一点？因为在网页 HTML 文档的 head 部分包含了有特别含义的元数据标记。像 Facebook 以及 Pinterest 和 Google+ 等社交站点能读取遵循开放图协议标准的元数据，例如，

  1. <head>
  2. <meta property="og:title" content="My Page" />
  3. <meta property="og:description" content="A description of my page." />
  4. <meta property="og:image" content="http://www.mysite.com/images/my_lovely_face.jpg" />
  5. <!-- etc. -->
  6. </head>

Twitter 也支持类似的机制，不过它用的元数据属性前缀是 twitter: ，而不是 og: 。

当用户在社交站点上分享一个 URL 时，社交站点会启动一个网络爬虫去抓取该页面的内容。网络爬虫首先在网页源文档中找出各种元数据标记，然后才会查看常规 HTML 元素的内容，例如， &lt;head> 标记和网页中的图像等。

用 AngularJS（以及其它 JavaScript 框架）开发的 Web 站点不支持爬虫的抓取

我已经在 Earlyclaim 站点的网页中添加了所有必需的遵循开放图协议标准的元数据标记。但是，当我把 Earlyclaim 站点的一个链接分享到 Facebook 时，显示的结果却是非常令人失望的：

导致如此糟糕的结果的原因很简单：抓取网页时，网络爬虫并不会执行网页中的 JavaScript 代码。因此，爬虫抓取到的内容是这样的：

  1. <head>
  2. <meta property="og:title" content="{{meta.title}} - earlyclaim.com" />
  3. <meta property="og:description" content="{{meta.description}}" />
  4. <meta property="og:image" content="{{meta.image}}" />
  5. <!-- etc. -->
  6. </head>

解决方案

解决方案的基本思想是：应用一种在服务器端执行的用户代理探测方法，识别出当前请求来自于社交站点的爬虫；此时，服务器不会像处理浏览器请求那样返回一个 AngularJS 模板文件，而是重定向到一个服务器端生成的页面，页面中包含了希望提供的元数据标记以及正确填写的信息。

经过 Google 搜索，以及与其它创业公司 startypchile 的技术人员的讨论，我们发现了 prerender.io 服务，它能够预先渲染好动态页面的内容。这为问题的解决奠定了良好的开端。

Prerender 的开发者提供了很多中间件， 还把 prerender 引擎开源，因为他们认为

我们相信搜索引擎优化（SEO）是一种权利，而非一种特权！

当然，如果你愿意，也可以付费使用他们提供的 Prerender 托管服务。

支撑 Earlyclaim 的基础设施是以 Docker 为基础构建的。为了集成 Prerender 服务，我们首先在 Docker Hub 中找出相关的几个容器镜像，然后进行试用，结果难以令人感到满意。

我们的需求包括：

  • 完全可定制的环境（通过 Kitematic ）；
  • 能够使用 Redis 作为缓存数据库；
  • 立即可用的 Prerender 容器。

这些也是我们自行构建容器镜像的原因！

为什么公开我们的解决方案

首先，我们信仰「协同智能」：

协同智能是多主体、分布式系统的特征，其中每个主体（人或者机器）都有唯一的位置，自主地为问题解决网络作贡献。在生态系统中，有机体的协同自治使得演化成为可能。在自然生态系统中，每个有机体的唯一标识来自于自身的基因、环境以及它在生态系统中的行为和位置。自然生态系统为设计下一代社交网络提供原则，使之能够支持协同智能、众包个人的专长、偏好以及在问题解决过程中的独特贡献。
- 摘自 维基百科

我们的解决方案是建立在开源的 prerender.io 引擎 的基础之上：没有它，就不会有我们的解决方案。 Prerender 团队太棒了。

其次，同样重要的是，在与很多创业公司的开发者交流之后，我们了解到：他们很多人都在使用 AngularJS 或者其它框架构建 Web 应用，也需要解决搜索引擎优化/丰富的社交分享问题。然而，由于不知道解决方法，或者感觉解决起来太耗费时间，或许会影响更为重要的产品发布时间，他们暂时搁置这个问题，留待以后解决。还有些开发者甚至没有意识到有这个问题，当从我们这里听说了之后，他们请求我们把解决方案分享出来。

我们相信这个方案能够加速整个开发进程，因为它解决了一个普遍的问题。很高兴能够分享这个方案。

实现

如果技术人员想把我们构建的容器镜像添加到自己的基础设施中，请参考 Docker Hub 上的文档：https://registry.hub.docker.co ... edis/

AngularJS 服务

如果是 AngularJS 应用，首先实现下面的代码：

  1. 'use strict';
  2. !(function (window, document, undefined) {
  3. var getModule = function (angular) {
  4. return angular.module('seo', [])
  5.   .run([
  6.     '$rootScope',
  7.     function ($rootScope) {
  8.       $rootScope.htmlReady = function () {
  9.         $rootScope.$evalAsync(function () { // fire after $digest
  10.           setTimeout(function () { // fire after DOM rendering
  11.             if (typeof window.callPhantom === 'function') {
  12.               window.callPhantom();
  13.             }
  14.           }, 0);
  15.         });
  16.       };
  17.     }
  18.   ]);
  19. };
  20. if (typeof define === 'function' && define.amd) {
  21. define(['angular'], getModule);
  22. } else {
  23. getModule(angular);
  24. }
  25. })(window, document);

然后通过angular.module('youApp', ['seo'])调用。

结论

如果你使用我们的容器，觉得还不错，请一定告知我们（@Earlyclaim）。

如果你觉得有人会对此感兴趣，请转发给他们（点击社交分享按钮）！

任何建议，请发推特并通知 @Earlyclaim ：非常期待您的观点和文字！

任何代码改进，请通过 GitHub 推送合并请求！

顺便说一句，我们热爱创业公司，我们热爱开发者，我们热爱社区！开放生态系统万岁！

原文：Get your Javascript website perfectly crawled with Docker （翻译：柳泉波 校对：佚名）

=====================================

译者介绍
柳泉波，读书喝茶踢球写程序，目前在华南师范大学广东高校计算机网络与信息系统工程中心工作。

crawler_Docker_解决用 JavaScript 框架开发的 Web 站点抓取的更多相关文章

  1. 有了 Docker，用 JavaScript 框架开发的 Web 站点也能很好地支持网络爬虫的内容抓取

    点这里 阅读目录 用 AngularJS(以及其它 JavaScript 框架)开发的 Web 站点不支持爬虫的抓取 解决方案 为什么公开我们的解决方案 实现 AngularJS 服务 结论   Pr ...

  2. Web站点抓取工具webhttrack

    近来发现Ubuntu下一个很好用的web站点抓取工具webhttrack,能够将给定网址的站点抓取到本地的目录中,并实现离线浏览,很实用. 1.安装webhttrack ubuntu 16.04的官方 ...

  3. web scraper 抓取分页数据和二级页面内容

    如果是刚接触 web scraper 的,可以看第一篇文章. web scraper 是一款免费的,适用于普通用户(不需要专业 IT 技术的)的爬虫工具,可以方便的通过鼠标和简单配置获取你所想要数据. ...

  4. web scraper 抓取数据并做简单数据分析

    其实 web scraper 说到底就是那点儿东西,所有的网站都是大同小异,但是都还不同.这也是好多同学总是遇到问题的原因.因为没有统一的模板可用,需要理解了 web scraper 的原理并且对目标 ...

  5. 联系我们_鲲鹏Web数据抓取 - 专业Web数据采集服务提供者

    联系我们_鲲鹏Web数据抓取 - 专业Web数据采集服务提供者 首页 > 联系我们 我们的联系方式如下: 029 - 82542052(陕西 西安) 13389148466 或 13571845 ...

  6. 测试开发Python培训：抓取新浪微博抓取数据-技术篇

    测试开发Python培训:抓取新浪微博抓取数据-技术篇   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.在poptest的se ...

  7. 测试开发Python培训：抓取新浪微博评论提取目标数据-技术篇

    测试开发Python培训:抓取新浪微博评论提取目标数据-技术篇   在前面我分享了几个新浪微博的自动化脚本的实现,下面我们继续实现新的需求,功能需求如下: 1,登陆微博 2,抓取评论页内容3,用正则表 ...

  8. web scraper 抓取网页数据的几个常见问题

    如果你想抓取数据,又懒得写代码了,可以试试 web scraper 抓取数据. 相关文章: 最简单的数据抓取教程,人人都用得上 web scraper 进阶教程,人人都用得上 如果你在使用 web s ...

  9. 吴裕雄--天生自然python学习笔记：WEB数据抓取与分析

    Web 数据抓取技术具有非常巨大的应用需求及价值, 用 Python 在网页上收集数据,不仅抓取数据的操作简单, 而且其数据分析功能也十分强大. 通过 Python 的时lib 组件中的 urlpar ...

随机推荐

  1. BZOJ 2007 NOI2010 海拔高度 最小减产计划

    标题效果:YT城市是一个精心规划的城市.这个城市是东西向和南北向干道成n×n地区性.简单.可以YT作为一个城市广场,每个区域也可被视为一个正方形.因此,.YT市中含有(n+1)×(n+1)交叉口和2n ...

  2. Nginx各版本的区别

    Nginx官网提供了三个类型的版本Mainline version:Mainline 是 Nginx 目前主力在做的版本,可以说是开发版Stable version:最新稳定版,生产环境上建议使用的版 ...

  3. 【 D3.js 进阶系列 — 1.1 】 其它表格文件的读取

    CSV 表格文件是以逗号作为单元分隔符的,其他还有以制表符 Tab 作为单元分隔符的 TSV 文件,还有人为定义的其他分隔符的表格文件.本文将说明在 D3 中怎样读取它们. 1. TSV 表格文件是什 ...

  4. 第七个问题（枚举和set）

    set添加元素是基于equals和hashCode函数来确定的两个要素是否是同一物体. public final boolean equals(Object other) 当指定对象等于此枚举常量时, ...

  5. Java 审查基调

    1.& 与 &&的差别 两个都有逻辑与的功能. 可是所不同的是.当&两边的表达式不是boolean类型的时候,&具有位与的功能:&&是短路与,当 ...

  6. 【剑指offer】打印1到最大的n数字

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/25562105 剑指offer第12题.九度OJ測试通过. 题目描写叙述: 给定一个数字N, ...

  7. Activity生命周期解决(有图有真相)

    Activity完整的生命周期: 启动Activity的周期历程: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGVuZ2t2/font/5a6L5L2 ...

  8. Base64编码 概念和用途

    Base64概念 什么是Base64? 依照RFC2045的定义,Base64被定义为:Base64内容传送编码被设计用来把随意序列的8位字节描写叙述为一种不易被人直接识别的形式.(The Base6 ...

  9. js 面向对象选项卡

      <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" conte ...

  10. hadoop-mapreduce在maptask执行分析

    MapTask执行通过执行.run方法: 1.生成TaskAttemptContextImpl实例,此实例中的Configuration就是job本身. 2.得到用户定义的Mapper实现类,也就是m ...