3단계 - 검색 사용 .NET 웹 사이트 배포

아티클
04/25/2024

검색 사용 웹 사이트를 Azure Static Web Apps로 배포합니다. 이 배포에는 웹 페이지의 React 앱과 검색 작업을 위한 함수 앱이 모두 포함됩니다.

정적 웹앱은 샘플 리포지토리의 포크를 사용하여 GitHub에서 배포할 정보와 파일을 가져옵니다.

Visual Studio Code에서 Static Web App 만들기

Visual Studio Code에서 대량 삽입 폴더(예: azure-search-javascript-samples)가 아니라 리포지토리 루트에 있는지 확인합니다.
작업 표시줄에서 Azure를 선택한 다음 사이드 바에서 리소스를 엽니다.
Static Web Apps을 마우스 오른쪽 단추로 클릭한 다음 Static Web Apps 만들기(고급)를 선택합니다. 이 옵션이 표시되지 않으면 Visual Studio Code용 Azure Functions 확장이 있는지 확인합니다.
Visual Studio Code에서 배포하려는 분기를 묻는 팝업 창이 표시되면 일반적으로 main인 기본 분기를 선택합니다.

이 설정을 사용하면 해당 분기에 커밋하는 변경 내용만 정적 웹앱에 배포됩니다.
변경 내용을 커밋하라는 팝업 창이 표시되면 커밋하지 마세요. 대량 가져오기 단계의 비밀은 리포지토리에 커밋하면 안 됩니다.

변경 내용을 롤백하려면 Visual Studio Code의 작업 표시줄에서 소스 제어 아이콘을 선택한 다음, 변경 내용 목록에서 변경된 각 파일을 선택하고, 변경 내용 취소 아이콘을 선택합니다.

프롬프트에 따라 정적 웹앱을 만듭니다.

프롬프트	Enter
새 리소스에 대한 리소스 그룹 선택	이 자습서를 위해 만든 리소스 그룹을 사용합니다.
새 Static Web App에 대한 이름 입력	리소스에 대한 고유한 이름을 만듭니다. 예를 들어 `my-demo-static-web-app`와 같이 리포지토리 이름 앞에 이름을 추가할 수 있습니다.
SKU 선택	이 자습서에서는 무료 SKU를 선택합니다.
새 리소스의 위치 선택	Node.js 경우: Azure Function 프로그래밍 모델(PM) v4 미리 보기 중에 `West US 2`를 선택합니다. C# 및 Python의 경우 가까운 지역을 선택합니다.
기본 프로젝트 구조를 구성하기 위한 사전 설정 빌드 선택	사용자 지정을 선택합니다.
클라이언트 애플리케이션 코드의 위치를 선택합니다.	`search-website-functions-v4/client` 이는 리포지토리 루트에서 정적 웹앱까지의 경로입니다.
Azure Functions 코드의 위치를 선택하세요.	`search-website-functions-v4/api` 이는 리포지토리 루트에서 정적 웹앱까지의 경로입니다. 리포지토리에 다른 함수가 없는 경우 함수 코드 위치에 대한 메시지가 표시되지 않습니다. 현재 함수 코드 위치가 올바른지 확인하기 위해 추가 단계를 수행해야 합니다. 이러한 단계는 리소스를 만든 후 수행되며 이 문서에 설명되어 있습니다.
빌드 출력 경로 입력	`build` 이는 정적 웹앱에서 생성된 파일로의 경로입니다.

잘못된 지역에 대한 오류가 발생하면 리소스 그룹 및 정적 웹앱 리소스가 오류 응답에 나열된 지원되는 지역 중 하나에 있는지 확인합니다.

정적 웹앱을 만들면 GitHub 워크플로 YML 파일도 로컬 및 포크의 GitHub에 만들어집니다. 이 워크플로는 포크에서 실행되어 정적 웹앱 및 함수를 빌드 및 배포합니다.

