什么是文档搜索？

作为开发人员，我们花了很多时间阅读文档，在大型文档中很难找到相关信息。建立良好的搜索是一项挑战。

这里介绍一种免费开源，低成本接入的站点搜索接入方案--algolia DocSearch；

Vue官网也在用algolia Vue官网

algolia DocSearch

algolia docsearch github地址

Algolia 是一个数据库实时搜索服务，能够提供毫秒级的数据库搜索服务，并且其服务能以 API 的形式方便地布局到网页、客户端、APP 等多种场景。官网注册

DocSearch 拆分为爬虫和前端库。

抓取由Algolia Crawler处理，默认情况下每周运行一次，然后您可以自己触发新的抓取并直接从Crawler 界面监控它们，该界面还提供了一个实时编辑器，您可以在其中维护您的配置。
前端库建立在Algolia Autocomplete之上，并通过其模态提供身临其境的搜索体验。

备注

可能是因为免费用户，我并没有成功crawler管理后台上找到我的algolia注册的应用，所以爬虫这一块我是通过docker服务来爬数据上传到algolia Data Sources 数据库中的

实践流程记录

申请注册账户
新建应用
新建Indices 数据表

爬虫服务

这里直接使用docker

下载docker镜像 docker pull algolia/docsearch-scraper
根据配置启动dokcer爬虫服务 .env文件

APPLICATION_ID=YOUR_APPLICATION_ID
API_KEY=YOUR_API_KEY

config.json 以下配置只是demo，有些API已经变更或者废弃，请参考配置，新旧版本API废弃或者变更及配置参考文档

这里建议设置站点地图，会抓去更全面的网站，通过更新站点地图和设置action来定时调度，执行爬虫任务，更新索引数据。

{
  "index_name": "Home",
  "start_urls": [
    "网址1",
    "网址n" 
  ],
  "stop_urls": [],
  "maxDepth": 2,
  "aggregateContent": true,
  "selectors": {
    "lvl0": {
      "selector": "h1",
      "global": true,
      "default_value": "Documentation"
    },
    "lvl1": "h1",
    "lvl2": "h2",
    "lvl3": "h3",
    "lvl4": "h4",
    "lvl5": "h5",
    "text": "p, li, code"
  },
  "js_render": true,
  "js_wait": 4
}

执行一下路径，启动docker服务

docker run -it --env-file=你的文件路径/.env -e "CONFIG=$(cat 你的文件路径/config.json)" algolia/docsearch-scraper

执行结果查看数据库

前端接入搜索框

前端接入很简单，详细参考文档

如果是react框架 npm install @docsearch/react@3;
如果是其他框架 npm install @docsearch/js@3；

这里我是用的react，页面中：

import { DocSearch } from '@docsearch/react';

import '@docsearch/css';

function App() {
  return (
    <DocSearch
      appId="YOUR_APP_ID"
      indexName="YOUR_INDEX_NAME"
      apiKey="YOUR_SEARCH_API_KEY"
    />
  );
}

export default App;

效果

写一个简单的demo页面接入搜索框组件，输入旅客一个“测试”返回了两个网站站点的搜索结果。效果还不错。剩下的就是站点地图完善，定时爬虫以及需要的页面接入搜索组件就可以了。

后续的工作模型设计

因为前端的组件库以及各个站点是动态维护的，所以后续爬虫需要根据更新做出事实更新和每日定时动态爬取更新数据库，所以设计了一个工作模型来维持数据库的实时更新。

可以利用我设计的模型用户企业的各种组件库文档的全站点搜索。

docker的运行配置信息，文档站点导航信息维护在git端
文档发布后上传站点导航信息到git仓库触发git CI 工作流
git CI执行 docker 爬虫任务，爬取配置站点导航相关网页信息，更新数据库信息
初次之外docker每天定时执行action任务
用户在浏览器网页搜索框输入关键字查询数据库信息，返回站点相关链接地址，用户点击记录访问站点

watermark (3).jpeg

前端多站点搜索实践