30분만에 사용자가이드에 검색서비스 적용하기

와탭 모니터링

2020년 12월 22일

작업 배경

와탭 가이드는 "문서 배포의 자동화"가 이루어지고 있어서 매우 편리하게 사용 중입니다.
(자세한 내용은 아래의 링크를 확인해주세요)

소스코드처럼 문서 관리하기 : https://www.whatap.io/ko/blog/34/

다만 부족한 점은 문서의 검색이 어렵다는 점입니다. 시간이 지날수록 가이드 페이지는 늘어나고 담당자가 아니고서야 페이지의 내용들을 모두 기억하기란 쉽지 않았습니다. 검색서비스를 적용하기 이전에는 페이지를 돌아다니며 "Crtl + F"를 사용해서 필요한 내용을 찾아야 하는 불편함이 있었습니다. 이를 개선하기 위하여 사용자 가이드페이지에 검색기능을 적용하기로 하였습니다.

검색서비스 선정하기

검색서비스를 적용하기 위해 여러가지 서비스를 뒤지기 시작했습니다. Apache Solr, elasticsearch등 대표적인 검색서비스도 있었지만 단지 문서를 검색하기 위한 용도로는 구축비용이나 운영하는 측면에서 오버스펙이라고 판단하였고 가벼운 서비스를 찾던 중 Aloglia라는 "웹 검색기반 SaaS서비스"를 알게 되었습니다.

Algolia란

Algolia는 웹 사이트의 콘텐츠를 색인화하여 저장하고 색인화된 데이터를 기반으로 검색기능을 제공해주는 서비스입니다. 뿐만 아니라 웹사이트를 크롤링하여 색인화하고 Dropdown UI까지 제공해주는 Docsearch라는 오픈소스도 함께 제공합니다. 위와 같은 이유로 문서 검색용 서비스에 Algolia가 적합하다고 판단하였습니다.

시스템 구축하기

Algolia 검색서비스를 어떻게 적용했는지 전체적인 프로세스를 먼저 설명하겠습니다.

가이드 문서 배포 : Jenkins를 활용하여 와탭랩스 가이드 문서를 가이드서버에 배포합니다.
가이드 문서 크롤링 : 배포가 완료되면 Jenkins에서 Docsearch를 이용하여 가이드 문서를 크롤링합니다.
크롤링한 데이터를 algolia에 인덱싱 : 크롤링한 데이터는 Docsearch에 의해 자동으로 algolia service에 인덱싱됩니다.
검색 시 algolia api 호출 : Docserch.js로 만든 검색 input box에서 검색 시 algolia api를 호출합니다.
api호출에 대한 response값 노출: api호출에 대한 결과를 Dropdown UI형식으로 화면에 나타내줍니다.

Algolia서비스 가입하기

Algolia를 사용하기 위해 먼저 algolia 서비스에 가입합니다. 가입 후 Applicaion ID와 API key정보들을 발급 받습니다. 정상적으로 가입 및 API key를 발급 받았다면 API keys 메뉴에서 정보를 확인 할 수 있습니다. 다음의 정보들은 Docsearch를 이용하여 Algolia서비스에 데이터 저장 및 검색시 필요합니다.

Docsearch 사용하여 인덱싱하기

Docsearch는 웹 사이트를 크롤링하고 해당 콘텐츠를 Algolia 색인으로 푸시하며 사용자가 관련 콘텐츠를 즉시 찾을 수 있도록 Dropdown 검색 메뉴를 제공해주는 오픈소스 입니다.

Docsearch는 Docker기반으로 실행하는 방법과 소스코드 기반으로 실행하는 방법이 있는데 저는 Docker기반으로 실행하였습니다. Docsearch를 사용하기 위해서는 2가지 파일이 필요합니다. 아래는 2가지 파일에 대하여 설명입니다.

1. env 파일 생성하기 : algolia api를 호출하기 위한 정보들을 가지고 있는 파일입니다.

APPLICATION_ID={YOUR_APP_ID}
API_KEY={YOUR_API_KEY}

Docsearch가 실행될 Root 디렉토리로 이동하여 .env파일을 만듭니다.

APPLICATION_ID : Algolia의 Application ID
API_KEY : Algolia 가입 후 발급받은 API key.(Admin api key입력)

2. config.json 파일 생성하기 : 크롤링할 정보들을 가지고 있는 파일입니다.

index_name : Algolia에 생성한 index_name
start_urls: docSearch가 크롤링 할 주소(여러 개 입력할 경우 , 로 구분하여 입력)
selectors: html 파일의 selector의 정보를 입력(여러 개 입력할 경우 , 로 구분하여 입력)

위의 두 파일을 모두 설정하였다면 Docsearch docker를 실행합니다.

Docker Image를 실행하기 전 jq를 설치해야 합니다. jq는 command line에서 json을 컨트롤할 수 있는 도구입니다. 설치방법은 Google에게 물어보면 많은 설치 가이드가 있습니다. Docker를 실행하고 나면 Agolia Index에 데이터가 인덱싱 되어 저장되는 걸 확인할 수 있습니다.