likes
comments
collection
share

如何手动跑algolia的爬虫来打造自己的站点搜索呢🤔

作者站长头像
站长
· 阅读数 27
如何手动跑algolia的爬虫来打造自己的站点搜索呢🤔
作为'api工程师'，平时少不了要去vue或react官方文档来搜索api，在享受精确搜索的同时，有想过该如何将`Algolia`集成到自己的项目里面吗？这篇文章主要分享自己使用时的`坎坷`历程...

版本信息：

Algolia for JavaScript (4.8.5); Browser (lite); docsearch (3.5.0); docsearch-react (3.5.0); docsearch.js (3.5.0)

Algolia

说起Algolia,可能大家会有点陌生，但如果你看过vue或react的文档，那你大概率用过他们的搜索，以下图vue搜索为例:

如何手动跑algolia的爬虫来打造自己的站点搜索呢🤔

从右下角那几个字可以看出vue的搜索服务是algolia提供的

Algolia: 是一家美国的创业公司，通过SaaS（软件即服务）模式提供网络搜索产品。通过使用外部托管的搜索引擎为客户的网站提供网络搜索服务...

form -> wikipedia

除了vue、react，基本上现代前端开源项目的文档搜索大多都是用的这个。

如何手动跑algolia的爬虫来打造自己的站点搜索呢🤔

上车

已经有这么多大佬级框架都在用，而且Algolia提供一站式的服务，不仅帮提供app托管管理后台，还有爬虫管理后台方便配置。既然功能强大有好用，那咱也不能落后啊，赶紧安排上，于是按照vuepress的教程就申请用上了，按理说一个幸福美满的故事就此开始了

翻车

一直幸福美满下去到此也就结束了，没啥可总结的，但是，在一次配置未生效后(可能是缓存原因)，竟然手残的删除了账户，想着大不了重新申请一个就完了，可谁知道重新申请直接提示已经把凭证发给我了，但是那是老的啊，尝试用另一个邮箱申请也是同样提示，重新使用老邮箱注册账号竟然提示说已经被拉进黑名单了！ shit!

申请：你需要 提交你的网站 URL 来加入 DocSearch 项目。当你的索引成功创建后， DocSearch 团队会将 apiKey 和 indexName 发送到你的邮箱。接下来，你就可以配置该插件，在 VuePress 中启用 DocSearch 了。

注册： 注册algolia 提供的应用管理后台，用来做搜索应用的定制化配置(我是在申请成功前，提前注册了，如果是等申请的话好像是不用手动注册的，对方发邮件后，点击接受邀请链接就可以进去了)

猜测是我的域名还存在他们的系统记录里，所以不能生成新的凭证，应该是一个域名下只能申请一次，那总不能换域名吧？ 既然常规流程走不通，那就试试人工吧，发邮件说明问题后,得到的回复竟然是

The application you've requested help for is currently on a 'DocSearch' plan, which is a free product we offer. This doesn't include technical web support.

大意就是说他们提供的是免费产品，不包括技术支持，那合着意思就是不付费不给帮助了？话说回来，付费是不可能的，免费额度10w/month,个人玩玩绰绰有余了，根本到不了付费上限，现在的问题是，有没有其他官方提供的白嫖渠道呢😋

其他搜索方案

本地搜索：其实在之也用过本地搜索，所谓本地搜索，就是根据页面在本地生成搜索索引，然后在用户访问站点时加载搜索索引文件，属于轻量级的搜索解决方案。

问题：站点小页面少的情况下还勉强可以接受，页面比较多时，搜索索引文件也会变得非常大，它可能会拖慢页面的加载速度，体验属实不行

form -> vuepress-search

另谋出路

目前申请是不行了，感觉域名被锁定了，老的邮箱也不能用，那就看看有没有其他方式了挽救一下，老规矩，看官方文档， 一番翻阅文档找到了run-your-own，还真可以手动爬。

既然常规流程走不通，那就自己玩吧

创建algolia账号

老邮箱是不能用了，用新的邮箱注册algolia，重新建应用，然后创建索引，应用名称和索引名称自己定就行

如何手动跑algolia的爬虫来打造自己的站点搜索呢🤔

