如何使用 Meilisearch 为您的 Strapi 应用添加相关搜索

随着网络的不断发展，越来越多的工具可供我们处理复杂任务。当您可以通过几次点击生成一个 CRUD API 时，为什么还要从头开始创建呢？当存在简单高效的解决方案时，为什么还要为困难的搜索操作和查询而烦恼呢？

也许我们被新技术吓倒，或者担心在那些可能不成功的工具上投入时间。又或者，更可能的是，我们甚至没有意识到存在一个简单的解决方案。

Meilisearch 实战

本教程将以最少的步骤向您展示如何使用 Strapi 和 Meilisearch 创建一个基于搜索的 Web 应用程序。首先，让我们熟悉一下我们的工具！

工具介绍

Strapi

Strapi 是一个无头 CMS。它提供了一种快速创建后端的方式，我们可以在其中添加和存储数据。然后，这些数据可以通过 REST API 访问，无需编写任何代码或配置数据库。

Meilisearch

Meilisearch 是一个快速、开源的搜索引擎，易于使用和部署。Meilisearch 的目标是通过极少的步骤，无需配置即可开箱即用地创建相关的搜索体验。

要求

要想跟着本教程操作，您需要以下内容

• 打开一个终端或命令提示符
• Node.js >= 10.16 且 <= 14：这使得在浏览器外部运行 JS 成为可能
  • 您可以使用命令 node --version 检查当前版本
  • 如果您的 Node 版本不在该范围内，我们建议您安装 nvm 并使用它来访问 Node 14
• NPM 和 NPX >= 6.x（随 Node.js 安装）：可帮助您访问和使用 JS 库的包管理器

步骤

1. 创建工作目录
2. 创建 Strapi 后端
3. 启动 Meilisearch
4. 连接 Strapi 和 Meilisearch
5. 总结

为我们的应用创建一个目录

我们不想让我们的应用杂乱无章！让我们创建一个目录，用于放置我们应用程序的每个部分。

mkdir my-app
cd my-app

如果您没有使用基于 UNIX 的操作系统，请按照此指南创建目录。

使用 Strapi 创建后端

在本节中，我们将使用 Strapi 创建并运行一个后端。

我们的第一步是生成一个 Strapi 应用程序。转到您打开的终端窗口并运行以下命令

npx [email protected] back --quickstart

此命令会在一个名为 back 的新目录中创建 Strapi 应用，并打开管理仪表板。创建账户或登录以获取访问权限。

如果您随时丢失此页面，只需在浏览器中访问 http://localhost:1337/admin

创建账户后，您应该会被重定向到 Strapi 的管理仪表板。我们将在其中配置后端 API。

我们的下一步是创建一个新的集合类型——在本例中，它将是餐馆集合。完成Strapi 快速入门指南的第 3 步以继续。

管理仪表板着陆页

完成Strapi 快速入门指南的第 3 步后，一个名为 Restaurants 的新集合应该出现在 Collection Types 下。如果点击它，我们会发现还没有任何餐馆。让我们添加一些！

Restaurants 集合着陆页

点击仪表板右上角的 + Add New Restaurants。现在我们一个接一个地添加三家餐馆

• 名称：The Butter Biscotte。描述： All about butter, nothing about health.
• 名称：The Slimy Snail 描述：Gastronomy is made of garlic and butter.
• 名称：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.

在餐馆集合中创建一个条目。

对于每家餐馆，您都需要按下 save，然后按下 publish。添加完三家餐馆后，您应该会看到以下页面

Restaurants 的主页，展示了我们添加的餐馆

我们的 Strapi 后端现在已启动并运行！Strapi 会自动为我们的 Restaurants 集合创建 REST API。查看 Strapi 的文档，了解所有可用的API 端点。

接下来，是时候引入 Meilisearch 了。

启动 Meilisearch

TL;DR：下载、安装并启动 Meilisearch。

想避免本地安装？使用我们的Meilisearch 云免费 14 天试用版，或我们的DigitalOcean 上的一键安装，并继续到下一节。

如果您已经做到了这一步，您应该已经有一个正在运行 Strapi 的终端窗口。如果没有，或者您不小心关闭了它，请按照此指南，导航到我们创建的目录 .../my-app/back，并运行命令 npm run develop 以重新启动 Strapi。

