本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 部署 Amazon Kendra
<a name="deploying"></a>

**注意**  
功能支援會因索引類型和正在使用的搜尋 API 而有所不同。若要查看您正在使用的索引類型和搜尋 API 是否支援此功能，請參閱[索引類型](https://docs.aws.amazon.com/kendra/latest/dg/hiw-index-types.html)。

將 Amazon Kendra 搜尋部署到您的網站時，我們會提供原始程式碼，供您搭配 React 使用，讓您的應用程式快速上手。原始碼是根據修改後的 MIT 授權免費提供。您可以照原樣使用它，或根據自己的需求進行變更。提供的 React 應用程式是協助您開始使用的範例。它不是生產就緒的應用程式。

若要部署沒有程式碼的搜尋應用程式，並使用存取控制產生端點 URL 到您的搜尋頁面，請參閱[Amazon Kendra 體驗建置器](https://docs.aws.amazon.com/kendra/latest/dg/deploying-search-experience-no-code.html)。

下列範例程式碼會將 Amazon Kendra 搜尋新增至現有的 React Web 應用程式：
+ [https://kendrasamples.s3.amazonaws.com/kendrasamples-react-app.zip](https://kendrasamples.s3.amazonaws.com/kendrasamples-react-app.zip) - 範例檔案，開發人員可用來在其現有的 React Web 應用程式中建置功能搜尋體驗。

這些範例會在 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)

## 概觀
<a name="example-overview"></a>

您可以將範例程式碼新增至現有的 React Web 應用程式，以啟用搜尋。範例程式碼包含讀我檔案，其中包含設定新 React 開發環境的步驟。程式碼範例中的範例資料可用來示範搜尋。範例程式碼中的搜尋檔案和元件結構如下：
+ 主搜尋頁面 (`Search.tsx`) — 這是包含所有元件的主頁面。這是您將應用程式與 Amazon Kendra API 整合的地方。
+ 搜尋列 - 這是使用者輸入搜尋詞彙並呼叫搜尋函數的元件。
+ 結果 - 這是顯示結果的元件 Amazon Kendra。它有三個元件：建議的答案、常見問答集結果和建議的文件。
+ 面向 — 這是顯示搜尋結果中面向的元件，可讓您選擇面向來縮小搜尋範圍。
+ 分頁 - 這是從 分頁回應的元件 Amazon Kendra。

## 先決條件
<a name="example-prereqs"></a>

開始之前，您必須準備好以下事項：
+ [已安裝](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) Node.js 和 npm。需要 Node.js 19 版或更新版本。
+ Python 3 或 Python 2 [已下載並安裝](https://www.python.org/downloads/)。
+ [適用於 Java 的 SDK](https://docs.aws.amazon.com/sdk-for-java/latest/developer-guide/setup.html) 或 [適用於 JavaScript 的 AWS SDK](https://docs.aws.amazon.com/sdk-for-javascript/latest/developer-guide/welcome.html) 進行 API 呼叫 Amazon Kendra。
+ 現有的 React Web 應用程式。範例程式碼包含讀我檔案，其中包含如何設定新 React 開發環境的步驟，包括使用必要的架構/程式庫。您也可以遵循 [React 文件中有關建立 React Web 應用程式的](https://create-react-app.dev/docs/getting-started)快速入門說明。
+ 在您的開發環境中設定的必要程式庫和相依性。範例程式碼包含讀我檔案，列出所需的程式庫和套件相依性。請注意， `sass` 是必要的，因為 `node-sass` 已棄用。如果您先前已安裝 `node-sass`，請解除安裝此 並安裝 `sass`。

## 設定範例
<a name="example-install"></a>

將 Amazon Kendra 搜尋新增至 React 應用程式的完整程序位於程式碼範例中包含的讀我檔案。

**開始使用 kendrasamples-react-app.zip**

1. 請確定您已完成 [先決條件](#example-prereqs)，包括下載和安裝 Node.js 和 npm。

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 搜尋的範例。

## 主要搜尋頁面
<a name="main-component"></a>

主要搜尋頁面 (`Search.tsx`) 包含所有搜尋元件範例。它包含用於輸出的搜尋列元件、用於顯示[查詢](https://docs.aws.amazon.com/kendra/latest/APIReference/API_Query.html) API 回應的結果元件，以及用於分頁通過回應的分頁元件。

## 搜尋元件
<a name="search-component"></a>

搜尋元件提供文字方塊以輸入查詢文字。`onSearch` 函數是 中呼叫主要函數的勾點`Search.tsx`，用於進行[查詢](https://docs.aws.amazon.com/kendra/latest/APIReference/API_Query.html) API Amazon Kendra 呼叫。

## 結果元件
<a name="results-component"></a>

結果元件會顯示來自 `Query` API 的回應。結果會顯示在三個不同的區域中。
+ 建議的答案 - 這些是 `Query` API 傳回的最佳結果。它最多包含三個建議的答案。在回應中，它們具有結果類型 `ANSWER`。
+ 常見問答集答案 - 這些是回應傳回的常見問答集結果。FAQs會個別新增至索引。在回應中，它們的類型為 `QUESTION_ANSWER`。如需詳細資訊，請參閱[問題和答案](https://docs.aws.amazon.com/kendra/latest/dg/in-creating-faq.html)。
+ 建議文件 - 這些是在回應中 Amazon Kendra 傳回的其他文件。在 `Query` API 的回應中，它們的類型為 `DOCUMENT`。

結果元件針對反白、標題、連結等功能共用一組元件。共用元件必須存在，結果元件才能運作。

## 面向元件
<a name="facets-component"></a>

面向元件會列出搜尋結果中可用的面向。每個面向都會沿著特定維度分類回應，例如作者。您可以從清單中選擇一個面向，將搜尋精簡到特定面向。

選取面向之後，元件會使用`Query`屬性篩選條件呼叫 ，將搜尋限制為符合面向的文件。

## 分頁元件
<a name="pagination-component"></a>

分頁元件可讓您在多個頁面中顯示 `Query` API 的搜尋結果。它使用 `PageSize`和 `PageNumber` 參數呼叫 `Query` API，以取得特定的結果頁面。