1단계 - .NET을 사용하여 정적 웹앱에 검색 추가 개요
이 자습서에서는 책 카탈로그를 검색하는 웹 사이트를 빌드한 다음, 해당 웹 사이트를 Azure 정적 웹앱에 배포합니다.
샘플에서 수행하는 작업은 무엇인가요?
이 샘플 웹 사이트는 10,000권의 책 카탈로그에 대한 액세스를 제공합니다. 검색 창에 텍스트를 입력하여 카탈로그를 검색할 수 있습니다. 텍스트를 입력하는 동안 웹 사이트에서는 검색 인덱스의 제안 기능을 사용하여 텍스트를 자동으로 완성합니다. 쿼리가 완료되면 책 목록이 세부 정보의 일부와 함께 표시됩니다. 책을 선택하여 책의 검색 인덱스로 저장된 모든 세부 정보를 볼 수 있습니다.
검색 환경에는 다음이 포함됩니다.
- 검색 – 애플리케이션에 대한 검색 기능을 제공합니다.
- 제안 – 사용자가 검색 창에 입력할 때 제안을 제공합니다.
- 패싯 및 필터 - 작성자 또는 언어별로 필터링하는 패싯 탐색 구조를 제공합니다.
- 페이지를 매긴 결과 - 결과를 스크롤하기 위한 페이징 컨트롤을 제공합니다.
- 문서 조회 – ID별로 문서를 조회하여 세부 정보 페이지의 모든 내용을 검색합니다.
샘플은 어떻게 구성되나요?
샘플 코드는 다음 구성 요소를 포함합니다.
| App | 목적 | GitHub 리포지토리 위치 |
|---|---|---|
| client | 검색을 사용하여 책을 표시하도록 앱(프레젠테이션 계층)에 반응합니다. Azure 함수 앱을 호출합니다. | /azure-search-static-web-app/client |
| api | Azure .NET 함수 앱(비즈니스 계층) - .NET SDK를 사용하여 Azure AI 검색 API를 호출합니다. | /azure-search-static-web-app/api |
| 대량 삽입 | .NET 프로젝트를 사용하여 인덱스 만들기 및 문서를 추가합니다. | /azure-search-static-web-app/bulk-insert |
개발 환경 설정
서비스를 만들고 로컬 개발 환경에 대해 다음 소프트웨어를 설치합니다.
- Azure AI Search 모든 지역 또는 계층
- .NET 6 이상
- Git
- Visual Studio Code
- Visual Studio Code에 대한 C# Dev Tools 확장
- Visual Studio Code용 Azure Static Web App 확장
이 자습서에서는 Azure Function API를 로컬로 실행하지 않지만 로컬로 실행하려는 경우 azure-functions-core-tools를 설치합니다.
Git을 사용하여 검색 샘플 포크 및 복제
Static Web App을 배포하려면 샘플 리포지토리를 포크해야 합니다. 웹앱은 사용자 고유의 GitHub 포크 위치에 따라 빌드 작업 및 배포 콘텐츠를 결정합니다. Static Web App의 코드 실행은 원격으로 수행되며, Azure Static Web Apps를 사용하여 포크된 샘플의 코드에서 읽습니다.
GitHub에서 azure-search-static-web-app 리포지토리를 포크합니다.
GitHub 계정으로 웹 브라우저에서 포크 프로세스를 완료합니다. 이 자습서에서는 Azure Static Web App에 대한 배포의 일부로 포크를 사용합니다.
Bash 터미널에서 포크된 샘플 애플리케이션을 로컬 컴퓨터에 다운로드합니다.
YOUR-GITHUB-ALIAS를 GitHub 별칭으로 바꿉니다.git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-static-web-app.git동일한 Bash 터미널에서 이 웹 사이트 검색 예를 위해 포크된 리포지토리로 이동합니다.
cd azure-search-static-web-appVisual Studio Code 명령
code .를 사용하여 포크된 리포지토리를 엽니다. 나머지 작업은 지정된 경우를 제외하고는 Visual Studio Code에서 수행됩니다.code .