配置爬虫环境

运行爬虫之前，需要先准备好一些配置文件

.env（环境变量）

首先在运行的根目录新建.env文件，需要将 Algolia 应用程序 ID 和管理 API 密钥设置为环境变量。

APPLICATION_ID=YOUR_APP_ID
API_KEY=YOUR_API_KEY

在概述页可以看到API keys入口，查看方式如下： 如何手动跑algolia的爬虫来打造自己的站点搜索呢🤔

打开后，复制红色框中的变量，爬虫需要对索引有写入权限，所以这里使用Admin API Key，而绿色框中的APIKey只有搜素权限，是前端用的， 后面会提到

如何手动跑algolia的爬虫来打造自己的站点搜索呢🤔

爬虫规则配置

启动的时候要传入爬虫规则配置文件，里面需要配置站点相关的信息以及爬取内容的逻辑，我目前的配置如下，这个后面搜索结果优化再细说具体字段

{
    "index_name": "huanwu",
    "sitemap_urls": [
        "https://zhaopanpan.com/sitemap.xml"
    ],
    "start_urls": [
        {
            "url": "https://zhaopanpan.com/talks.html",
            "selectors_key": "talks",
            "tags": [
                "talks"
            ]
        },
        {
            "url": "https://zhaopanpan.com/about.html",
            "selectors_key": "about",
            "tags": [
                "about"
            ]
        },
        {
            "url": "https://zhaopanpan.com/posts/javascript",
            "page_rank": 1,
            "selectors_key": "javascript",
            "tags": [
                "javascript"
            ]
        },
        "https://zhaopanpan.com"
    ],
    "selectors": {
        "javascript": {
            "lvl0": {
                "selector": "",
                "default_value": "Javascript"
            },
            "lvl1": ".theme-default-content h1",
            "lvl2": ".theme-default-content h2",
            "lvl3": ".theme-default-content h3",
            "lvl4": ".theme-default-content h4",
            "lvl5": ".theme-default-content h5",
            "lvl6": ".theme-default-content h6",
            "content": ".theme-default-content p, .theme-default-content li"
        },
        "about": {
            "lvl0": {
                "selector": "",
                "default_value": "关于"
            },
            "lvl1": ".theme-container h1",
            "lvl2": ".theme-container h2",
            "lvl3": ".theme-container h3",
            "lvl4": ".theme-container h4",
            "lvl5": ".theme-container h5",
            "lvl6": ".theme-container h6",
            "content": ".theme-container p, .theme-container li"
        },
        "talks": {
            "lvl0": {
                "selector": "",
                "default_value": "技术分享"
            },
            "lvl1": ".theme-container h1",
            "lvl2": ".theme-container h2",
            "lvl3": ".theme-container h3",
            "lvl4": ".theme-container h4",
            "lvl5": ".theme-container h5",
            "lvl6": ".theme-container h6",
            "content": ".theme-container p, .theme-container li"
        },
        "default": {
            "lvl0": {
                "selector": "",
                "default_value": "文章"
            },
            "lvl1": ".theme-default-content h1",
            "lvl2": ".theme-default-content h2",
            "lvl3": ".theme-default-content h3",
            "lvl4": ".theme-default-content h4",
            "lvl5": ".theme-default-content h5",
            "lvl6": ".theme-default-content h6",
            "content": ".theme-default-content p, .theme-default-content li"
        }
    }
}

运行爬虫

之前正常的时候是官方提供爬虫收集索引，我直接在前端结合相关UI库配置应用和索引信息就行，现在申请不过没有爬虫了，只能自己跑了。。。

官方提供了两种方式：

  • 镜像运行(推荐)：依赖docker和jq(json解析器)，好办
  • 本地跑代码：先clone爬虫代码库到本地，需要配置项目运行环境，安装运行依赖，然后才能启动，略显麻烦，故pass

电脑本来就有docker，装了jq就可以跑了，运行以下命令：

docker run -it --env-file=.env -e "CONFIG=$(cat ./config.json | jq -r tostring)" algolia/docsearch-scraper

这时候如果配置无误，应该会看到类似下面爬取的内容信息

如何手动跑algolia的爬虫来打造自己的站点搜索呢🤔

