Blazor와 Elasticsearch로 검색 앱 구축하기

벡터 검색부터 강력한 REST API까지, Elasticsearch는 개발자에게 가장 폭넓은 검색 도구 키트를 제공합니다. GitHub의 샘플 노트북을 살펴보고 새로운 기능을 시험해 보세요. 무료 체험판을 시작하거나 지금 바로 Elasticsearch를 로컬에서 실행할 수도 있습니다.

이 문서에서는 C# 기술을 활용하여 Blazor와 Elasticsearch를 사용하여 검색 애플리케이션을 구축하는 방법에 대해 알아봅니다. 전체 텍스트, 시맨틱 및 하이브리드 검색 쿼리를 실행하기 위해 Elasticsearch .NET 클라이언트를 사용하겠습니다.

참고 이전 버전의 Elasticsearch C# 클라이언트 NEST에 익숙한 경우, NEST 클라이언트 지원 중단 및 새로운 기능에 대한 이 블로그 포스팅을 읽어보세요. NEST는 이전 세대의 .NET 클라이언트가 Elastic.Clients.Elasticsearch package

• 블레이저란 무엇인가요?
• ESRE란 무엇인가요?
• ELSER 구성
• 데이터 인덱싱
• 애플리케이션 구축

블레이저란 무엇인가요?

Blazor는 개발자가 클라이언트 또는 서버에서 실행되는 웹 애플리케이션을 빌드할 수 있도록 Microsoft에서 만든 오픈 소스 HTML, CSS 및 C# 기반 웹 프레임워크입니다. 또한 재사용 가능한 컴포넌트를 만들어 애플리케이션을 더 빠르게 빌드할 수 있으며, 개발자가 동일한 파일 내에서 C#으로 HTML 보기와 동작을 빌드할 수 있어 가독성 높고 깔끔한 코드를 유지할 수 있습니다. 또한 Blazor Hybrid를 사용하면 .NET 코드를 통해 네이티브 플랫폼 기능에 액세스하는 네이티브 모바일 앱을 빌드할 수 있습니다.

블레이저를 작업하기 좋은 프레임워크로 만드는 몇 가지 기능을 소개합니다:

• 서버 측 및 클라이언트 측 렌더링 옵션
• 재사용 가능한 UI 구성 요소
• SignalR로 실시간 업데이트
• 기본 제공 상태 관리
• 내장 라우팅 시스템
• 강력한 타이핑 및 컴파일 타임 검사

왜 블레이저인가요?

Blazor는 다른 프레임워크 및 라이브러리에 비해 몇 가지 장점을 제공합니다. 개발자는 클라이언트 및 서버 코드 모두에 C#을 사용할 수 있으며, 강력한 타이핑 및 컴파일 타임 검사를 제공하여 안정성을 향상시킵니다. .NET 에코시스템과 원활하게 통합되어 .NET 라이브러리 및 도구를 재사용할 수 있으며, 강력한 디버깅 지원을 제공합니다.

ESRE란 무엇인가요?

Elasticsearch Relevance Engine™ (ESRE) 은 강력한 Elasticsearch 검색 엔진 위에 머신 러닝과 인공 지능을 사용해 검색 애플리케이션을 구축하는 도구 세트입니다.

ESRE에 대해 자세히 알아보려면 여기에서인사이트가 담긴 블로그 게시물을 읽어보세요.

ELSER 구성

Elastic의 ESRE 기능을 활용하기 위해, 우리는 모델 공급자로 ELSER를 사용할 것입니다.

Elasticsearch의 ELSER 모델을 사용하려면, 플래티넘 또는 엔터프라이즈 라이선스가 있어야 하며 최소 4GB 크기의 전용 머신 러닝(ML) 노드가 있어야 합니다. 여기에서 자세히 알아보세요.

추론 엔드포인트를 만드는 것부터 시작하세요:

ELSER를 처음 사용하는 경우 모델이 백그라운드에서 로드될 때 502 잘못된 게이트웨이 오류가 발생할 수 있습니다. Kibana의 Machine Learning > Trained Models 에서 모델의 상태를 확인할 수 있습니다. 배포가 완료되면 다음 단계로 진행할 수 있습니다.

데이터 인덱싱

여기에서 데이터 세트를 다운로드한 다음 Kibana를 사용하여 데이터를 가져올 수 있습니다. 이렇게 하려면 홈페이지로 이동하여 "데이터 업로드" 를 클릭합니다. 그런 다음 파일을 업로드하고 Import 을 클릭합니다. 마지막으로 Advanced 탭으로 이동하여 다음 매핑을 붙여넣습니다:

