如何使用 Meilisearch 將相關搜尋整合至 Strapi v4

本教學將示範如何將 Meilisearch 與 Strapi v4 整合，以建立以搜尋為基礎的 Web 應用程式。我們將使用 Strapi 的快速入門指南來建立餐廳集合，然後使用 Meilisearch 搜尋我們的集合資料。

介紹我們的工具

什麼是 Strapi？

Strapi 是一個無頭 CMS。它提供了一種快速建立後端的方法，我們可以在其中新增和儲存資料。然後，這些資料可透過 REST 或 GraphQL API 使用，而無需編寫任何程式碼或設定我們的資料庫。

什麼是 Meilisearch？

Meilisearch 是一個快速、開源的搜尋引擎，易於使用和部署。Meilisearch 的目標是以非常少的步驟建立開箱即用的相關搜尋體驗，無需任何設定。

整合 Meilisearch 和 Strapi 的先決條件

為了能夠依照本教學進行 Strapi 和 Meilisearch 整合，您需要以下項目

• 一個開啟的終端機或命令提示字元
• Node.js >= 14 <= 18
• NPM 和 NPX（僅限 v6）：協助您存取和使用 JS 函式庫的套件管理器

為我們的應用程式建立目錄

讓我們建立一個名為 my-app 的目錄，我們將在其中新增應用程式的後端和前端部分。

mkdir my-app
cd my-app

使用 Strapi 建立後端

我們的第一步是使用 Strapi 產生後端 API。前往您開啟的終端機視窗並執行下列命令

npx create-strapi-app@latest back --quickstart

此命令會在名為 back 的新目錄中建立 Strapi 應用程式，並開啟管理儀表板。建立帳戶或登入，以便您能存取它。

建立帳戶後，您應該會被重新導向至 Strapi 的管理儀表板。這是我們將設定後端 API 的地方。

我們的下一步是建立新的集合類型。集合就像您的內容的藍圖，在本例中，它將是餐廳的集合。我們稍後將建立另一個名為「類別」的集合來組織我們的餐廳。

若要繼續進行，請完成Strapi 快速入門指南中「B 部分：建置您的內容」的前 4 個步驟。這些將包括

• 建立集合類型
• 建立新項目
• 設定角色和權限
• 發佈內容

完成 Strapi 快速入門指南的步驟 4 後，兩個名為 Restaurant 和 Category 的新集合應該已出現在 Content Manager > Collection Types 下方。如果我們按一下 Restaurant，我們可以看到只有一個。讓我們按一下儀表板右上角的 + Create new entry 按鈕來新增更多！

我們將逐一新增三間餐廳。對於每間餐廳，您都需要按 Save，然後按 Publish。

• 名稱：The Butter Biscotte. 描述：All about butter, nothing about health.
  讓我們在頁面右下角新增 French food 類別 👇

名稱：The Slimy Snail 描述：Gastronomy is made of garlic and butter. 類別：French food

名稱：The Smell of Blue 描述：Blue Cheese is not expired, it is how you eat it. With a bit of butter and a lot of happiness. 類別：French food

新增三間餐廳後，您應該會看到以下頁面

我們的 Strapi 後端現在已啟動並執行！Strapi 會自動為我們的 Restaurants 集合建立 REST API。請查看 Strapi 的文件，了解所有可用的API 端點。

現在，是時候將 Meilisearch 引入其中了。

安裝並啟動 Meilisearch

若要將 Meilisearch 整合至我們基於 Strapi 的 Web 應用程式，您首先需要安裝 Meilisearch。有多種下載和執行 Meilisearch 執行個體的方法，我們將在此處使用Docker。

如果您想要避免本機安裝，請試用 Meilisearch Cloud，這是一個託管且完全管理的 Meilisearch 版本，提供 免費 14 天試用，無需信用卡。

開啟第二個終端機視窗並移至 my-app 目錄。此視窗將用於執行 Meilisearch。執行下列命令以下載並使用 Docker 安裝 Meilisearch。如果 Docker 對您不起作用，請考慮嘗試其他許多其他方法之一。

