graphQL 쿼리를 기반으로 Meilisearch에 Gatsby 콘텐츠를 색인화하는 플러그인
Meilisearch와 작동 방식을 이해하려면 Meilisearch 설명서를 참조하세요.
Gatsby와 그 작동 방식을 이해하려면 Gatsby 문서를 참조하세요.
Meilisearch Cloud로 서버 배포 및 수동 업데이트에 작별을 고하세요. 14일 무료 평가판을 시작해보세요! 신용 카드가 필요하지 않습니다.
Gatsby 앱 내에 패키지를 추가하세요.
npm
사용:
npm install gatsby-plugin-meilisearch
yarn
포함:
yarn add gatsby-plugin-meilisearch
Meilisearch 인스턴스를 다운로드하고 실행하는 쉬운 방법은 여러 가지가 있습니다.
예를 들어 Docker를 사용하는 경우:
docker pull getmeili/meilisearch:latest # Fetch the latest version of Meilisearch image from Docker Hub
docker run -it --rm -p 7700:7700 getmeili/meilisearch:latest meilisearch --master-key=masterKey
이 명령을 사용하면 Meilisearch 인스턴스 host
http://localhost:7700
이고 마스터 키는 masterKey
입니다.
실행 중인 Gatsby가 없으면 [이 프로젝트에 있는 플레이그라운드)(./playground/README.md)를 시작하거나 Gatsby 프로젝트를 생성할 수 있습니다.
아직 실행되지 않은 경우 앱을 실행하세요.
gatsby develop
이제 Gatsby 앱이 실행되고 있으므로 다음 URL에 액세스할 수 있습니다.
http://localhost:8000/
웹 앱의 URL입니다.http://localhost:8000/___graphql
: 플레이그라운드에서 graphQL 쿼리를 작성하고 요청할 수 있는 GraphiQL 도구에 대한 URL입니다. 이제 gatsby-plugin-meilisearch
설치된 실행 중인 Gatsby 앱과 실행 중인 Meilisearch 인스턴스가 있어야 합니다.
플러그인이 작동하도록 구성해 보겠습니다! 이 예에서는 Gatsby 웹사이트의 모든 페이지 URL을 가져와 Meilisearch에 색인을 생성합니다.
플러그인이 작동하도록 하려면 Gatsby 프로젝트의 루트에 있는 gatsby-config.js
구성 파일을 엽니다. 모든 구성은 해당 파일에서 이루어집니다.
먼저, Meilisearch 자격 증명을 추가해야 합니다.
자격 증명은 다음으로 구성됩니다.
host
: 실행 중인 Meilisearch 인스턴스의 URL입니다.api_key
: MeiliSearch에 문서를 추가할 수 있는 권한이 있는 master
키 또는 다른 key
. 권한 및 API 키에 대한 자세한 내용은 여기를 참조하세요.search
이외의 권한이 있는 키는 프런트 엔드에서 사용해서는 안 됩니다. 검색하려면 key
경로에서 사용 가능한 Default Search Key
키를 사용하거나 검색 권한만 있는 사용자 지정 API 키를 생성하세요.
gatsby-config.js
파일에 다음과 같은 방법으로 자격 증명을 추가합니다.
{
plugins : [
{
resolve : 'gatsby-plugin-meilisearch' ,
options : {
host : 'http://localhost:7700' ,
apiKey : 'masterKey' ,
} ,
} ,
]
}
자격 증명이 무엇인지 모르는 경우 이 섹션을 참조하세요.
다음 단계는 Meilisearch에 추가할 데이터와 방법을 정의하는 것입니다. 이는 indexes
필드에서 발생합니다.
indexes
필드는 여러 인덱스 개체로 구성될 수 있는 배열입니다. 각 인덱스 개체에는 다음 정보가 포함됩니다.
indexUid
: 데이터가 추가되는 인덱스의 이름입니다.
pages_url
에 인덱스 uid를 정의해 보겠습니다. 빌드 시 Meilisearch 내부에 pages_url
인덱스가 생성됩니다.
indexUid: ' pages_url '
pages_url
이미 존재하는 경우 빌드 시 삭제되고 다시 생성됩니다.
query
: Meilisearch에 추가할 데이터를 가져오는 GraphQL 쿼리입니다.
애플리케이션 페이지의 URL을 검색하는 graphQL 쿼리를 제공하겠습니다.
query : `
query MyQuery {
allSitePage {
nodes {
path
}
}
}
` ,
이 쿼리를 실행한 후 다음이 포함된 data
객체를 받습니다.
{
data : {
allSitePage : {
nodes : [
{
path : '/404/'
} ,
{
path : '/404.html'
} ,
{
path : '/'
}
]
}
}
}
transformer
: 가져온 데이터를 Meilisearch와 호환되는 형식으로 변환합니다.
이제 query
필드를 사용하여 데이터를 가져왔으므로 아직 Meilisearch로 보낼 준비가 되지 않았습니다.
transformer
기능을 사용하면 가져온 데이터를 호환 가능한 형식으로 변환할 수 있습니다.
가져온 데이터의 첫 번째 문제는 Meilisearch로 보낼 문서가 배열의 루트에 있어야 하는데 중첩되어 있다는 것입니다. 따라서 nodes
의 내용은 루트에 있어야 합니다.
{
data : {
allSitePages : {
nodes : [
{
'path' : '/404/'
} ,
]
}
}
}
다음과 같아야 합니다:
[
{
'path' : '/404/'
} ,
{
'path' : '/'
} ,
]
두 번째 문제는 Meilisearch의 각 문서에는 기본 키라는 고유 식별자가 필요하다는 것입니다.
따라서 모든 문서에는 id
라는 고유 필드가 필요합니다. 예를 들어:
{
'id' : 1
'path' : '/404/'
} ,
그렇게 하려면 변환기 메소드를 사용하여 호환 가능한 최종 객체 배열을 생성해야 합니다.
{
transformer : data =>
data . allSitePage . nodes . map ( ( node , index ) => ( {
id : index ,
... node ,
} ) ) ,
}
이 함수에서는 Meilisearch에서 색인화할 수 있는 객체 배열을 반환하기 위해 data.allSitePage.nodes
에 매핑합니다. Meilisearch가 색인화를 위해 필요하므로 id
필드를 추가합니다. 여기에는 id
로 사용할 수 있는 필드가 없으므로 배열에서 현재 요소의 인덱스를 사용합니다.
이러한 옵션( indexUid
, query
및 transformer
)에 대해 자세히 알아보려면 인덱스 옵션을 참조하세요.
해당 필드를 입력한 후 Meilisearch 구성은 다음과 같아야 합니다.
plugins: [
{
resolve : 'gatsby-plugin-meilisearch' ,
options : {
host : 'http://localhost:7700' ,
apiKey : 'masterKey' ,
indexes : [
{
indexUid : 'pages_url' ,
transformer : ( data ) =>
data . allSitePage . nodes . map ( ( node , index ) => ( {
id : index ,
... node ,
} ) ) ,
query : `
query MyQuery {
allSitePage {
nodes {
path
}
}
}
` ,
} ,
] ,
} ,
} ,
] ;
gatsby-plugin-meilisearch
Gatsby 빌드의 Meilisearch에 데이터를 가져와 추가합니다.
gatsby build
빌드 후 터미널에 콘텐츠가 성공적으로 인덱싱되었음을 확인하는 메시지가 표시됩니다.
success gatsby-plugin-meilisearch - x.xxxs - Documents added to Meilisearch
앱에 검색 환경을 통합하기 위한 도구가 필요한 경우 다음과 같은 도구가 도움이 될 수 있습니다.
gatsby-config.js 파일에서 Meilisearch 플러그인은 다음 옵션을 허용합니다:
host
(필수) host
필드는 Meilisearch 인스턴스가 실행 중인 주소입니다. gatsby-plugin-meilisearch
Meilisearch 인스턴스와 통신하고 데이터를 전송하기 위해 이 정보가 필요합니다.
apiKey
(선택사항) Meilisearch 인스턴스가 비밀번호로 보호되는 경우 apiKey
필드에는 API 키가 포함됩니다.
skipIndexing
(선택사항)이 옵션을 사용하면 Meilisearch에 색인을 생성하지 않고도 웹사이트를 구축할 수 있습니다. 기본값은 거짓
batchSize
(선택 사항)각 배치에 포함되어야 하는 문서 수입니다. 기본값은 1000입니다.
settings
(선택사항)Meilisearch 인스턴스에 설정을 전달하려면 여기에서 수행할 수 있습니다. Meilisearch 설정에 대해 자세히 알아보세요.
indexes
(필수) indexes
필드는 객체의 배열이며, 각 객체는 특정 인덱스에 데이터를 추가하는 방법을 나타냅니다.
indexes
에는 하나 이상의 index
개체가 있을 수 있습니다. 이는 서로 다른 인덱스의 서로 다른 콘텐츠(또는 동일한 인덱스에 대한 여러 개의 서로 다른 데이터)를 인덱싱하려는 경우 유용할 수 있습니다.
각 index
개체에는 다음 필드가 포함되어야 합니다.
indexUid
(필수)
이것은 Meilisearch 색인의 이름입니다. 검색된 데이터가 Meilisearch 내부에 추가되는 곳이므로 필수 필드입니다. 예를 들어 indexUid
가 pages_url
인 경우 콘텐츠는 Meilisearch의 pages_url
인덱스 내부에 색인이 생성됩니다. 이미 존재하는 인덱스 이름을 제공하면 인덱스가 삭제되고 다시 생성됩니다.
예:
indexUid: ' pages_url '
설명서에서 인덱스에 대해 자세히 알아볼 수 있습니다.
query
(필수)
이는 데이터를 검색하기 위해 실행될 graphQL 쿼리입니다. 귀하의 쿼리는 사용 중인 플러그인에 따라 매우 구체적일 수 있습니다. 쿼리가 확실하지 않은 경우 개발 모드에서 Gatsby가 제공하는 GraphiQL 도구(http://localhost:8000/___graphql)를 사용하여 쿼리를 빌드하는 데 도움을 받을 수 있습니다.
예:
query: `
query MyQuery {
allSitePage {
nodes {
path
}
}
}
` ,
또한 플레이그라운드의 구성 파일에서 gatsby-plugin-mdx
플러그인을 사용하는 graphQL 쿼리의 예를 확인할 수도 있습니다.
transformer
(필수)
가져온 데이터를 메일리서치로 보내기 전에 변환하는 기능입니다.
graphQL 쿼리를 실행한 후, 제공한 쿼리에 따라 프로젝트마다 다를 수 있는 구조의 데이터 객체가 수신됩니다. Meilisearch는 각 문서의 루트에 고유 식별자가 필요하고 중첩된 개체를 피해야 하므로 이에 따라 데이터 개체를 변환해야 합니다. 이를 수행하는 데는 transformer
기능이 적합합니다.
예:
transformer : data =>
data . allSitePage . nodes . map ( ( node , index ) => ( {
id : index ,
... node ,
} ) ) ,
transformer
기능을 사용하지 않으면 데이터는 다음과 같습니다.
{
data : {
allSitePage : {
nodes : [
{
path : '/404/'
} ,
{
path : '/404.html'
} ,
{
path : '/'
}
]
}
}
}
위의 예에서와 같이 transformer
기능을 사용한 후 데이터는 다음과 같으며 인덱싱할 준비가 됩니다.
[
{
id : 0 ,
path : '/404/' ,
} ,
{
id : 1 ,
path : '/404.html' ,
} ,
{
id : 2 ,
path : '/' ,
} ,
] ;
Meilisearch의 문서 구조에 대해 더 자세히 알고 싶다면 당사 문서를 참조하세요.
전체 사용 예:
{
resolve : 'gatsby-plugin-meilisearch' ,
options : {
host : 'http://localhost:7700' ,
apiKey : 'masterKey' ,
skipIndexing : false ,
batchSize : 1000 ,
options : {
settings : {
searchableAttributes : [ "*" ] ,
} ,
} ,
indexes : [
{
indexUid : 'my_index' ,
transformer : ( ) => { } ,
query : ``
} ,
] ,
}
지원되는 개츠비 버전 :
(이 플러그인은 이전 Gatsby 버전에서 작동할 수 있지만 현재 테스트되거나 공식적으로 지원되지 않습니다.)
지원되는 메일리서치 버전 :
이 패키지는 Meilisearch v1.x 버전과의 호환성을 보장하지만 일부 기능이 없을 수 있습니다. 자세한 내용은 문제를 확인하세요.
노드/NPM 버전 :
새 프로젝트를 시작하려면 항상 최신 버전의 Gatsby를 사용하는 것이 좋습니다 .
이 프로젝트에 대한 새로운 기여는 무엇이든 환영합니다!
개발 워크플로우에 대해 더 알고 싶거나 기여하고 싶다면 기여 지침을 방문하여 자세한 지침을 확인하세요!