如何使用 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。 描述：一切关于黄油，与健康无关。
  让我们在页面右下角添加 法国食品 类别 👇

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

名称：The Smell of Blue 描述：蓝纹奶酪没有过期，这就是您吃它的方式。 加一点黄油和很多快乐。 类别：法国食品

添加完三家餐厅后，您应该会看到以下页面

我们的 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 已启动并运行。

找到标题为 服务器正在侦听 的行。 这让我们知道 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 插件页面上的 设置 选项卡，以便 Strapi 知道将我们的数据发送到哪里。

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

请注意，我们保留 Meilisearch API Key 为空白，因为我们启动 Meilisearch 时没有设置主密钥。

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

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

正如您在上面的 GIF 中看到的，当您在 Collections 选项卡中单击 restaurant 的复选框时，会出现“Hooked”字样。这意味着每次您在 restaurant 内容类型中添加、更新或删除条目时，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 上点亮一颗星，这对我们意义重大。