Amazon Kendra 배포

웹 사이트에 Amazon Kendra 검색을 배포할 시기가 되면 React와 함께 사용하여 애플리케이션을 빠르게 시작할 수 있는 소스 코드를 제공합니다. 수정된 MIT 라이선스에 따라 소스 코드가 무료로 제공됩니다. 그대로 사용하거나 필요에 따라 변경할 수 있습니다. 제공된 React 앱은 시작하는 데 도움이 되는 예입니다. 프로덕션 지원 앱이 아닙니다.

코드 없이 검색 애플리케이션을 배포하고 액세스 제어가 가능한 검색 페이지의 엔드포인트 URL을 생성하려면 Amazon Kendra Experience Builder를 참조하세요.

다음 예제 코드는 기존 React 웹 애플리케이션에 Amazon Kendra 검색을 추가합니다.

• https://kendrasamples.s3.amazonaws.com/kendrasamples-react-app.zip - 개발자가 기존 React 웹 애플리케이션에 기능적인 검색 환경을 구축하는 데 사용할 수 있는 샘플 파일입니다.

이 예제는 Amazon Kendra 콘솔의 검색 페이지를 모델로 삼았습니다. 검색 및 검색 결과 표시 기능은 동일합니다. 전체 예제를 사용할 수도 있고, 기능 중 하나만 선택하여 사용할 수도 있습니다.

Amazon Kendra 콘솔에서 검색 페이지의 세 가지 구성 요소를 보려면 오른쪽 메뉴에서 코드 아이콘(</>)을 선택합니다. 각 섹션 위에 포인터를 놓으면 구성 요소에 대한 간략한 설명과 구성 요소 소스의 URL을 확인할 수 있습니다.

주제

• 개요
• 필수 조건
• 예제 설정
• 기본 검색 페이지
• 검색 구성 요소
• 결과 구성 요소
• 패싯 구성 요소
• 페이지 매김 구성 요소
• 코드 없이 검색 환경 구축

개요

기존 React 웹 애플리케이션에 예제 코드를 추가하여 검색을 활성화합니다. 예제 코드에는 새로운 React 개발 환경을 설정하는 단계가 포함된 Readme 파일이 포함되어 있습니다. 코드 예제의 예제 데이터를 사용하여 검색을 시연할 수 있습니다. 예제 코드의 검색 파일 및 구성 요소는 다음과 같이 구성되어 있습니다.

• 기본 검색 페이지(Search.tsx) - 모든 구성 요소가 포함된 기본 페이지입니다. 여기에서 애플리케이션을 Amazon Kendra API와 통합할 수 있습니다.

• 검색 창 - 사용자가 검색어를 입력하고 검색 함수를 호출하는 구성 요소입니다.

• 결과 - Amazon Kendra의 결과를 표시하는 구성 요소입니다. 제안된 답변, FAQ 결과, 권장 문서라는 세 가지 구성 요소로 구성됩니다.

• 패싯 - 검색 결과에 패싯을 표시하는 구성 요소로, 패싯을 선택하여 검색 범위를 좁힐 수 있습니다.

• 페이지 매김 - Amazon Kendra의 응답에 페이지를 매기는 구성 요소입니다.

필수 조건

시작하려면 다음이 필요합니다.

• Node.js 및 npm이 설치되었습니다. Node.js 버전 19 이상이 필요합니다.

• Python 3 또는 Python 2가 다운로드 및 설치되었습니다.

• Amazon Kendra에 대한 API 호출이 가능한 SDK for Java 또는 AWS SDK for JavaScript.

• 기존 React 웹 애플리케이션. 예제 코드에는 필수 프레임워크/라이브러리 사용을 포함하여 새로운 React 개발 환경을 설정하는 방법에 대한 단계가 포함된 Readme 파일이 포함되어 있습니다. React 웹 앱 생성에 대한 React 설명서의 빠른 시작 지침을 따를 수도 있습니다.

• 개발 환경에 구성된 필수 라이브러리 및 종속성. 예제 코드에는 필수 라이브러리와 패키지 종속성을 나열하는 Readme 파일이 포함되어 있습니다. 더 이상 node-sass가 사용되지 않으므로 sass가 필수 항목입니다. 이전에 node-sass를 설치한 경우, 제거하고 sass를 설치합니다.

예제 설정

