Searchkit은 Elasticsearch를 통해 뛰어난 검색 환경을 구축하는 데 도움이 되는 오픈 소스 라이브러리입니다. Javascript, React, Vue, Angular 등과 함께 작동합니다.
웹사이트 | 데모 | 문서 | 불화
Searchkit은 Elasticsearch 또는 Opensearch를 위한 검색 UI를 제공합니다. Searchkit을 사용하면 검색 상자, 상세 검색 필터, 결과 등 다양한 Instantsearch 구성 요소를 사용하여 검색 경험을 구축할 수 있습니다.
Searchkit은 검색 환경을 빠르게 구축하려는 모든 사람에게 적합합니다.
Searchkit은 Elasticsearch를 사용하여 검색 UI를 단순화합니다.
Searchkit Bot은 이 저장소를 더 잘 이해하는 데 도움이 됩니다. 코드 예제, 설치 가이드, 디버깅 도움말 등을 요청할 수 있습니다.
또는 더 많은 예제를 보려면 설명서를 확인하세요.
npm 또는 Yarn을 통해 설치
npm install searchkit @searchkit/api @searchkit/instantsearch-client또는 CDN을 통해
< script src =" https://cdn.jsdelivr.net/npm/@searchkit/instantsearch-client@latest " > </ script >
< script src =" https://cdn.jsdelivr.net/npm/instantsearch.js@4 " > </ script >
< script src =" https://cdn.jsdelivr.net/npm/searchkit@latest " > </ script > Searchkit에는 Elasticsearch 7.0 이상 또는 Opensearch 2.4 이상이 필요합니다.
아래에서는 Docker를 사용하여 Elasticsearch를 실행하고 있습니다.
docker pull docker.elastic.co/elasticsearch/elasticsearch:8.6.2
docker network create elastic
docker run --name elasticsearch --net elastic -p 9200:9200 -p 9300:9300 -e " discovery.type=single-node " -e " xpack.security.enabled=false " -e http.cors.enabled=true -e " http.cors.allow-origin='*' " -e http.cors.allow-headers=X-Requested-With,X-Auth-Token,Content-Type,Content-Length,Authorization -e http.cors.allow-credentials=true -e network.publish_host=localhost -e xpack.security.enabled=false docker.elastic.co/elasticsearch/elasticsearch:8.6.2그런 다음 인덱스와 일부 데이터를 추가해 보겠습니다.
curl --location --request PUT ' http://localhost:9200/products '
--header ' Content-Type: application/json '
--data-raw ' {
"mappings": {
"properties": {
"name": {
"type": "text"
},
"description": {
"type": "text"
},
"price": {
"type": "integer"
},
"categories": {
"type": "text",
"fields": {
"keyword": {
"type": "keyword"
}
}
}
}
}
} '
curl --location --request POST ' http://localhost:9200/products/_doc '
--header ' Content-Type: application/json '
--data-raw ' {
"name": "Apple iPhone 12 Pro Max",
"description": "The iPhone 12 Pro Max is the most powerful iPhone ever. It has a 6.7-inch Super Retina XDR display, a Ceramic Shield front cover, and a triple-camera system with a LiDAR scanner. It also has a 5G connection, a 6-core CPU, and a 4-core GPU. The iPhone 12 Pro Max is available in 128GB, 256GB, and 512GB storage options.",
"categories": ["phones", "apple"],
"price": 800
} '
curl --location --request POST ' http://localhost:9200/products/_doc '
--header ' Content-Type: application/json '
--data-raw ' {
"name": "Apple iPhone 12 Pro",
"description": "The iPhone 12 Pro is the most powerful iPhone ever. It has a 6.1-inch Super Retina XDR display, a Ceramic Shield front cover, and a triple-camera system with a LiDAR scanner. It also has a 5G connection, a 6-core CPU, and a 4-core GPU. The iPhone 12 Pro is available in 128GB, 256GB, and 512GB storage options.",
"categories": ["phones", "apple"],
"price": 700
} ' Searchkit은 모든 Instantsearch 프레임워크와 호환됩니다. 아래는 React-Instantsearch를 사용한 예시입니다.
import Searchkit from "searchkit"
import Client from '@searchkit/instantsearch-client'
// import your InstantSearch components
import { InstantSearch , SearchBox , Hits , RefinementList , Pagination , RangeInput } from 'react-instantsearch' ;
const sk = new Searchkit ( {
connection : {
host : 'http://localhost:9200' ,
// with an apiKey
// https://www.searchkit.co/docs/guides/setup-elasticsearch#connecting-with-api-key
// apiKey: '##########'
// with a username/password
// https://www.searchkit.co/docs/guides/setup-elasticsearch#connecting-with-usernamepassword
//auth: {
// username: "elastic",
// password: "changeme"
//}
} ,
search_settings : {
search_attributes : [ { field : 'title' , weight : 3 } , 'actors' , 'plot' ] ,
result_attributes : [ 'title' , 'actors' , 'poster' , 'plot' ] ,
highlight_attributes : [ 'title' ] ,
facet_attributes : [
{ attribute : 'actors' , field : 'actors.keyword' , type : 'string' } ,
{ attribute : 'imdbrating' , type : 'numeric' , field : 'imdbrating' }
]
}
} )
const searchClient = Client ( sk ) ;
const App = ( ) => (
< InstantSearch
indexName = "imdb_movies"
searchClient = { searchClient }
>
< SearchBox / >
< div className = "left-panel" >
< RefinementList attribute = "actors" searchable = { true } limit = { 10 } / >
< RangeInput attribute = "imdbrating" / >
< / div >
< div className = "right-panel" >
< Hits / >
< Pagination / >
< / div >
< / InstantSearch >
}시작하기 가이드를 따르세요.
Searchkit Node API를 사용하면 브라우저에서 Elasticsearch로 요청을 프록시할 수 있습니다. 이는 브라우저에서 Elasticsearch를 숨기려는 경우 또는 쿼리에 사용자 권한 필터를 추가하려는 경우에 유용합니다.
Searchkit에는 기본 쿼리 빌더가 있지만 getQuery 함수를 apiClient에 전달하여 쿼리를 사용자 정의할 수도 있습니다.
const results = await apiClient . handleRequest ( req . body , {
getQuery : ( query , search_attributes ) => {
return [
{
combined_fields : {
query ,
fields : search_attributes ,
} ,
} ,
] ;
} ,
} ) ;Searchkit은 KNN 쿼리 검색을 지원합니다. 다음은 KNN 쿼리 검색의 예입니다.
const results = await client . handleRequest ( req . body , {
getKnnQuery ( query , search_attributes , config ) {
return {
field : 'dense-vector-field' ,
k : 10 ,
num_candidates : 100 ,
// supported in latest version of Elasticsearch
query_vector_builder : {
text_embedding : {
model_id : 'cookie_model' ,
model_text : query
}
}
}
}
} ) ;의미 검색 튜토리얼을 따라해보세요.
요청 후크를 사용하여 전체 쿼리를 재정의할 수도 있습니다. 다음은 첫 번째 검색 요청에 다시 채점 쿼리를 추가하는 요청 후크의 예입니다.
beforeSearch 및 afterSearch 에서 이를 적용할 수 있습니다.
const results = await client . handleRequest ( req . body , {
hooks : {
beforeSearch : ( searchRequests ) => {
const uiRequest = searchRequests [ 0 ]
return [
{
... uiRequest ,
body : {
... uiRequest . body ,
rescore : {
window_size : 100 ,
query : {
rescore_query : {
match : {
plot : {
query : uiRequest . body . query ,
operator : "and" ,
} ,
} ,
} ,
query_weight : 1 ,
rescore_query_weight : 10 ,
}
}
}
} ,
searchRequests . slice ( 1 , searchRequests . length )
]
} ,
}
} ) ;여기 API 문서에서 자세한 내용을 읽어보세요.
쿼리 규칙을 사용하면 검색 경험의 동작을 사용자 지정할 수 있습니다. 쿼리 규칙을 사용하여 결과를 강화 또는 필터링하거나 조건 집합에 따라 결과 순위를 변경할 수 있습니다.
다음은 Dan Aykroyd 또는 Charlie Sheen이 출연한 영화에 대한 결과를 높이고 쿼리가 "movie"라는 단어인 경우에만 영화를 표시하도록 결과를 필터링하는 쿼리 규칙의 예입니다.
{
id : '1' ,
conditions : [
[
{
context : 'query' ,
value : 'movie' ,
match_type : 'exact'
}
]
] ,
actions : [
{
action : 'QueryBoost' ,
query : 'actors:"Dan Aykroyd" OR actors:"Charlie Sheen"' ,
weight : 2
} ,
{
action : 'QueryFilter' ,
query : 'type:"movie"'
}
]
}쿼리 규칙 문서에서 자세한 내용을 읽어보세요.
Q: Elasticsearch를 공용 인터넷에 노출해야 합니까?
Searchkit은 요청을 Elasticsearch로 프록시합니다.
Searchkit은 브라우저에서 직접 검색을 수행하거나 Searchkit API를 사용하여 요청을 Elasticsearch로 프록시하는 두 가지 옵션을 모두 제공합니다. 브라우저에서 직접 뛰어난 개발자 경험과 프로토타이핑을 제공합니다. 배포할 준비가 되면 Searchkit API를 사용하여 요청을 Elasticsearch로 프록시할 수 있습니다.
Q: React를 사용해야 합니까?
React, React Native, Vue, Angular를 사용할 수 있습니다. 프론트엔드 프레임워크를 사용할 필요도 없으며 instantsearch.js 위젯과 함께 일반 Javascript 및 HTML을 사용할 수 있습니다.
Q: 어떤 버전의 Elasticsearch가 지원됩니까?
Searchkit은 Elasticsearch 7.0 이상 + Opensearch 2.0 이상과 호환됩니다.
Q: 안드로이드와 iOS를 지원하나요?
잠재적으로. Searchkit API는 Algolia API를 모방하므로 몇 가지만 수정하면 Algolia Instantsearch 클라이언트를 Searchkit API와 함께 사용할 수 있습니다. 이에 관심이 있으시면 알려주시기 바랍니다.
Q: Algolia 대신 Searchkit을 사용해야 하는 이유는 무엇입니까?
Elasticsearch는 Algolia에 비해 많은 장점을 가지고 있습니다. 특히 대규모 데이터 세트가 있는 경우 Algolia보다 저렴한 대안으로 Elasticsearch를 사용하고 싶을 수도 있습니다. 자체 인프라에서 Elasticsearch를 실행하거나 쿼리 관련성을 더 효과적으로 제어할 수 있습니다.