시맨틱 및 전체 텍스트 쿼리를 실행할 수 있는 인덱스를 만들려고 합니다. semantic_text 필드 유형은 데이터 청크 및 임베딩을 처리합니다. 을 으로 색인하고 있으며, 필드를 과 text` 로 모두 색인하려면 longDescription  semantic_textcopy_to를 사용할 수semantic_text 있습니다.

Blazor로 앱 구축 & Elasticsearch

API 키

가장 먼저 해야 할 일은 Elasticsearch에 대한 요청을 인증하기 위해 API 키를 생성하는 것입니다. API 키는 읽기 전용이어야 하며 books-blazor 인덱스에 대한 쿼리만 허용되어야 합니다.

다음과 같은 내용이 표시됩니다:

encoded 응답 필드의 값은 나중에 필요하므로 저장합니다. Elastic Cloud에서 실행 중인 경우, 클라우드 ID도 필요합니다. ( 여기에서 찾을 수 있습니다).

블레이저 프로젝트 만들기

먼저 Blazor를 설치하고 공식 지침에 따라 샘플 프로젝트를 생성하세요.

프로젝트가 생성되면 폴더 구조와 파일은 다음과 같이 보일 것입니다:

템플릿 애플리케이션에는 부트스트랩 v5.1.0이 포함됩니다. 스타일링을 위해.

Elasticsearch .NET 클라이언트를 설치하여 프로젝트 설정을 완료합니다:

이 단계를 완료하면 페이지가 다음과 같이 표시됩니다:

폴더 구조

이제 폴더를 다음과 같이 정리해 보겠습니다:

파일 설명:

• Components/Pages/Search.razor: 검색창, 결과, 필터가 포함된 메인 페이지입니다.
• Components/Pages/Search.razor.css: 페이지 스타일.
• Components/Elasticsearch/SearchBar.razor: 검색창 컴포넌트.
• Components/Elasticsearch/Results.razor: 결과 컴포넌트.
• Components/Elasticsearch/Facet.razor: 구성 요소를 필터링합니다.
• Components/Svg/GlassIcon.razor: 검색 아이콘.
• Components/_Imports.razor: 모든 컴포넌트를 가져옵니다.
• Models/Book.cs: 여기에는 책 필드 스키마가 저장됩니다.
• Models/Response.cs: 검색 결과, 패싯 및 총 조회수를 포함한 응답 스키마를 저장합니다.
• Services/ElasticsearchService.cs: Elasticsearch 서비스. Elasticsearch에 대한 연결과 쿼리를 처리합니다.

초기 구성

몇 가지 정리부터 시작하겠습니다.

파일을 삭제합니다:

• Components/Pages/Counter.razor
• Components/Pages/Weather.razor
• Components/Pages/Home.razor
• 컴포넌트/레이아웃/NavMenu.razor
• Components/Layout/NavMenu.razor.css

/Components/_Imports.razor 파일을 확인하세요. 다음과 같은 가져오기 항목이 있어야 합니다:

프로젝트에 Elastic 통합하기

이제 Elasticsearch 구성 요소를 가져와 보겠습니다:

/Components/Layout/MainLayout.razor 파일에서 기본 사이드바를 제거하여 애플리케이션을 위한 더 많은 공간을 확보하겠습니다:

이제 사용자 비밀에 대한 Elasticsearch 자격 증명을 입력해 보겠습니다:

이 접근 방식을 사용하면 .Net 8은 프로젝트 폴더 외부의 별도 위치에 중요한 데이터를 저장하고 IConfiguration 인터페이스를 사용하여 액세스할 수 있습니다. 이러한 변수는 동일한 사용자 비밀을 사용하는 모든 .Net 프로젝트에서 사용할 수 있습니다.

그런 다음 Program.cs 파일을 수정하여 시크릿을 읽고 Elasticsearch 클라이언트를 마운트해 보겠습니다:

먼저 필요한 라이브러리를 가져옵니다:

• BlazorApp.Services: Elasticsearch 서비스를 포함합니다.
• Elastic.Clients.Elasticsearch: Elasticsearch 클라이언트 .Net 8 라이브러리를 가져옵니다.
• Elastic.Transport: 요청을 인증하는 데 ApiKey 클래스를 사용할 수 있는 Elasticsearch 전송 라이브러리를 가져옵니다.

둘째, var app = builder.Build() 줄 앞에 다음 코드를 삽입합니다:

이 코드는 사용자 비밀번호에서 Elasticsearch 자격 증명을 읽고 Elasticsearch 클라이언트 인스턴스를 생성합니다.

ElasticSearch 클라이언트 초기화 후, 다음 줄을 추가하여 Elasticsearch 서비스를 등록합니다:

다음 단계는 /Services/ElasticsearchService.cs 파일에 검색 로직을 구축하는 것입니다:

먼저 필요한 라이브러리와 모델을 가져옵니다:

둘째, ElasticsearchService, 생성자 및 변수를 추가합니다:

검색 구성

이제 검색 로직을 구축해 보겠습니다:

• BuildFilters 는 사용자가 선택한 패싯을 사용하여 검색 쿼리에 대한 필터를 작성합니다.
• BuildHybridQuery 는 전체 텍스트와 시맨틱 검색을 결합한 하이브리드 검색 쿼리를 작성합니다.

다음으로 검색 방법을 추가합니다:

• SearchBooksAsync는 하이브리드 쿼리를 사용하여 검색을 수행하고 패싯을 구축하기 위한 집계가 포함된 결과를 반환합니다.
• FormatFacets는 집계 응답의 형식을 사전으로 지정합니다.
• ConvertFacetDictionary를 입력하면 패싯 사전이 더 읽기 쉬운 형식으로 변환됩니다.

다음 단계는 검색 페이지의 결과로 인쇄될 Elasticsearch 쿼리의 hits 에서 반환된 데이터를 나타낼 모델을 만드는 것입니다.

먼저 /Models/Book.cs 파일을 만들고 다음을 추가합니다:

그런 다음 /Models/Response.cs 파일에서 Elastic 응답을 설정하고 다음을 추가합니다:

기본 UI 구성

다음으로 SearchBar 컴포넌트를 추가합니다. /Components/Elasticsearch/SearchBar.razor 파일을 열고 다음을 추가합니다:

이 구성 요소에는 검색창과 검색을 수행하는 버튼이 포함되어 있습니다.

Blazor는 동일한 파일 내에서 C# 코드를 사용하여 동적으로 HTML을 생성할 수 있어 뛰어난 유연성을 제공합니다.

그 후 /Components/Elasticsearch/Results.razor 파일에서 검색 결과를 표시할 결과 컴포넌트를 빌드합니다:

마지막으로 검색 결과를 필터링하기 위해 패싯을 만들어야 합니다.

참고: 패싯은 사용자가 제품 유형, 가격대, 브랜드 등 특정 속성이나 카테고리를 기준으로 검색 결과의 범위를 좁힐 수 있는 필터입니다. 이러한 필터는 일반적으로 사용자가 검색 범위를 좁히고 관련 결과를 더 쉽게 찾을 수 있도록 클릭 가능한 옵션으로 표시되며, 종종 확인란 형태로 제공됩니다. Elasticsearch 컨텍스트에서 패싯은 집계를사용하여 생성됩니다.

다음 코드를 입력하여 패싯을 설정합니다. /Components/Elasticsearch/Facet.razor 파일에서 :

이 구성 요소는 author, categories, status 필드에 있는 terms 집계에서 읽은 다음 필터 목록을 생성하여 Elasticsearch로 다시 보냅니다.

이제 모든 것을 종합해 보겠습니다.

/Components/Pages/Search.razor 파일에서:

페이지가 작동 중입니다!

보시다시피 이 페이지는 기능적이지만 스타일이 부족합니다. 좀 더 체계적이고 반응이 빠른 CSS를 추가해 보겠습니다.

레이아웃 스타일 교체를 시작해 보겠습니다. Components/Layout/MainLayout.razor.css 파일에서:

Components/Pages/Search.razor.css 파일에 검색 페이지의 스타일을 추가합니다:

페이지가 더 보기 좋아지기 시작합니다:

이제 마지막 마무리를 해보겠습니다:

다음 파일을 만듭니다:

• Components/Elasticsearch/Facet.razor.css
• Components/Elasticsearch/Results.razor.css

그리고 Facet.razor.css 에 스타일을 추가합니다:

Results.razor.css 의 경우 :

최종 결과:

애플리케이션을 실행하려면 다음 명령을 사용할 수 있습니다:

dotnet watch

해냈어요! 이제 검색창을 사용해 Elasticsearch 색인에서 책을 검색하고 저자, 카테고리, 상태별로 결과를 필터링할 수 있습니다.

전체 텍스트 및 시맨틱 검색 수행

기본적으로 앱은 전체 텍스트 검색과 시맨틱 검색을 모두 사용하는 하이브리드 검색을 수행합니다. 전체 텍스트 검색과 시맨틱 검색을 위한 두 가지 방법을 별도로 만든 다음 사용자의 입력에 따라 쿼리를 작성하는 방법 중 하나를 선택하여 검색 로직을 변경할 수 있습니다.

/Services/ElasticsearchService.cs 파일의 ElasticsearchService 클래스에 다음 메서드를 추가합니다:

두 방법 모두 BuildHybridQuery 방법과 유사하게 작동하지만 전체 텍스트 또는 시맨틱 검색만 수행합니다.

선택한 검색 방법을 사용하도록 SearchBooksAsync 방법을 수정할 수 있습니다:

전체 신청서는 여기에서확인할 수 있습니다.

결론

Blazor는 C#을 사용하여 웹 애플리케이션을 빌드할 수 있는 효과적인 프레임워크입니다. Elasticsearch는 검색 애플리케이션을 구축할 수 있는 강력한 검색 엔진입니다. 이 두 가지를 결합하면 강력한 검색 애플리케이션을 쉽게 구축할 수 있으며, ESRE의 강력한 기능을 활용하여 단시간에 시맨틱 검색 환경을 만들 수 있습니다.

자주 묻는 질문