기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
# 배포 Amazon Kendra
**참고**
기능 지원은 인덱스 유형 및 사용 중인 검색 API에 따라 다릅니다. 사용 중인 인덱스 유형 및 검색 API에 대해 이 기능이 지원되는지 확인하려면 [인덱스 유형](https://docs.aws.amazon.com/kendra/latest/dg/hiw-index-types.html)을 참조하세요.
웹 사이트에 Amazon Kendra 검색을 배포할 때가 되면 React와 함께 사용하여 애플리케이션을 시작할 수 있는 소스 코드를 제공합니다. 수정된 MIT 라이선스에 따라 소스 코드가 무료로 제공됩니다. 그대로 사용하거나 필요에 따라 변경할 수 있습니다. 제공된 React 앱은 시작하는 데 도움이 되는 예입니다. 프로덕션 지원 앱이 아닙니다.
코드 없이 검색 애플리케이션을 배포하고 액세스 제어가 가능한 검색 페이지의 엔드포인트 URL을 생성하려면 [Amazon Kendra Experience Builder](https://docs.aws.amazon.com/kendra/latest/dg/deploying-search-experience-no-code.html)를 참조하세요.
다음 예제 코드는 기존 React 웹 애플리케이션에 Amazon Kendra 검색을 추가합니다.
+ [https://kendrasamples.s3.amazonaws.com/kendrasamples-react-app.zip](https://kendrasamples.s3.amazonaws.com/kendrasamples-react-app.zip) - 개발자가 기존 React 웹 애플리케이션에 기능적인 검색 환경을 구축하는 데 사용할 수 있는 샘플 파일입니다.
예제는 Amazon Kendra 콘솔의 검색 페이지 이후에 모델링됩니다. 검색 및 검색 결과 표시 기능은 동일합니다. 전체 예제를 사용할 수도 있고, 기능 중 하나만 선택하여 사용할 수도 있습니다.
Amazon Kendra 콘솔에서 검색 페이지의 세 가지 구성 요소를 보려면 오른쪽 메뉴에서 코드 아이콘(****)을 선택합니다. 각 섹션 위에 포인터를 놓으면 구성 요소에 대한 간략한 설명과 구성 요소 소스의 URL을 확인할 수 있습니다.
**Topics**
+ [개요](#example-overview)
+ [사전 조건](#example-prereqs)
+ [예제 설정](#example-install)
+ [기본 검색 페이지](#main-component)
+ [검색 구성 요소](#search-component)
+ [결과 구성 요소](#results-component)
+ [패싯 구성 요소](#facets-component)
+ [페이지 매김 구성 요소](#pagination-component)
+ [코드 없이 검색 환경 구축](deploying-search-experience-no-code.md)
## 개요
기존 React 웹 애플리케이션에 예제 코드를 추가하여 검색을 활성화합니다. 예제 코드에는 새로운 React 개발 환경을 설정하는 단계가 포함된 Readme 파일이 포함되어 있습니다. 코드 예제의 예제 데이터를 사용하여 검색을 시연할 수 있습니다. 예제 코드의 검색 파일 및 구성 요소는 다음과 같이 구성되어 있습니다.
+ 기본 검색 페이지(`Search.tsx`) - 모든 구성 요소가 포함된 기본 페이지입니다. 여기에서 애플리케이션을 Amazon Kendra API와 통합합니다.
+ 검색 창 - 사용자가 검색어를 입력하고 검색 함수를 호출하는 구성 요소입니다.
+ 결과 - 결과를 표시하는 구성 요소입니다 Amazon Kendra. 제안된 답변, FAQ 결과, 권장 문서라는 세 가지 구성 요소로 구성됩니다.
+ 패싯 - 검색 결과에 패싯을 표시하는 구성 요소로, 패싯을 선택하여 검색 범위를 좁힐 수 있습니다.
+ 페이지 매김 - Amazon Kendra의 응답에 페이지를 매기는 구성 요소입니다.
## 사전 조건
시작하려면 다음이 필요합니다.
+ Node.js 및 npm이 [설치되었습니다](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). Node.js 버전 19 이상이 필요합니다.
+ Python 3 또는 Python 2가 [다운로드 및 설치되었습니다](https://www.python.org/downloads/).
+ Amazon Kendra에 대한 API 호출이 가능한 [SDK for Java](https://docs.aws.amazon.com/sdk-for-java/latest/developer-guide/setup.html) 또는 [AWS SDK for JavaScript](https://docs.aws.amazon.com/sdk-for-javascript/latest/developer-guide/welcome.html).
+ 기존 React 웹 애플리케이션. 예제 코드에는 필수 프레임워크/라이브러리 사용을 포함하여 새로운 React 개발 환경을 설정하는 방법에 대한 단계가 포함된 Readme 파일이 포함되어 있습니다. [React 웹 앱 생성에 대한 React 설명서](https://create-react-app.dev/docs/getting-started)의 빠른 시작 지침을 따를 수도 있습니다.
+ 개발 환경에 구성된 필수 라이브러리 및 종속성. 예제 코드에는 필수 라이브러리와 패키지 종속성을 나열하는 Readme 파일이 포함되어 있습니다. 더 이상 `node-sass`가 사용되지 않으므로 `sass`가 필수 항목입니다. 이전에 `node-sass`를 설치한 경우, 제거하고 `sass`를 설치합니다.
## 예제 설정
React 애플리케이션에 Amazon Kendra 검색을 추가하는 전체 절차는 코드 예제에 포함된 Readme 파일에 있습니다.
**kendrasamples-react-app.zip 사용을 시작하려면**
1. Node.js 및 npm 다운로드 및 설치를 포함한 [사전 조건](#example-prereqs) 작업을 완료했는지 확인하세요.
1. kendrasamples-react-app.zip 다운로드 후 압축을 해제합니다.
1. 터미널을 열고 `aws-kendra-example-react-app/src/services/`로 이동합니다. `local-dev-credentials.json` 열고 보안 인증을 제공합니다. 이 파일을 퍼블릭 리포지토리에 추가하면 안 됩니다.
1. `aws-kendra-example-react-app`으로 이동하여 `package.json`의 종속성을 설치합니다. `npm install`를 실행합니다.
1. 로컬 서버에서 앱의 데모 버전을 실행합니다. `npm start`를 실행합니다. 키보드로 `Cmd/Ctrl + C`를 입력하여 로컬 서버를 중지할 수 있습니다.
1. `package.json`으로 이동하여 포트 또는 호스트(예: IP 주소)를 변경하고 호스트 및 포트를 업데이트할 수 있습니다. `"start": "HOST=[host] PORT=[port] react-scripts start"`. Windows를 사용하는 경우: `"start": "set HOST=[host] && set PORT=[port] && react-scripts start"`.
1. 등록된 웹사이트 도메인이 있는 경우 앱 이름 뒤의 `package.json`에 이를 지정할 수 있습니다. 예를 들어 `"homepage": "https://mywebsite.com"`입니다. `npm install`을 다시 실행하여 새 종속성을 업데이트한 다음 `npm start`를 실행해야 합니다.
1. 앱을 빌드하려면 `npm build`를 수행합니다. 빌드 디렉터리의 콘텐츠를 호스팅 제공업체에 업로드합니다.
**주의**
React 앱은 아직 프로덕션 준비가 되지 **않았습니다**. Amazon Kendra 검색을 위해 앱을 배포하는 예입니다.
## 기본 검색 페이지
기본 검색 페이지(`Search.tsx`)에는 모든 예제 검색 구성 요소가 들어 있습니다. 여기에는 출력용 검색 창 구성 요소, [Query](https://docs.aws.amazon.com/kendra/latest/APIReference/API_Query.html) API의 응답을 표시하는 결과 구성 요소, 응답을 통한 페이징을 위한 페이지 매김 구성 요소가 포함됩니다.
## 검색 구성 요소
검색 구성 요소는 쿼리 텍스트를 입력할 수 있는 텍스트 상자를 제공합니다. `onSearch` 함수는 `Search.tsx`에서 기본 함수를 호출하여 Amazon Kendra [Query](https://docs.aws.amazon.com/kendra/latest/APIReference/API_Query.html) API 호출을 수행하는 후크입니다.
## 결과 구성 요소
결과 구성요소는 `Query` API의 응답을 보여줍니다. 결과는 세 개의 개별 영역에 표시됩니다.
+ 제안된 답변 - `Query` API에서 가장 많이 반환된 결과입니다. 제안된 답변은 최대 3개까지 포함됩니다. 응답에는 `ANSWER` 결과 유형이 있습니다.
+ FAQ 답변 - 응답에서 반환하는 자주 묻는 질문 결과입니다. FAQ는 인덱스에 별도로 추가됩니다. 응답에는 `QUESTION_ANSWER` 유형이 있습니다. 자세한 내용은 [질문 및 답변](https://docs.aws.amazon.com/kendra/latest/dg/in-creating-faq.html)을 참조하세요.
+ 권장 문서 - 응답에서가 Amazon Kendra 반환하는 추가 문서입니다. `Query` API의 응답에는 `DOCUMENT` 유형이 있습니다.
결과 구성 요소는 강조 표시, 제목, 링크 등의 기능에 대한 구성 요소 세트를 공유합니다. 결과 구성 요소가 작동하려면 공유 구성 요소가 있어야 합니다.
## 패싯 구성 요소
패싯 구성 요소는 검색 결과에서 사용할 수 있는 패싯을 나열합니다. 각 패싯은 작성자와 같은 특정 차원에 따라 응답을 분류합니다. 목록에서 하나를 선택하여 특정 패싯으로 검색을 세분화할 수 있습니다.
패싯을 선택하면 구성 요소가 속성 필터로 `Query`를 호출하여 검색을 패싯과 일치하는 문서로 제한합니다.
## 페이지 매김 구성 요소
페이지 매김 구성 요소를 사용하면 `Query` API의 검색 결과를 여러 페이지에 표시할 수 있습니다. `PageSize` 및 `PageNumber` 파라미터와 함께 `Query` API를 호출하여 특정 결과 페이지를 가져옵니다.