如何在 Strapi v4 中使用 Meilisearch 集成相关搜索

本教程将向您展示如何将 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 的新集合应该出现在 Content Manager > Collection Types 下。如果我们点击 Restaurant，我们可以看到只有一个。让我们通过点击仪表板右上角的 + Create new entry 按钮来添加更多！

我们将一个接一个地添加三家餐厅。对于每家餐厅，您需要按 Save，然后按 Publish。

• 名称：黄油薄饼。 描述：关于黄油的一切，与健康无关。
  让我们在页面右下角添加 法国菜 类别 👇

名称：黏糊糊的蜗牛 描述：美食由大蒜和黄油制成。 类别：法国菜

名称：蓝色的气味 描述：蓝纹奶酪没有过期，这是你吃它的方式。加一点黄油和很多快乐。 类别：法国菜

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

我们的 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://:1337/admin/。在浏览器中访问它，您应该会看到一个管理员登录页面；输入与之前相同的凭据。

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

要添加您的 Meilisearch 凭据，请在 meilisearch 插件页面上单击 Settings 选项卡，以便 Strapi 知道将我们的数据发送到何处。

例如，使用上面“启动并启动 Meilisearch”部分中的凭据，在 Meilisearch Host 字段中添加 Meilisearch 服务的地址，然后单击 Save 按钮。

请注意，我们留空 Meilisearch API Key，因为我们启动 Meilisearch 时没有 master key。

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

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

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

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

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

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

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

了解如何 [设置 instant-meilisearch](/blog/instant-meilisearch/)，以便立即将即时搜索体验集成到您的前端！

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