1단계 - .NET을 사용하여 정적 웹앱에 검색 추가 개요

이 자습서에서는 책 카탈로그를 검색하는 웹 사이트를 빌드한 다음, 해당 웹 사이트를 Azure 정적 웹앱에 배포합니다.

샘플에서 수행하는 작업은 무엇인가요?

이 샘플 웹 사이트는 10,000권의 책 카탈로그에 대한 액세스를 제공합니다. 검색 창에 텍스트를 입력하여 카탈로그를 검색할 수 있습니다. 텍스트를 입력하는 동안 웹 사이트에서는 검색 인덱스의 [\suggestion 기능을 사용하여 텍스트를 자동으로 완성합니다. 쿼리가 완료되면 책 목록이 세부 정보의 일부와 함께 표시됩니다. 책을 선택하여 책의 검색 인덱스로 저장된 모든 세부 정보를 볼 수 있습니다.

검색 환경에는 다음이 포함됩니다.

• 검색 – 애플리케이션에 대한 검색 기능을 제공합니다.
• 제안 – 사용자가 검색 창에 입력할 때 제안을 제공합니다.
• 패싯 및 필터 - 작성자 또는 언어별로 필터링하는 패싯 탐색 구조를 제공합니다.
• 페이지를 매긴 결과 - 결과를 스크롤하기 위한 페이징 컨트롤을 제공합니다.
• 문서 조회 – ID별로 문서를 조회하여 세부 정보 페이지의 모든 내용을 검색합니다.

샘플은 어떻게 구성되나요?

샘플 코드는 다음 구성 요소를 포함합니다.

개발 환경 설정

서비스를 만들고 로컬 개발 환경에 대해 다음 소프트웨어를 설치합니다.

• 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를 사용하여 포크된 샘플의 코드에서 읽습니다.

1. GitHub에서 azure-search-static-web-app 리포지토리를 포크합니다.

   GitHub 계정으로 웹 브라우저에서 포크 프로세스를 완료합니다. 이 자습서에서는 Azure Static Web App에 대한 배포의 일부로 포크를 사용합니다.

2. Bash 터미널에서 포크된 샘플 애플리케이션을 로컬 컴퓨터에 다운로드합니다.

   YOUR-GITHUB-ALIAS를 GitHub 별칭으로 바꿉니다.

   git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-static-web-app.git
   

3. 동일한 Bash 터미널에서 이 웹 사이트 검색 예를 위해 포크된 리포지토리로 이동합니다.

   cd azure-search-static-web-app
   

4. Visual Studio Code 명령 code .를 사용하여 포크된 리포지토리를 엽니다. 나머지 작업은 지정된 경우를 제외하고는 Visual Studio Code에서 수행됩니다.

   code .
   

다음 단계

• 인덱스 만들기 및 문서 로드
• Static Web App 배포