다음 방법 중 어느 것을 사용하여 정적 웹앱 배포의 상태를 확인합니다.
- 알림에서 GitHub에서 작업 열기를 선택합니다. 그러면 포크된 리포지토리를 가리키는 브라우저 창이 열립니다.
- 포크된 리포지토리에서 작업 탭을 선택합니다. 포크에 모든 워크플로 목록이 표시됩니다.
- Visual Code에서 Azure: 활동 로그 를 선택합니다. 다음 스크린샷과 유사한 메시지가 표시됩니다.
현재 YML 파일은 Azure Function 코드에 대한 잘못된 경로 구문을 사용하여 만들어졌습니다. 이 해결 방법을 사용하여 구문을 수정하고 워크플로를 다시 실행합니다. YML 파일이 만들어지는 즉시 이 단계를 수행할 수 있습니다. 업데이트를 푸시하는 즉시 새 워크플로가 시작됩니다.
1. Visual Studio Code 탐색기에서 ./.github/workflows/ 디렉터리를 엽니다.
2. YML 파일을 엽니다.
3. api-location 경로(31줄 또는 그 근처)로 스크롤합니다.
4. 슬래시를 사용하도록 경로 구문을 변경합니다(api_location에만 편집이 필요하며 다른 위치는 컨텍스트를 위한 것).
```
app_location: "search-website-functions-v4/client" # App source code path
api_location: "search-website-functions-v4/api" # Api source code path - optional
output_location: "build" # Built app content directory - optional
```
5. 파일을 저장합니다.
6. 통합 터미널을 열고 다음 GitHub 명령을 실행하여 업데이트된 YML을 포크로 보냅니다.
```
git add -A
git commit -m "fix path"
git push origin main
```
계속하기 전에 워크플로 실행이 완료될 때까지 기다리세요. 완료하는 데 1~2분이 걸릴 수 있습니다.

Visual Studio Code에서 Azure AI 검색 쿼리 키 가져오기

Visual Studio Code에서 새 터미널 창을 엽니다.

다음 Azure CLI 명령을 사용하여 쿼리 API 키를 가져옵니다.

az search query-key list --resource-group cognitive-search-demo-rg --service-name my-cog-search-demo-svc

다음 섹션에서 사용할 이 쿼리 키를 유지합니다. 쿼리 키는 검색 인덱스에 대한 읽기 권한을 부여합니다.

Azure Portal에서 환경 변수 추가

검색 비밀이 설정에 있을 때까지 Azure Function 앱에서 검색 데이터를 반환하지 않습니다.

작업 표시줄에서 Azure를 선택합니다.
Static Web Apps 리소스를 마우스 오른쪽 단추로 클릭한 다음, 포털에서 열기를 선택합니다.
환경 변수를 선택한 다음 + 애플리케이션 설정 추가를 선택합니다.
다음 각 설정을 추가합니다.

설정 검색 리소스 값

SearchApiKey 검색 쿼리 키

SearchServiceName 검색 리소스 이름

SearchIndexName good-books

SearchFacets authors*,language_code

Azure AI 검색에는 문자열과 다르게 컬렉션을 필터링하는 구문이 필요합니다. 필드 이름 뒤에 *를 추가하여 필드가 Collection(Edm.String) 형식임을 나타냅니다. 이렇게 하면 Azure Function에서 필터를 올바르게 쿼리에 추가할 수 있습니다.
설정을 확인하여 다음 스크린샷과 같은지 확인합니다.
Visual Studio Code로 돌아갑니다.
애플리케이션 설정 및 함수를 보려면 정적 웹앱을 새로 고칩니다.

설정	검색 리소스 값
SearchApiKey	검색 쿼리 키
SearchServiceName	검색 리소스 이름
SearchIndexName	`good-books`
SearchFacets	`authors*,language_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 검색과의 통합을 제공하는 함수는 호출하지 않습니다. 경로 수정에 대한 도움말은 배포 섹션의 해결 방법을 다시 확인하세요.

리소스 정리

이 자습서에서 만든 리소스를 정리하려면 리소스 그룹을 삭제합니다.

Visual Studio Code에서 작업 막대를 열고, Azure 아이콘을 선택합니다.
사이드바의 Resource Groups 영역 아래에서 마우스 오른쪽 단추로 Azure 구독을 클릭하고, 이 자습서를 위해 만든 리소스 그룹을 찾습니다.
마우스 오른쪽 단추로 리소스 그룹 이름을 클릭한 다음, 삭제를 선택합니다. 이렇게 하면 검색 및 Static Web Apps 리소스가 모두 삭제됩니다.
샘플의 GitHub 포크가 더 이상 필요하지 않은 경우 GitHub에서 해당 포크를 삭제해야 합니다. 포크의 설정으로 이동한 다음, 포크를 삭제합니다.

다음 단계

검색 사용 웹 사이트에 대한 검색 통합 이해

다음을 통해 공유