# Fetch the latest version of Meilisearch image from DockerHub
docker pull getmeili/meilisearch:latest

# Launch Meilisearch
docker run -it --rm 
    -p 7700:7700 
    -e MEILI_ENV='development' 
    -v $(pwd)/meili_data:/meili_data 
    getmeili/meilisearch:latest

您應該會看到一大段文字（包括一些 ASCII 圖案），確認 Meilisearch 已啟動並執行。

找到標題為 Server listening on 的行。這讓我們知道 Meilisearch 的服務位置。找到後，請在您的瀏覽器中開啟此位址。

這是 Meilisearch 的搜尋預覽。在我們將一些資料新增至 Meilisearch 執行個體之前，它將保持空白。

是時候連線 Strapi 和 Meilisearch，並開始搜尋我們的資料了。

連線 Strapi 和 Meilisearch

為了將 Meilisearch 外掛程式新增至 Strapi，我們需要結束我們的 Strapi 應用程式。前往執行 Strapi 的終端機視窗（確定它不是執行 Meilisearch 的視窗！），並按下 Ctrl+C 以終止程序。

完成後，在 back 目錄中安裝外掛程式。

cd back
npm install strapi-plugin-meilisearch

安裝後，我們必須重建 Strapi 應用程式，然後以開發模式再次啟動它，因為這樣可以讓設定更容易。

npm run build
npm run develop

此時，我們的 Strapi 應用程式應該會在預設位址再次執行：https://127.0.0.1:1337/admin/。在您的瀏覽器中瀏覽它，您應該會看到管理員登入頁面；輸入與之前相同的憑證。

連線後，您應該會在螢幕左側看到新的 meilisearch 外掛程式。

若要新增您的 Meilisearch 憑證，請按一下 meilisearch 外掛程式頁面上的 Settings 索引標籤，以便 Strapi 知道將資料傳送到哪裡。

例如，使用上方 啟動並開始 Meilisearch 區段的憑證，在 Meilisearch Host 欄位中新增提供 Meilisearch 的位址，然後按一下 Save 按鈕。

請注意，我們將 Meilisearch API 金鑰 留空，因為我們在啟動 Meilisearch 時沒有主金鑰。

現在是時候將您的 Strapi 集合新增至 Meilisearch 了。在 meilisearch 外掛程式頁面上的 Collections 索引標籤中，您應該會看到 restaurant 和 category 內容類型。

按一下 restaurant 旁邊的核取方塊，內容類型會自動在 Meilisearch 中建立索引。

如您在上方 GIF 動圖中所見，當您在Collections（集合）標籤中點擊餐廳的核取方塊時，會出現「Hooked」（已連結）字樣。這表示每次您在餐廳內容類型中新增、更新或刪除條目時，Meilisearch 都會自動更新！

一旦索引建立完成，您的餐廳就會在 Meilisearch 中。現在我們可以回到 Meilisearch 主機位址：https://127.0.0.1:7700。重新整理後，您應該會看到頁面不再是空白的。試著在搜尋列中輸入「butter」（奶油），看看會發生什麼事 😉

如您所見，您的 Strapi 條目會直接發送到 Meilisearch。您可以在發送到 Meilisearch 之前修改資料，例如刪除某個欄位。請查看 strapi-plugin-meilisearch 頁面上的所有自訂選項。

整合 Strapi 和 Meilisearch 後的後續步驟

現在您已成功將 Strapi 集合新增到 Meilisearch，您可以開始充分利用其搜尋功能。

了解如何[設定 instant-meilisearch](/blog/instant-meilisearch/ )，在短時間內將邊打字邊搜尋的體驗整合到您的前端！

如果您對將 Meilisearch 與 Strapi 整合有任何疑問，請在 Discord 上加入我們。如果您喜歡 Meilisearch，請在 GitHub 上給我們一個星星，這對我們意義重大。