1 - 검색을 웹 사이트에 추가하는 방법에 대한 개요
이 Azure AI 검색 자습서에서는 책 카탈로그를 검색하는 웹앱을 만든 다음, Azure Static Web Apps 리소스에 웹 사이트를 배포합니다.
이 자습서는 패싯 탐색, typeahead 및 페이지 매김과 같은 검색 상호 작용을 포함하는 프런트 엔드 클라이언트 앱을 만들려는 JavaScript 개발자를 위한 것입니다. 또한 백 엔드에서 인덱싱 및 쿼리 워크플로에 대한 Azure AI 검색 호출에 대한 JavaScript용 Azure SDK의 @azure/search-documents 라이브러리를 보여 줍니다.
샘플에서 수행하는 작업은 무엇인가요?
이 샘플 웹 사이트는 10,000권의 책 카탈로그에 대한 액세스를 제공합니다. 사용자는 검색 창에서 텍스트를 입력하여 카탈로그를 검색할 수 있습니다. 사용자가 텍스트를 입력하는 동안 웹 사이트에서 검색 인덱스의 제안 기능을 사용하여 텍스트를 완료합니다. 쿼리가 완료되면 책 목록이 세부 정보의 일부와 함께 표시됩니다. 사용자는 책을 선택하여 검색 인덱스에 저장된 책의 모든 세부 정보를 볼 수 있습니다.
검색 환경에는 다음이 포함됩니다.
- 검색 – 애플리케이션에 대한 검색 기능을 제공합니다.
- 제안 – 사용자가 검색 창에 입력함에 따라 제안을 제공합니다.
- 패싯 및 필터 - 작성자 또는 언어로 필터링하는 패싯 탐색 구조를 제공합니다.
- 페이지를 매긴 결과 - 결과를 스크롤하기 위한 페이징 컨트롤을 제공합니다.
- 문서 조회 - ID로 문서를 조회하여 세부 정보 페이지에 대한 모든 내용을 검색합니다.
샘플은 어떻게 구성되나요?
샘플 코드는 다음 구성 요소를 포함합니다.
| App | 목적 | GitHub 리포지토리 위치 |
|---|---|---|
| 클라이언트 | 검색을 사용하여 책을 표시하도록 앱(프레젠테이션 계층)에 반응합니다. Azure 함수 앱을 호출합니다. | /search-website-functions-v4/client |
| 서버 | Azure 함수 앱(비즈니스 계층) - JavaScript SDK를 사용하여 Azure AI 검색 API를 호출합니다. | /search-website-functions-v4/api |
| 대량 삽입 | 인덱스를 만들고 문서를 추가하는 JavaScript 파일입니다. | /search-website-functions-v4/bulk-insert |
개발 환경 설정
로컬 개발 환경에서 다음 소프트웨어를 설치합니다.
-
- 이 지원되는 언어 버전 목록에서 최신 런타임 및 버전을 선택합니다.
- 다른 버전의 Node.js가 로컬 컴퓨터에 설치되어 있는 경우 Node Version Manager(
nvm) 또는 Docker 컨테이너를 사용하는 것이 좋습니다.
Visual Studio Code 및 다음 확장
- Azure Static Web App
- 명령줄 작업에 통합 터미널을 사용합니다.
선택 사항:
- 이 자습서는 Azure Function API를 로컬에서 실행하지 않습니다. 로컬에서 실행하려는 경우 다음 bash 명령을 사용하여 전역적으로 azure-functions-core-tools를 설치해야 합니다.
npm install -g azure-functions-core-tools@4
Git을 사용하여 검색 샘플 포크 및 복제
Static Web App을 배포하려면 샘플 리포지토리를 포크해야 합니다. 정적 웹앱은 자체 GitHub 포크 위치를 기반으로 빌드 작업 및 배포 콘텐츠를 결정합니다. 정적 웹앱의 코드 실행은 원격이며 정적 웹앱은 포크된 샘플의 코드에서 읽습니다.
GitHub에서 샘플 리포지토리를 포크합니다.
GitHub 계정을 사용하여 웹 브라우저에서 포크 프로세스를 완료합니다. 이 자습서에서는 Azure Static Web App에 대한 배포의 일부로 포크를 사용합니다.
bash 터미널에서 포크된 샘플 애플리케이션을 로컬 컴퓨터에 다운로드합니다.
YOUR-GITHUB-ALIAS를 GitHub 별칭으로 바꿉니다.git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-javascript-samples동일한 bash 터미널에서 이 웹 사이트 검색 예를 위해 포크된 리포지토리로 이동합니다.
cd azure-search-javascript-samplesVisual Studio Code 명령
code .를 사용하여 포크된 리포지토리를 엽니다. 나머지 작업은 지정된 경우를 제외하고는 Visual Studio Code에서 수행됩니다.code .
Azure 리소스에 대한 리소스 그룹 만들기
Visual Studio Code에서 작업 막대를 열고, Azure 아이콘을 선택합니다.
아직 로그인하지 않은 경우 Azure에 로그인합니다.
리소스 섹션에서 추가(+)를 선택한 다음 리소스 그룹 만들기를 선택합니다.
리소스 그룹 이름(예:
cognitive-search-demo-rg)을 입력합니다.지역을 입력합니다.
- Node.js의 경우
West US 2를 선택합니다. 이는 Azure 함수 PM(프로그래밍 모델) v4 미리 보기에 권장되는 지역입니다. - C# 및 Python의 경우 Azure Static Web Apps에서 지원하는 다음 지역을 사용하는 것이 좋습니다.
West US 2,East US 2,West Europe,Central US,East Asia
- Node.js의 경우
이 자습서에서 만든 모든 리소스에 대해 이 리소스 그룹을 사용합니다. 리소스 그룹은 완료 시 삭제를 포함하여 리소스를 관리하는 논리적 단위를 제공합니다.