如何使用 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 create-strapi-app@3.5.4 back --quickstart

此命令在名为 back 的新目录中创建一个 Strapi 应用，并打开管理仪表板。创建一个帐户或登录，以便您可以访问。

如果您在任何时候丢失此页面，只需在浏览器中转到 http://localhost:1337/admin

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

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

管理仪表板着陆页

完成 Strapi 快速入门指南的第 3 步 后，一个名为 Restaurants 的新集合应该已出现在 集合类型 下。如果我们点击它，我们可以看到仍然没有餐厅。让我们添加一些！

Restaurants 集合着陆页

单击仪表板右上角的 + 添加新餐厅。现在让我们逐个添加三家餐厅

• 名称：The Butter Biscotte。描述： 全是黄油，与健康无关。
• 名称：The Slimy Snail 描述：美食由大蒜和黄油制成。
• 名称：The Smell of Blue 描述：蓝纹奶酪没有过期，这才是您吃它的方式。加一点黄油和很多快乐。

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

对于每家餐厅，您都需要按 保存，然后按 发布。添加完这三家餐厅后，您应该最终得到以下页面

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 Web 界面，带有空索引

这是 Meilisearch Web 界面。在我们将一些数据添加到我们的 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/ 。在浏览器中访问它，您应该看到一个管理员登录页面；输入与之前相同的凭据。

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

到达 Meilisearch 插件页面后，我们可以看到信息分为两个部分

• Meilisearch 凭据
• Strapi 集合

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

首先，我们需要添加我们的 Meilisearch 实例的凭据，以便 Strapi 知道在哪里发送我们的数据。

您可能还记得上一步，Meilisearch 默认在 http://localhost:7700 上运行。将其添加到 Meilisearch 主机 字段中，然后单击 添加 以将您的 Meilisearch 实例连接到 Strapi。 

添加凭据到 Meilisearch。

请注意，我们将 Meilisearch API 密钥 留空，因为我们在没有 主密钥 的情况下启动了 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