3단계 - 검색 사용 .NET 웹 사이트 배포
검색 사용 웹 사이트를 Azure Static Web Apps로 배포합니다. 이 배포에는 웹 페이지의 React 앱과 검색 작업을 위한 함수 앱이 모두 포함됩니다.
정적 웹앱은 azure-search-static-web-app 리포지토리의 포크를 사용하여 GitHub에서 배포할 정보와 파일을 가져옵니다.
Visual Studio Code에서 Static Web App 만들기
Visual Studio Code에서 대량 삽입 폴더(예:
azure-search-static-web-app)가 아니라 리포지토리 루트에 있는지 확인합니다.작업 표시줄에서 Azure를 선택한 다음 사이드 바에서 리소스를 엽니다.
Static Web Apps을 마우스 오른쪽 단추로 클릭한 다음 Static Web Apps 만들기(고급)를 선택합니다. 이 옵션이 표시되지 않으면 Visual Studio Code용 Azure Functions 확장이 있는지 확인합니다.
변경 내용을 커밋하라는 팝업 창이 표시되면 커밋하지 마세요. 대량 가져오기 단계의 비밀은 리포지토리에 커밋하면 안 됩니다.
변경 내용을 롤백하려면 Visual Studio Code의 작업 표시줄에서 소스 제어 아이콘을 선택한 다음, 변경 내용 목록에서 변경된 각 파일을 선택하고, 변경 내용 취소 아이콘을 선택합니다.
프롬프트에 따라 정적 웹앱을 만듭니다.
프롬프트 Enter 새 리소스에 대한 리소스 그룹 선택 정적 앱에 대한 새 리소스 그룹을 만듭니다. 새 Static Web App에 대한 이름 입력 정적 앱에 my-demo-static-web-app같은 이름을 지정합니다.SKU 선택 이 자습서에서는 무료 SKU를 선택합니다. 새 리소스의 위치 선택 가까운 지역을 선택합니다. 기본 프로젝트 구조를 구성하기 위한 사전 설정 빌드 선택 사용자 지정을 선택합니다. 클라이언트 애플리케이션 코드의 위치를 선택합니다. client
이는 리포지토리 루트에서 정적 웹앱까지의 경로입니다.빌드 출력 경로 입력 build
이는 정적 웹앱에서 생성된 파일로의 경로입니다.잘못된 지역에 대한 오류가 발생하면 리소스 그룹 및 정적 웹앱 리소스가 오류 응답에 나열된 지원되는 지역 중 하나에 있는지 확인합니다.
정적 웹앱을 만들면 GitHub 워크플로 YML 파일도 로컬 및 포크의 GitHub에 만들어집니다. 이 워크플로는 포크에서 실행되어 정적 웹앱 및 함수를 빌드 및 배포합니다.
다음 방법 중 어느 것을 사용하여 정적 웹앱 배포의 상태를 확인합니다.
알림에서 GitHub에서 작업 열기를 선택합니다. 그러면 포크된 리포지토리를 가리키는 브라우저 창이 열립니다.
포크된 리포지토리에서 작업 탭을 선택합니다. 포크에 모든 워크플로 목록이 표시됩니다.
Visual Code에서 Azure: 활동 로그 를 선택합니다. 다음 스크린샷과 유사한 메시지가 표시됩니다.
Visual Studio Code에서 Azure AI 검색 쿼리 키 가져오기
최소 권한 원칙을 따르지 않는 쿼리 목적으로 검색 관리자 키를 재사용하고 싶은 마음이 들 수 있습니다. Azure 함수는 최소 권한을 준수하기 위해 쿼리 키를 사용합니다.
Visual Studio Code에서 새 터미널 창을 엽니다.
다음 Azure CLI 명령을 사용하여 쿼리 API 키를 가져옵니다.
az search query-key list --resource-group YOUR-SEARCH-SERVICE-RESOURCE-GROUP --service-name YOUR-SEARCH-SERVICE-NAME다음 섹션에서 사용할 이 쿼리 키를 유지합니다. 쿼리 키는 검색 인덱스에 대한 읽기 권한을 부여합니다.
Azure Portal에서 환경 변수 추가
검색 비밀이 설정에 있을 때까지 Azure Function 앱에서 검색 데이터를 반환하지 않습니다.
작업 표시줄에서 Azure를 선택합니다.
Static Web Apps 리소스를 마우스 오른쪽 단추로 클릭한 다음, 포털에서 열기를 선택합니다.
환경 변수를 선택한 다음 + 애플리케이션 설정 추가를 선택합니다.
다음 각 설정을 추가합니다.
설정 검색 리소스 값 SearchApiKey 검색 쿼리 키 SearchServiceName 검색 리소스 이름 SearchIndexName good-booksSearchFacets authors*,language_codeAzure AI 검색에는 문자열과 다르게 컬렉션을 필터링하는 구문이 필요합니다. 필드 이름 뒤에
*를 추가하여 필드가Collection(Edm.String)형식임을 나타냅니다. 이렇게 하면 Azure Function에서 필터를 올바르게 쿼리에 추가할 수 있습니다.설정을 확인하여 다음 스크린샷과 같은지 확인합니다.
Visual Studio Code로 돌아갑니다.
애플리케이션 설정 및 함수를 보려면 정적 웹앱을 새로 고칩니다.
애플리케이션 설정이 표시되지 않으면 GitHub 워크플로를 업데이트하고 다시 시작하기 위한 단계를 다시 방문합니다.
정적 웹앱에서 검색 사용
Visual Studio Code에서 작업 막대를 열고, Azure 아이콘을 선택합니다.
사이드바의
Static Web Apps영역 아래에서 마우스 오른쪽 단추로 Azure 구독을 클릭하고, 이 자습서를 위해 만든 정적 웹앱을 찾습니다.마우스 오른쪽 단추로 정적 웹앱 이름을 클릭하고, 사이트 찾아보기를 선택합니다.
팝업 대화 상자에서 열기를 선택합니다.
웹 사이트 쿼리 창에서
code와 같은 검색 쿼리를 입력합니다. 그러면 제안 기능에서 책 제목을 제안합니다. 제안을 선택하거나 사용자 고유의 쿼리를 계속 입력합니다. 검색 쿼리가 완료되면 Enter 키를 누릅니다.결과를 검토한 다음, 책 중 하나를 선택하여 자세한 내용을 확인합니다.
문제 해결
웹앱이 배포되지 않거나 작동하지 않으면 다음 목록을 사용하여 문제를 확인하고 수정합니다.
배포가 성공했나요?
배포가 성공했는지 확인하려면 샘플 리포지토리의 내 포크로 이동하여 GitHub 작업의 성공 또는 실패를 검토해야 합니다. 1개의 작업만 있어야 하며
app_location,api_location및output_location에 대한 정적 웹앱 설정이 있어야 합니다. 작업이 성공적으로 배포되지 않은 경우 작업 로그를 살펴보고 마지막 실패를 찾습니다.클라이언트(프런트 엔드) 애플리케이션이 작동하나요?
웹앱에 액세스할 수 있어야 하며 성공적으로 표시되어야 합니다. 배포에 성공했지만 웹 사이트가 표시되지 않는 경우 앱이 Azure에 있을 때 앱을 다시 빌드하기 위해 정적 웹앱을 구성하는 방법에 문제가 있을 수 있습니다.
API(서버리스 백 엔드) 애플리케이션이 작동하나요?
클라이언트 앱과 상호 작용하여 책을 검색하고 필터링할 수 있어야 합니다. 양식이 값을 반환하지 않으면 브라우저의 개발자 도구를 열고 API에 대한 HTTP 호출이 성공했는지 확인합니다. 호출이 성공하지 못한 경우 API 엔드포인트 이름 및 검색 쿼리 키에 대한 정적 웹앱 구성이 올바르지 않기 때문일 가능성이 큽니다.
YML 파일에서 Azure Function 코드(
api_location)에 대한 경로가 올바르지 않으면 애플리케이션이 로드되지만 Azure AI 검색과의 통합을 제공하는 함수는 호출하지 않습니다. 배포 섹션을 다시 검토하여 경로가 올바른지 확인합니다.
리소스 정리
이 자습서에서 만든 리소스를 정리하려면 Azure Portal을 사용하여 해당 리소스 그룹 또는 개별 리소스를 삭제합니다.
Visual Studio Code에서 작업 막대를 열고, Azure 아이콘을 선택합니다.
사이드바의
Static Web Apps영역 아래에서 마우스 오른쪽 단추로 Azure 구독을 클릭하고, 이 자습서를 위해 만든 앱을 찾습니다.마우스 오른쪽 단추로 앱 이름을 클릭한 다음, 삭제를 선택합니다.
샘플의 GitHub 포크가 더 이상 필요하지 않은 경우 GitHub에서 해당 포크를 삭제해야 합니다. 포크의 설정으로 이동한 다음, 리포지토리를 삭제합니다.
Azure AI 검색을 삭제하려면 검색 서비스를 찾고 페이지 맨 위에서 삭제를 선택합니다.