React 애플리케이션에 Amazon Kendra 검색을 추가하는 전체 절차는 코드 예제에 포함된 Readme 파일에 있습니다.

kendrasamples-react-app.zip 사용을 시작하려면

1. Node.js 및 npm 다운로드 및 설치를 포함한 필수 조건 작업을 완료했는지 확인하세요.

2. kendrasamples-react-app.zip 다운로드 후 압축을 해제합니다.

3. 터미널을 열고 aws-kendra-example-react-app/src/services/로 이동합니다. local-dev-credentials.json 열고 보안 인증을 제공합니다. 이 파일을 퍼블릭 리포지토리에 추가하면 안 됩니다.

4. aws-kendra-example-react-app으로 이동하여 package.json의 종속성을 설치합니다. npm install를 실행합니다.

5. 로컬 서버에서 앱의 데모 버전을 실행합니다. npm start를 실행합니다. 키보드로 Cmd/Ctrl + C를 입력하여 로컬 서버를 중지할 수 있습니다.

6. package.json으로 이동하여 포트 또는 호스트(예: IP 주소)를 변경하고 호스트 및 포트를 업데이트할 수 있습니다. "start": "HOST=[host] PORT=[port] react-scripts start". Windows를 사용하는 경우: "start": "set HOST=[host] && set PORT=[port] && react-scripts start".

7. 등록된 웹사이트 도메인이 있는 경우 앱 이름 뒤의 package.json에 이를 지정할 수 있습니다. 예: "homepage": "https://mywebsite.com". npm install을 다시 실행하여 새 종속성을 업데이트한 다음 npm start를 실행해야 합니다.

8. 앱을 빌드하려면 npm build를 수행합니다. 빌드 디렉터리의 콘텐츠를 호스팅 제공업체에 업로드합니다.

   주의

   React 앱은 아직 프로덕션 준비가 되지 않았습니다. Amazon Kendra 검색용 앱을 배포하는 예시입니다.

기본 검색 페이지

기본 검색 페이지(Search.tsx)에는 모든 예제 검색 구성 요소가 들어 있습니다. 여기에는 출력용 검색 창 구성 요소, Query API의 응답을 표시하는 결과 구성 요소, 응답을 통한 페이징을 위한 페이지 매김 구성 요소가 포함됩니다.

검색 구성 요소

검색 구성 요소는 쿼리 텍스트를 입력할 수 있는 텍스트 상자를 제공합니다. onSearch 함수는 Search.tsx에서 기본 함수를 호출하여 Amazon Kendra Query API 호출을 수행하는 후크입니다.

결과 구성 요소

결과 구성요소는 Query API의 응답을 보여줍니다. 결과는 세 개의 개별 영역에 표시됩니다.

• 제안된 답변 - Query API에서 가장 많이 반환된 결과입니다. 제안된 답변은 최대 3개까지 포함됩니다. 응답에는 ANSWER 결과 유형이 있습니다.

• FAQ 답변 - 응답에서 반환하는 자주 묻는 질문 결과입니다. FAQ는 인덱스에 별도로 추가됩니다. 응답에는 QUESTION_ANSWER 유형이 있습니다. 자세한 내용은 질문 및 답변을 참조하세요.

• 권장 문서 - Amazon Kendra가 응답으로 반환하는 추가 문서입니다. Query API의 응답에는 DOCUMENT 유형이 있습니다.

결과 구성 요소는 강조 표시, 제목, 링크 등의 기능에 대한 구성 요소 세트를 공유합니다. 결과 구성 요소가 작동하려면 공유 구성 요소가 있어야 합니다.

패싯 구성 요소

패싯 구성 요소는 검색 결과에서 사용할 수 있는 패싯을 나열합니다. 각 패싯은 작성자와 같은 특정 차원에 따라 응답을 분류합니다. 목록에서 하나를 선택하여 특정 패싯으로 검색을 세분화할 수 있습니다.

패싯을 선택하면 구성 요소가 속성 필터로 Query를 호출하여 검색을 패싯과 일치하는 문서로 제한합니다.

페이지 매김 구성 요소

페이지 매김 구성 요소를 사용하면 Query API의 검색 결과를 여러 페이지에 표시할 수 있습니다. PageSize 및 PageNumber 파라미터와 함께 Query API를 호출하여 특정 결과 페이지를 가져옵니다.