如何使用 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）（与 Node.js 一起安装）：软件包管理器，可帮助您访问和使用 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 的新集合应该会出现在 内容管理器 > 集合类型 下。如果我们单击 Restaurant，我们可以看到只有一个。让我们通过单击仪表板右上角的 + 创建新条目 按钮来添加更多！

我们将逐个添加三家餐厅。对于每家餐厅，您需要按 保存，然后按 发布。

• 名称：The Butter Biscotte。描述：全是黄油，没有健康。
  让我们在页面右下角添加 French food 类别 👇

名称：The Slimy Snail 描述：美食由大蒜和黄油制成。类别：French food

名称：The Smell of Blue 描述：蓝纹奶酪没有过期，这就是你吃它的方式。加一点黄油和很多快乐。类别：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 应用程序应该再次在默认地址上运行：http://localhost:1337/admin/。在浏览器中访问它，您应该看到一个管理员登录页面；输入与之前相同的凭据。

连接后，您应该在屏幕左侧看到新的 meilisearch 插件。

要添加您的 Meilisearch 凭据，请单击 meilisearch 插件页面上的 设置 选项卡，以便 Strapi 知道在哪里发送我们的数据。

例如，使用上面启动和启动 Meilisearch 部分中的凭据，在 Meilisearch 主机 字段中添加服务 Meilisearch 的地址，然后单击 保存 按钮。

请注意，我们保留 Meilisearch API 密钥 为空白，因为我们在没有 主密钥 的情况下启动了 Meilisearch。

现在是时候将您的 Strapi 集合添加到 Meilisearch 了。在 meilisearch 插件页面上的 集合 选项卡中，您应该看到 restaurant 和 category 内容类型。

通过单击 restaurant 旁边的复选框，内容类型会自动在 Meilisearch 中建立索引。

正如您在上面的 GIF 中看到的那样，当您单击 集合 选项卡中的餐厅复选框时，会出现“已挂钩”字样。这意味着每次您在餐厅内容类型中添加、更新或删除条目时，Meilisearch 都会自动更新！

索引完成后，您的餐厅就在 Meilisearch 中了。我们现在可以返回我们的 Meilisearch 主机地址：http://localhost:7700。刷新后，您应该观察到页面不再为空。尝试在搜索栏中键入“butter”，看看会发生什么 😉

正如您所见，您的 Strapi 条目按原样发送到 Meilisearch。您可以在将数据发送到 Meilisearch 之前修改数据，例如删除字段。查看 strapi-plugin-meilisearch 页面上的所有自定义选项。

集成 Strapi 和 Meilisearch 之后的后续步骤

现在您已成功将 Strapi 集合添加到 Meilisearch 中，您可以开始充分利用搜索功能。

了解如何[设置 instant-meilisearch](/blog/instant-meilisearch/，在极短的时间内将即时搜索体验集成到您的前端！

如果您对将 Meilisearch 与 Strapi 集成有任何疑问，请在 Discord 上加入我们。如果您喜欢 Meilisearch，在 GitHub 上点亮一颗星 对我们意义重大。