Algoria

Vueで検索エンジンAlgoliaの実装

2019.3.25

goolge site search, yahoo site searchが廃止になったことで、注目を浴びだしたのが全文検索可能なSAAS。
その一つであるAlgoliaを使ってみる。

what Algolia?

https://www.algolia.com/

検索のみを提供するサービス。
APIは豊富にある。
検索対象とするキーの設定なども容易。

利用例は多く、近いところだとvue。
https://vuejs.org/

個人であれば無料で月10万コールまで利用出来る。
データの更新なども上限はある。

https://www.algolia.com/pricing/

アカウント作成

無料で作成出来る。
最初にチュートリアルがあり、検索対象カラムの指定や条件の編集方法などが簡単に学べる。

https://www.algolia.com/apps/ARUFSHIXOF/api-keys/all

サンプルプロジェクト作成

ライブラリが用意されているvueで実装。

インストール

vue init webpack vue_algolia
cd vue_algolia
npm install
npm install algoliasearch --save

データの追加

日本語も念の為追加してみる
algoliaのダッシュボードから追加。
indicesという項目から進む。
Add recordでjson形式で追加が可能。
試しに、日本語も追加してみる。

https://www.algolia.com/apps/ARUFSHIXOF/explorer/browse/getstarted_actors

ビルド~デプロイ

cloudfrontに上げてみた。
日本語も問題なく検索できる！

http://dukpd3il98sac.cloudfront.net

BLOG TOP