如何使用 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 的地方。

我们的下一步是创建一个新的集合类型。集合就像您内容的一个蓝图——在本例中，它将是一个餐厅集合。我们稍后将创建另一个名为“Category”（类别）的集合来组织我们的餐厅。

要继续操作，请完成 Strapi 快速入门指南中“B 部分：构建您的内容”的前 4 个步骤。这些步骤包括

• 创建集合类型
• 创建新条目
• 设置角色和权限
• 发布内容

完成 Strapi 快速入门指南的第 4 步后，在 Content Manager（内容管理器）> Collection Types（集合类型）下应该会出现两个新集合，名为 Restaurant（餐厅）和 Category（类别）。如果我们点击 Restaurant，我们会看到只有一个。让我们通过点击仪表板右上角的 + Create new entry（+ 创建新条目）按钮来添加更多！

我们将逐个添加三家餐厅。对于每家餐厅，您需要点击 Save（保存），然后点击 Publish（发布）。

• 名称：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 插件页面上的 Settings（设置）选项卡，以便 Strapi 知道将我们的数据发送到何处。

例如，使用上方启动和开始 Meilisearch 部分中的凭据，在 Meilisearch Host（Meilisearch 主机）字段中添加提供 Meilisearch 服务的地址，然后点击 Save（保存）按钮。

请注意，我们没有填写 Meilisearch API Key（Meilisearch API 密钥），因为我们在没有主密钥的情况下启动了 Meilisearch。

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

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

如您在上面的 GIF 中所见，当您点击 Collections（集合）选项卡中餐厅的复选框时，会出现“Hooked”一词。这意味着每当您在餐厅内容类型中添加、更新或删除条目时，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 上给我们一颗星将意义重大。