翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
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 コンソールの検索ページに基づいてモデル化されています。これらには、検索結果を検索および表示するための同じ機能があります。例全体を使用することも、独自の使用のために機能を 1 つだけ選択することもできます。
Amazon Kendra コンソールで検索ページの 3 つのコンポーネントを表示するには、コードアイコン (</>) を右メニューから選択します。各セクションにポインタを置くと、コンポーネントの簡単な説明が表示され、コンポーネントのソースの URL が表示されます。
概要
既存の React アプリケーションにサンプルコードを追加して、検索を有効にします。サンプルコードには、新しい React 開発環境を設定する手順が記載された Readme ファイルが含まれています。サンプルコード内のサンプルデータは、検索のデモンストレーションに使用できます。サンプル内の検索ファイルとコンポーネントは、次のように構成されています。
-
メイン検索ページ (
Search.tsx) - これは、すべてのコンポーネントを含むメインページです。ここでは、アプリケーションを Amazon Kendra API と統合します。 -
検索バー - これはユーザーが検索語を入力し、検索機能を呼び出すコンポーネントです。
-
結果 - これは Amazon Kendra の結果を表示するコンポーネントです。提案された回答、よくある質問の結果、推奨ドキュメントの 3 つのコンポーネントがあります。
-
ファセット - これは検索結果にファセットを表示するコンポーネントで、ファセットを選択して検索を狭めることができます。
-
ページ割り - これは 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 ファイルが含まれています。
sassは必須であり、node-sassは廃止済みであることに注意してください。以前にnode-sassをインストールしていた場合は、これをアンインストールしてからsassをインストールしてください。
例をセットアップする
Amazon Kendra 検索を React アプリケーションに追加するための完全な手順は、コードサンプルに含まれている Readme にあります。
kendrasamples-react-app.zip の使用開始方法
-
Node.js と npm のダウンロードとインストールを含め、前提条件 が完了していることを確認してください。
-
kendrasamples-react-app.zip をダウンロードして解凍します。
-
ターミナルを開いて、
aws-kendra-example-react-app/src/services/に進みます。local-dev-credentials.jsonを開いて認証情報を提供します。このファイルをパブリックリポジトリに追加しないでください。 -
aws-kendra-example-react-appに進み、依存関係をpackage.jsonにインストールしてください。npm installを実行します。 -
ローカルサーバーでアプリのデモ版を起動します。
npm startを実行します。キーボードでCmd/Ctrl + Cを入力すると、ローカルサーバーを停止できます。 -
ポートまたはホスト (IP アドレスなど) を変更するには、
package.jsonに移動してホストとポートを"start": "HOST=[host] PORT=[port] react-scripts start"に更新します。Windows を使用している場合:"start": "set HOST=[host] && set PORT=[port] && react-scripts start"。 -
ウェブサイトのドメインを登録済みの場合は、アプリ名の後の
package.jsonでこれを指定できます。例えば、"homepage": "https://mywebsite.com"。新しい依存関係を更新するためにはnpm installをもう一度実行してから、npm startを実行する必要があります。 -
アプリを構築するには、
npm buildを実行します。ビルドディレクトリの内容をホスティングプロバイダーにアップロードします。警告
React アプリは本番環境に対応していません。これは Amazon Kendra 検索のためにアプリをデプロイする例です。
メイン検索ページ
メイン検索ページ (Search.tsx) には、すべてのサンプル検索コンポーネントが含まれています。これには、出力用の検索バーコンポーネント、Query API からのレスポンスを表示する結果コンポーネント、およびレスポンスをページングするためのページ割りコンポーネントが含まれています。
検索コンポーネント
検索コンポーネントには、クエリテキストを入力するためのテキストボックスがあります。onSearch 機能は、メイン機能を Search.tsx で呼び出すフックで、Amazon Kendra Query API コールを行います。
結果コンポーネント
結果コンポーネントには、Query API からのレスポンスが表示されます。結果は 3 つの別個のエリアに表示されます。
-
提案された回答 - これらは、
QueryAPI により返された上位結果です。提案された回答は最大 3 つまで含まれます。レスポンスには、結果タイプANSWERがあります。 -
よくある質問の回答 - これらはレスポンスが返すよくある質問の結果です。よくある質問はインデックスに別々に追加されます。レスポンスには、タイプ
QUESTION_ANSWERがあります。詳細については、質問と回答を参照してください。 -
推奨ドキュメント - Amazon Kendra がレスポンスで返す追加ドキュメントです。
QueryAPI からのレスポンスには、DOCUMENTタイプがあります。
結果コンポーネントは、強調表示、タイトル、リンクなどの機能のコンポーネントを共有します。結果コンポーネントが機能するには、共有コンポーネントが存在する必要があります。
ファセットコンポーネント
ファセットコンポーネントには、検索結果で使用可能なファセットが一覧表示されます。各ファセットは、製作者などの特定のディメンションに沿ってレスポンスを分類します。リストからファセットを選択して、検索を特定のファセットに絞り込むことができます。
ファセットを選択すると、コンポーネントによって、ファセットに一致するドキュメントの検索を制限する属性フィルターを使用して Query が呼び出されます。
ページ割りコンポーネント
ページ割りコンポーネントを使用すると、複数のページでの Query API からの検索結果の表示が可能になります。Query API を PageSize および PageNumber パラメータで呼び出し、結果の特定のページを取得します。