Nb hits:1006说明此次爬取成功命中的索引数量，这时去Algolia管理后台看下，显然刚才爬取的索引都已经记录成功了，perfect！

如何手动跑algolia的爬虫来打造自己的站点搜索呢🤔

前端UI

到这一步说明爬虫已经就绪，如何在前端验证呢，最好能直接搜索一下，Algolia已经贴心准备了playground，准备好appId、apiKey、indexName三个变量，这里的apiKey就是上面环境变量截图的绿色框中的值，其他两个变量就不用说了，上面都有提过，配好后，随便搜个关键字，有结果说明已经成功了！很nice不是！🎉

如何手动跑algolia的爬虫来打造自己的站点搜索呢🤔

关于如何选择:

  • 可以直接使用Algolia提供的@docsearch/js，在前端直接调用，做UI渲染(此插件是React写的)。
  • 本blog基于vuepress2，直接用了官方封装好的@vuepress/plugin-docsearch@next插件，这里不在赘述。
  • UI这块的生态还是比较丰富的，很多框架基于Algolia的@docsearch/js做了上层装，有web生态的包，也有移动端的，Algolia做了收集，可以去search-ui看看。

搜索结果优化

其实到这一步搜索功能已经可以用了，但是仔细看了下vue的搜索结果，都会根据该关键字，把主题或上级标题显示出来，层次分明，一目了然，使用者很容易找到自己想要的信息，明人不说暗话，我也想要这样的效果

如何手动跑algolia的爬虫来打造自己的站点搜索呢🤔

这里说一下我是如何优化爬虫规则配置了，官方配置文档比较干，我也是通过尝试才确定上面配置的，主要说下比较重要的字段：

index_name

管理端索引名称

sitemap_urls

这个字段很关键，sitemap基本包含了所有的页面，爬虫通过它可以很轻松的来收集索引，至于如何生成sitemap，网上有很多工具可用

当时写成了https: //zhaopanpan.com/sitemap.xml多了个空格，硬是爬了个寂寞

start_urls

start_urls可传入一个数组，里面包含可以抓取网站的地址 start_urls可传入一个数组，里面包含可以抓取网站的地址

{
  "start_urls": [
        {
            "url": "https://zhaopanpan.com/posts/javascript",
        }
  ]
}

selectors

选择器部分是很关键的，想要实现的效果主要靠他实现。

加入我要对某个start_urls地址做特殊处理，我可以给他加个selectors_key，一个自定义的值(就好比我要操作dom的时候要给节点加一个id)，加了一个叫javascript的选择器之后，就可以在后面的selectors对javascript进行详细配置

{
  "start_urls": [
        {
            "url": "https://zhaopanpan.com/posts/javascript",
            "selectors_key": "javascript",
            "page_rank": 1,
            "tags": [
                "javascript"
            ]
        }
    ],
  "selectors": {
      "javascript": {
          "lvl0": {
              "selector": "",
              "default_value": "Javascript"
          },
          "lvl1": ".theme-container h1",
          "lvl2": ".theme-container h2",
          "lvl3": ".theme-container h3",
          "lvl4": ".theme-container h4",
          "lvl5": ".theme-container h5",
          "lvl6": ".theme-container h6",
          "content": ".theme-container p, .theme-container li"
      },
  }
}

lvl0-lvl6都是用于创建记录层级结构的选择器，lvl0的selector我故意留空，我给他加了默认值，他就可以给我显示标题了

page_rank

结果排名

根据需要可以调整搜索结果的顺序

验证优化效果

重新执行上面docker命令，很符合预期有木有？

如何手动跑algolia的爬虫来打造自己的站点搜索呢🤔

总结

写这篇文章的前一周，搜索功能还是好好的，无奈手残删除了账户，导致原来正常的功能无法使用，本寄希望于官方技术支持来救火，但无奈对方客服太极功力深厚，几回合下来，小弟不出意外败下阵来，不得不另寻出路。

幸好官方提供了手动执行爬虫的方式，一番猛虎操作下来，不仅恢复了翻车前的功能，通过自定义爬虫配置，还实现了一些搜索结果自定义的优化，也不枉周日一个下午的奋战了