手把手教你如何用Crawlab构建技术文章聚合平台(一)

时间  2019-11-07
标签 手把手 如何 crawlab 构建 技术 文章 聚合 平台 栏目 设计模式 繁體版
原文   原文链接

背景

说到爬虫，大多数程序员想到的是scrapy这样受人欢迎的框架。scrapy的确不错，并且有很强大的生态圈，有gerapy等优秀的可视化界面。可是，它仍是有一些不能作到的事情，例如在页面上作翻页点击操做、移动端抓取等等。对于这些新的需求，能够用Selenium、Puppeteer、Appium这些自动化测试框架绕开繁琐的动态内容，直接模拟用户操做进行抓取。惋惜的是，这些框架不是专门的爬虫框架，不能对爬虫进行集中管理，所以对于一个多达数十个爬虫的大型项目来讲有些棘手。javascript

Crawlab是一个基于Celery的分布式通用爬虫管理平台，擅长将不一样编程语言编写的爬虫整合在一处，方便监控和管理。Crawlab有精美的可视化界面，能对多个爬虫进行运行和管理。任务调度引擎是自己支持分布式架构的Celery，所以Crawlab能够自然集成分布式爬虫。有一些朋友认为Crawlab只是一个任务调度引擎，其实这样认为并不彻底正确。Crawlab是相似Gerapy这样的专一于爬虫的管理平台。html

本文将介绍如何使用Crawlab和Puppeteer抓取主流的技术博客文章，而后用Flask+Vue搭建一个小型的技术文章聚合平台。前端

Crawlab

在前一篇文章《分布式通用爬虫管理平台Crawlab》已介绍了Crawlab的架构以及安装使用，这里快速介绍一下如何安装、运行、使用Crawlab。java

安装

到Crawlab的Github Repo用克隆一份到本地。node

git clone https://github.com/tikazyq/crawlab
复制代码

安装相应的依赖包和库。python

cd crawlab

# 安装python依赖
pip install -r crawlab/requirements

# 安装前端依赖
cd frontend
npm install
复制代码

安装mongodb和redis-server。Crawlab将用MongoDB做为结果集以及运行操做的储存方式，Redis做为Celery的任务队列，所以须要安装这两个数据库。git

运行

在运行以前须要对Crawlab进行一些配置，配置文件为config.py。程序员

# project variables
PROJECT_SOURCE_FILE_FOLDER = '/Users/yeqing/projects/crawlab/spiders' # 爬虫源码根目录
PROJECT_DEPLOY_FILE_FOLDER = '/var/crawlab'  # 爬虫部署根目录
PROJECT_LOGS_FOLDER = '/var/logs/crawlab'  # 日志目录
PROJECT_TMP_FOLDER = '/tmp'  # 临时文件目录

# celery variables
BROKER_URL = 'redis://192.168.99.100:6379/0'  # 中间者URL，链接redis
CELERY_RESULT_BACKEND = 'mongodb://192.168.99.100:27017/'  # CELERY后台URL
CELERY_MONGODB_BACKEND_SETTINGS = {
    'database': 'crawlab_test',
    'taskmeta_collection': 'tasks_celery',
}
CELERY_TIMEZONE = 'Asia/Shanghai'
CELERY_ENABLE_UTC = True

# flower variables
FLOWER_API_ENDPOINT = 'http://localhost:5555/api'  # Flower服务地址

# database variables
MONGO_HOST = '192.168.99.100'
MONGO_PORT = 27017
MONGO_DB = 'crawlab_test'

# flask variables
DEBUG = True
FLASK_HOST = '127.0.0.1'
FLASK_PORT = 8000
复制代码

启动后端API，也就是一个Flask App，能够直接启动，或者用gunicorn代替。github

cd ../crawlab
python app.py
复制代码

启动Flower服务（抱歉目前集成Flower到App服务中，必须单独启动来获取节点信息，后面的版本不须要这个操做）。redis

python ./bin/run_flower.py
复制代码

启动本地Worker。在其余节点中若是想只是想执行任务的话，只须要启动这一个服务就能够了。

python ./bin/run_worker.py
复制代码

启动前端服务器。

cd ../frontend
npm run serve
复制代码

使用

首页Home中能够看到总任务数、总爬虫数、在线节点数和总部署数，以及过去30天的任务运行数量。

点击侧边栏的Spiders或者上方到Spiders数，能够进入到爬虫列表页。

这些是爬虫源码根目录PROJECT_SOURCE_FILE_FOLDER下的爬虫。Crawlab会自动扫描该目录下的子目录，将子目录看做一个爬虫。Action列下有一些操做选项，点击部署Deploy按钮将爬虫部署到全部在线节点中。部署成功后，点击运行Run按钮，触发抓取任务。这时，任务应该已经在执行了。点击侧边栏的Tasks到任务列表，能够看到已经调度过的爬虫任务。