让我们花一点时间打开第二个终端窗口并进入 my-app 目录。此窗口将用于运行 Meilisearch。

在 my-app 内部，创建一个名为 meilisearch-binary 的新目录。

mkdir meilisearch-binary
cd meilisearch-binary

创建并进入我们将运行 Meilisearch 的目录

执行以下命令在当前目录中下载 Meilisearch。如果 cURL 对您不起作用，请考虑尝试许多其他下载和安装方法来下载和安装 Meilisearch。

# Install Meilisearch
curl -L https://install.meilisearch.com | sh

下载并安装 Meilisearch

现在我们的目录中有了 meilisearch 可执行文件。让我们运行它！

# Launch Meilisearch
./meilisearch

启动 Meilisearch

您应该会看到一大段文本（包括一些 ASCII 艺术），确认 Meilisearch 已启动并正在运行。

正在运行 Meilisearch

找到标题为 Server listening on 的行。这会告诉我们 Meilisearch 的服务地址。找到后，在浏览器中打开此地址。

您会看到一个没什么内容的网页。

带有空索引的 Meilisearch 网页界面

这是 Meilisearch 的网页界面。在我们向 Meilisearch 实例添加数据之前，它将保持为空。

您说数据？碰巧我们的 Strapi 应用中已经有一些数据了！是时候将两者连接起来，并开始使用 Meilisearch 搜索我们的数据了。

连接 Strapi 和 Meilisearch

为了将 Meilisearch 插件添加到 Strapi，我们需要退出 Strapi 应用。转到运行 Strapi 的终端窗口（确保它不是运行 Meilisearch 的那个！）并按下 control + c 来终止进程。

完成后，进入 back 目录并安装插件。

cd back
npm install strapi-plugin-meilisearch

安装完成后，我们需要在开发模式下再次启动 Strapi 应用之前重建它，因为这样可以简化配置。

npm run build
npm run develop

此时，我们的 Strapi 应用应该再次在默认地址运行：http://localhost:1337/admin/。在浏览器中访问它，您应该会看到一个管理员登录页面；输入与之前相同的凭据。

连接后，您应该在屏幕左侧看到一个新的 Plugin：Meilisearch！让我们点击它。

进入 Meilisearch 插件页面，我们可以看到信息分为两部分

• Meilisearch 凭据
• Strapi 集合

Strapi 管理仪表板的 Meilisearch 插件页面

首先，我们需要添加 Meilisearch 实例的凭据，以便 Strapi 知道将数据发送到何处。

您可能还记得上一步中提到，Meilisearch 默认运行在 http://localhost:7700。将此地址添加到 Meilisearch Host 字段中，然后点击 Add 以连接您的 Meilisearch 实例到 Strapi。 

向 Meilisearch 添加凭据。

请注意，我们留空了 Meilisearch Api Key 字段，因为我们启动 Meilisearch 时没有使用主密钥。

太棒了！现在是时候将您的 Strapi 集合添加到 Meilisearch 了。

尝试点击 restaurant 旁边的复选框，观察 Meilisearch 如何立即开始处理您的数据。由于我们只有三个文档，索引时间几乎可以忽略不计。

将餐馆添加到 Meilisearch

现在我们可以回到 Meilisearch 主机地址：http://localhost:7700。刷新后，您会发现页面不再像以前那样空白了。

Meilisearch 演示页面

我们做到了！尝试输入“butter”并查看结果。

前端界面

使用instant-meilisearch，您可以很快地在React、Vue 或 Angular 中实现前端搜索界面。

这里有一个交互式的代码沙盒（使用 React），您可以从中感受不同的组件。您不会弄坏任何东西，所以请随意试用！

总结

我希望这篇文章能愉快地向您介绍新的适用于 Strapi 的 Meilisearch 插件。然而，这只是一个开始！

如果您有任何问题，请加入我们的Discord。如果您喜欢 Meilisearch，在 GitHub 上点个星很重要。欲了解更多信息，请参阅我们的

• 文档
• GitHub
• Strapi 插件
• Discord