基本使用就是这些，可是Crawlab还能作到更多，你们能够进一步探索，详情请见Github。

Puppeteer

Puppeteer是谷歌开源的基于Chromium和NodeJS的自动化测试工具，能够很方便的让程序模拟用户的操做，对浏览器进行程序化控制。Puppeteer有一些经常使用操做，例如点击，鼠标移动，滑动，截屏，下载文件等等。另外，Puppeteer很相似Selenium，能够定位浏览器中网页元素，将其数据抓取下来。所以，Puppeteer也成为了新的爬虫利器。

相对于Selenium，Puppeteer是新的开源项目，并且是谷歌开发，可使用不少新的特性。对于爬虫来讲，若是前端知识足够的话，写数据抓取逻辑简直不能再简单。正如其名字同样，咱们是在操做木偶人来帮咱们抓取数据，是否是很贴切？

掘金上已经有不少关于Puppeteer的教程了（爬虫利器 Puppeteer 实战、Puppeteer 与 Chrome Headless —— 从入门到爬虫），这里只简单介绍一下Puppeteer的安装和使用。

安装

安装很简单，就一行npm install命令，npm会自动下载Chromium并安装，这个时间会比较长。为了让安装好的puppeteer模块可以被全部nodejs爬虫所共享，咱们在PROJECT_DEPLOY_FILE_FOLDER目录下安装node的包。

# PROJECT_DEPLOY_FILE_FOLDER变量值
cd /var/crawlab

# 安装puppeteer
npm i puppeteer

# 安装mongodb
npm i mongodb
复制代码

安装mongodb是为了后续的数据库操做。

使用

如下是Copy/Paste的一段用Puppeteer访问简书而后截屏的代码，很是简洁。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await (puppeteer.launch());
  const page = await browser.newPage();
  await page.goto('https://www.jianshu.com/u/40909ea33e50');
  await page.screenshot({
    path: 'jianshu.png',
    type: 'png',
    // quality: 100, 只对jpg有效
    fullPage: true,
    // 指定区域截图，clip和fullPage二者只能设置一个
    // clip: {
    // x: 0,
    // y: 0,
    // width: 1000,
    // height: 40
    // }
  });
  browser.close();
})();
复制代码

关于Puppeteer的经常使用操做，请移步《我经常使用的puppeteer爬虫api》。

编写爬虫

啰嗦了这么久，终于到了万众期待的爬虫时间了。Talk is cheap, show me the code！咦？咱们不是已经Show了很多代码了么...

因为咱们的目标是创建一个技术文章聚合平台，咱们须要去各大技术网站抓取文章。资源固然是越多越好。做为展现用，咱们将抓取下面几个具备表明性的网站：

  • 掘金
  • SegmentFault
  • CSDN

研究发现这三个网站都是由Ajax获取文章列表，生成动态内容以做为传统的分页替代。这对于Puppeteer来讲很容易处理，由于Puppeteer绕开了解析Ajax这一部分，浏览器会自动处理这样的操做和请求，咱们只着重关注数据获取就好了。三个网站的抓取策略基本相同，咱们以掘金为例着重讲解。

掘金

首先是引入Puppeteer和打开网页。

const puppeteer = require('puppeteer');
const MongoClient = require('mongodb').MongoClient;

(async () => {
  // browser
  const browser = await (puppeteer.launch({
    headless: true
  }));

  // define start url
  const url = 'https://juejin.im';

  // start a new page
  const page = await browser.newPage();
  
  ...
  
})();
复制代码

headless设置为true可让浏览器以headless的方式运行，也就是指浏览器不用在界面中打开，它会在后台运行，用户是看不到浏览器的。browser.newPage()将新生成一个标签页。后面的操做基本就围绕着生成的page来进行。

接下来咱们让浏览器导航到start url。

...
  
  // navigate to url
  try {
    await page.goto(url, {waitUntil: 'domcontentloaded'});
    await page.waitFor(2000);
  } catch (e) {
    console.error(e);

    // close browser
    browser.close();

    // exit code 1 indicating an error happened
    code = 1;
    process.emit("exit ");
    process.reallyExit(code);

    return
  }
  
  ...
复制代码

这里try catch的操做是为了处理浏览器访问超时的错误。当访问超时时，设置exit code为1表示该任务失败了，这样Crawlab会将该任务状态设置为FAILURE。

而后咱们须要下拉页面让浏览器能够读取下一页。

...
  
  // scroll down to fetch more data
  for (let i = 0; i < 100; i++) {
    console.log('Pressing PageDown...');
    await page.keyboard.press('PageDown', 200);
    await page.waitFor(100);
  }
  
  ...
复制代码

翻页完毕后，就开始抓取数据了。

...
  // scrape data
  const results = await page.evaluate(() => {
    let results = [];
    document.querySelectorAll('.entry-list > .item').forEach(el => {
      if (!el.querySelector('.title')) return;
      results.push({
        url: 'https://juejin.com' + el.querySelector('.title').getAttribute('href'),
        title: el.querySelector('.title').innerText
      });
    });
    return results;
  });
  ...
复制代码

page.evaluate能够在浏览器Console中进行JS操做。这段代码其实能够直接在浏览器Console中直接运行。调试起来是否是方便到爽？前端工程师们，开始欢呼吧！

获取了数据，接下来咱们须要将其储存在数据库中。

...
  
  // open database connection
  const client = await MongoClient.connect('mongodb://192.168.99.100:27017');
  let db = await client.db('crawlab_test');
  const colName = process.env.CRAWLAB_COLLECTION || 'results_juejin';
  const taskId = process.env.CRAWLAB_TASK_ID;
  const col = db.collection(colName);

  // save to database
  for (let i = 0; i < results.length; i++) {
    // de-duplication
    const r = await col.findOne({url: results[i]});
    if (r) continue;

    // assign taskID
    results[i].task_id = taskId;

    // insert row
    await col.insertOne(results[i]);
  }
  
  ...
复制代码

这样，咱们就将掘金最新的文章数据保存在了数据库中。其中，咱们用url字段作了去重处理。CRAWLAB_COLLECTION和CRAWLAB_TASK_ID是Crawlab传过来的环境变量，分别是储存的collection和任务ID。任务ID须要以task_id为键保存起来，这样在Crawlab中就能够将数据与任务关联起来了。

整个爬虫代码以下。

const puppeteer = require('puppeteer');
const MongoClient = require('mongodb').MongoClient;

(async () => {
  // browser
  const browser = await (puppeteer.launch({
    headless: true
  }));

  // define start url
  const url = 'https://juejin.im';

  // start a new page
  const page = await browser.newPage();

  // navigate to url
  try {
    await page.goto(url, {waitUntil: 'domcontentloaded'});
    await page.waitFor(2000);
  } catch (e) {
    console.error(e);

    // close browser
    browser.close();

    // exit code 1 indicating an error happened
    code = 1;
    process.emit("exit ");
    process.reallyExit(code);

    return
  }

  // scroll down to fetch more data
  for (let i = 0; i < 100; i++) {
    console.log('Pressing PageDown...');
    await page.keyboard.press('PageDown', 200);
    await page.waitFor(100);
  }

  // scrape data
  const results = await page.evaluate(() => {
    let results = [];
    document.querySelectorAll('.entry-list > .item').forEach(el => {
      if (!el.querySelector('.title')) return;
      results.push({
        url: 'https://juejin.com' + el.querySelector('.title').getAttribute('href'),
        title: el.querySelector('.title').innerText
      });
    });
    return results;
  });

  // open database connection
  const client = await MongoClient.connect('mongodb://192.168.99.100:27017');
  let db = await client.db('crawlab_test');
  const colName = process.env.CRAWLAB_COLLECTION || 'results_juejin';
  const taskId = process.env.CRAWLAB_TASK_ID;
  const col = db.collection(colName);

  // save to database
  for (let i = 0; i < results.length; i++) {
    // de-duplication
    const r = await col.findOne({url: results[i]});
    if (r) continue;

    // assign taskID
    results[i].task_id = taskId;

    // insert row
    await col.insertOne(results[i]);
  }

  console.log(`results.length: ${results.length}`);

  // close database connection
  client.close();

  // shutdown browser
  browser.close();
})();
复制代码

SegmentFault & CSDN

这两个网站的爬虫代码基本与上面的爬虫同样，只是一些参数不同而已。咱们的爬虫项目结构以下。

运行爬虫

在Crawlab中打开Spiders，咱们能够看到刚刚编写好的爬虫。

点击各个爬虫的View查看按钮，进入到爬虫详情。

在Execute Command中输入爬虫执行命令。对掘金爬虫来讲，是node juejin_spider.js。输入完毕后点击Save保存。而后点击Deploy部署爬虫。最后点击Run运行爬虫。

点击左上角到刷新按钮能够看到刚刚运行的爬虫任务已经在运行了。点击Create Time后能够进入到任务详情。Overview标签中能够看到任务信息，Log标签能够看到日志信息，Results信息中能够看到抓取结果。目前在Crawlab结果列表中还不支持数据导出，可是不久的版本中确定会将导出功能加入进来。

总结

在这一小节，咱们已经可以将Crawlab运行起来，而且能用Puppeteer编写抓取三大网站技术文章的爬虫，而且可以用Crawlab运行爬虫，而且读取抓取后的数据。下一节，咱们将用Flask+Vue作一个简单的技术文章聚合网站。能看到这里的都是有耐心的好同窗，赞一个。

Github: tikazyq/crawlab

若是感受Crawlab还不错的话，请加做者微信拉入开发交流群，你们一块儿交流关于Crawlab的使用和开发。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程