Cómo ejecutar una interfaz de usuario de Meilisearch con InstantSearch en Ubuntu 22.04

Introducción

Meilisearch es un motor de búsqueda independiente de código abierto escrito en el lenguaje de programación de alto rendimiento Rust. En comparación con otros motores de búsqueda populares, Meilisearch se centra en mantener la sencillez de implementación: proporciona funciones como coincidencias aproximadas e indexación sin esquemas de forma predeterminada, y se administra mediante un único binario de línea de comandos. Incluye su propia interfaz web para fines de demostración y se puede integrar con la biblioteca InstantSearch para implementaciones web más complejas.

En el tutorial anterior de esta serie, instaló y configuró Meilisearch en un servidor Ubuntu 22.04. También experimentó con la carga de datos y la consulta de Meilisearch mediante su interfaz web no productiva incluida en modo de desarrollo. En este tutorial, configurará Meilisearch para una implementación de producción, utilizando la interfaz InstantSearch, y luego explorará cómo integrarlo dentro de una implementación web más grande.

Prerrequisitos

Para seguir este tutorial, necesitarás:

• Un servidor Ubuntu 22.04 configurado siguiendo la guía de configuración inicial del servidor Ubuntu 22.04, incluido un usuario sudo no root y un firewall.

• Meilisearch se ejecuta en su servidor y está configurado con autenticación basada en clave. Si necesita configurar Meilisearch, siga el tutorial anterior de esta serie: Cómo implementar y configurar Meilisearch en Ubuntu 22.04 con Docker.

• Docker y Docker-compose se instalaron siguiendo Cómo instalar y usar Docker en Ubuntu 22.04 y el primer paso de Cómo instalar y usar Docker-Compose en Ubuntu 22.04. Esto también se trató en el tutorial anterior de esta serie.

• Node.js instalado junto con su npmadministrador de paquetes. Puedes instalar Node.js npmsiguiendo nuestro artículo Cómo instalar Node.js en Ubuntu 22.04.

• También deberás haber registrado un nombre de dominio antes de completar los últimos pasos de este tutorial. Para obtener más información sobre cómo configurar un nombre de dominio con DigitalOcean, consulta nuestra Introducción al DNS de DigitalOcean.

Paso 1: obtención de claves API de Meilisearch y habilitación del modo de producción

En el tutorial anterior de esta serie, configuró Meilisearch para que se ejecute mediante docker-composevariables de entorno. Para terminar de configurar Meilisearch para su uso en producción, debe agregar la MEILI_ENVvariable de entorno a su configuración.

Regrese a su meilisearch-dockerdirectorio usando el cdcomando y luego, usando nanosu editor de texto favorito, abra el meilisearch.envarchivo de configuración:

cd ~/meilisearch-docker
nano meilisearch.env

Agregue una línea al final del archivo que contenga MEILI_ENV="production". Al habilitar esta configuración, se deshabilitará la interfaz de vista previa de búsqueda incorporada y se optimizarán algunos parámetros de registro internos:

~meilisearch-docker/meilisearch.env

MEILI_MASTER_KEY="secret_key"MEILI_ENV="production"

Guarde y cierre el archivo presionando Ctrl+X, luego cuando se le solicite Yy luego ENTER. A continuación, reinicie su contenedor Meilisearch con estos nuevos cambios de configuración:

docker compose down
docker compose up --detach

Verifique que se reinició exitosamente usando docker-compose ps:

docker compose ps

OutputNAME              COMMAND              SERVICE         STATUS          PORTSsammy-meilisearch-1   "tini -- /bin/sh -c …"   meilisearch     running         127.0.0.1:7700-7700/tcp

En el tutorial anterior, probaste Meilisearch con un índice local. Luego, creaste una nueva docker-compose.ymlconfiguración. Para asegurarte de que tu instancia de Meilisearch tenga algunos datos de ejemplo cargados, vuelve a ejecutar los siguientes curl -X POSTcomandos.

Nota: El proyecto Meilisearch proporciona un conjunto de datos de muestra en formato JSON extraído de TMDB, The Movie Database. Si aún no lo tiene, descargue los datos con docs.meilisearch.comel wgetcomando:

wget https://docs.meilisearch.com/movies.json

Esta vez, incluya su secret_keycomo parte del encabezado HTTP.Authorization: Bearer secret_key

El primer comando carga el movies.jsonarchivo en Meilisearch:

curl -X POST 'http://localhost:7700/indexes/movies/documents'   -H 'Content-Type: application/json' -H 'Authorization: Bearer secret_key'  --data-binary @movies.json

El segundo comando actualiza la configuración de Meilisearch para permitir filtrar por género y fecha de lanzamiento, y ordenar por fecha de lanzamiento.

curl -X POST 'http://localhost:7700/indexes/movies/settings'   -H 'Content-Type: application/json' -H 'Authorization: Bearer secret_key'  --data-binary '{ "filterableAttributes": [ "genres", "release_date" ], "sortableAttributes": [ "release_date" ] }'

Por último, antes de continuar con el siguiente paso, obtenga una clave de autenticación de solo lectura con permisos más limitados. Utilizará esta clave para realizar consultas de búsqueda con su interfaz de usuario, por lo que solo necesita permisos de solo lectura. Meilisearch crea automáticamente una clave de solo lectura para usted cuando se ejecuta en producción, que puede recuperar desde el /keyspunto final mediante el siguiente curlcomando:

curl -X GET 'http://localhost:7700/keys' -H 'Authorization: Bearer secret_key'

Output{  "results": [    {      "description": "Default Search API Key (Use it to search from the frontend)",      "key": "SwlztWf7e71932abed4ecafa6cb32ec06446c3117bd49f5415f822f4f126a29c528a7313",      "actions": [        "search"      ],      "indexes": [        "*"      ],      "expiresAt": null,      "createdAt": "2022-03-10T22:02:28Z",      "updatedAt": "2022-03-10T22:02:28Z"    },    {      "description": "Default Admin API Key (Use it for all other operations. Caution! Do not use it on a public frontend)",      "key": "mOTFYUKeea1169e07be6e89de180de4809be5a91be667af364e45a046850bbabeef669a5",      "actions": [        "*"      ],      "indexes": [        "*"      ],      "expiresAt": null,      "createdAt": "2022-03-10T22:02:28Z",      "updatedAt": "2022-03-10T22:02:28Z"    }  ]}

Tome nota del Default Search API Key. Lo usará en lugar del default_search_api_keymarcador de posición para configurar su interfaz en los próximos pasos. También puede crear o eliminar claves API de Meilisearch siguiendo la documentación de autenticación.

Ahora que el índice Meilisearch se está ejecutando en modo de producción, puede configurar el acceso a su servidor Meilisearch mediante Nginx.

Paso 2: Instalación de Nginx y configuración de un proxy inverso a través de HTTPS

Colocar un servidor web como Nginx delante de Meilisearch puede mejorar el rendimiento y hacer que sea mucho más sencillo proteger un sitio a través de HTTPS. Instalarás Nginx y lo configurarás para que envíe solicitudes a Meilisearch a través de un proxy inverso, lo que significa que se encargará de gestionar las solicitudes de tus usuarios a Meilisearch y viceversa.

Si está utilizando un ufwfirewall, debe realizar algunos cambios en la configuración de su firewall en este punto, para habilitar el acceso a los puertos HTTP/HTTPS predeterminados, 80 y 443. ufwtiene una configuración estándar llamada “Nginx Full” que brinda acceso a ambos puertos:

sudo ufw allow "Nginx Full"

Ahora, actualice su lista de paquetes y luego instale Nginx usando apt:

sudo apt install nginx

Nginx le permite agregar configuraciones por sitio a archivos individuales en un subdirectorio llamado sites-available/. Con nanosu editor de texto favorito, cree una nueva configuración de Nginx en /etc/nginx/sites-available/meili:

sudo nano /etc/nginx/sites-available/meili

Pegue lo siguiente en el nuevo archivo de configuración, asegurándose de reemplazarlo your_domaincon su nombre de dominio.

/etc/nginx/sitios-disponibles/meili

server {    listen 80 default_server;    listen [::]:80 default_server;    server_name your_domain;    root /var/www/html;    access_log /var/log/nginx/meilisearch.access.log;    error_log /var/log/nginx/meilisearch.error.log;    location / {        try_files $uri $uri/ index.html;    }    location /indexes/movies/search {        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        proxy_set_header X-Real-IP $remote_addr;        proxy_set_header X-Forwarded-Host $host;        proxy_set_header X-Forwarded-Proto https;        proxy_pass http://127.0.0.1:7700;    }    location /dev {       proxy_set_header Connection "";       proxy_set_header Host $http_host;       proxy_set_header X-Real-IP $remote_addr;       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;       proxy_set_header X-Forwarded-Proto $scheme;       proxy_set_header X-Frame-Options SAMEORIGIN;       proxy_http_version 1.1;       proxy_pass http://127.0.0.1:1234;    }}

Esta es una configuración mínima de proxy inverso. Escucha solicitudes externas en el puerto HTTP predeterminado 80.

• El location /bloque servirá una página de índice del /var/www/htmldirectorio predeterminado de Nginx.

• El bloque reenvía solicitudes al backend de Meilisearch, que se ejecuta en el puerto .location /indexes/movies/search7700

• El location /dev/bloque se utilizará para reenviar solicitudes a la versión de desarrollo de su interfaz InstantSearch más adelante en este tutorial.

Nota: Si alguna vez desea agregar otro índice a este backend de Meilisearch, necesitará agregar otro bloque a esta configuración de Nginx, como location /indexes/books/search {}, que contenga el mismo contenido, para interceptar las URL correctas.

No olvides reemplazartu_dominiocon su nombre de dominio, ya que esto será necesario para agregar soporte HTTPS en el puerto 443. Luego, guarde y cierre el archivo.

A continuación, deberá activar esta nueva configuración. La convención de Nginx es crear enlaces simbólicos (como accesos directos) desde archivos a sites-available/otra carpeta llamada sites-enabled/según decida habilitarlos o deshabilitarlos. Utilice rutas completas para mayor claridad y cree ese enlace:

sudo ln -s /etc/nginx/sites-available/meili /etc/nginx/sites-enabled/meili

De forma predeterminada, Nginx incluye otro archivo de configuración en /etc/nginx/sites-available/default, vinculado a /etc/nginx/sites-enabled/default, que también sirve como página de índice predeterminada. Deberás desactivar esa regla eliminándola de /sites-enabled, ya que entra en conflicto con nuestra nueva configuración de Meilisearch:

sudo rm /etc/nginx/sites-enabled/default

Ahora puedes continuar con la habilitación de HTTPS. Para ello, deberás instalar certbotel proyecto Let's Encrypt. Let's Encrypt prefiere distribuir Certbot a través de un snappaquete, por lo que puedes usar el snap installcomando, disponible de forma predeterminada en Ubuntu 22.04:

sudo snap install --classic certbot

Outputcertbot 1.25.0 from Certbot Project (certbot-eff✓) installed

A continuación, ejecute certbotel --nginxmodo . Con la -dbandera, especifique su nombre de dominio:

sudo certbot --nginx -d your-domain

Se le pedirá que acepte los términos de servicio de Let's Encrypt y que ingrese una dirección de correo electrónico.

Luego, se te preguntará si deseas redirigir todo el tráfico HTTP a HTTPS. Depende de ti, pero en general es una opción recomendada y segura.

Después de eso, Let's Encrypt confirmará tu solicitud y Certbot descargará tu certificado:

Output…Successfully deployed certificate for your-domain to /etc/nginx/sites-enabled/meiliCongratulations! You have successfully enabled HTTPS on https://your-domain- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -If you like Certbot, please consider supporting our work by: * Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate * Donating to EFF:                    https://eff.org/donate-le- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Certbot recargará automáticamente Nginx con la nueva configuración y certificados.

Una vez que hayas abierto un puerto en tu firewall y hayas configurado tu proxy inverso y tus certificados, deberías poder consultar Meilisearch de forma remota a través de HTTPS. Puedes probarlo usando cURL con la misma sintaxis que antes: una URL HTTPS tendrá como puerto predeterminado el 443, que certbotse habrá agregado automáticamente a tu configuración de Nginx:

curl 
  -X POST 'https://your_domain/indexes/movies/search' 
  -H 'Content-Type: application/json' 
  -H 'Authorization: Bearer secret_key' 
  --data-binary '{ "q": "saint" }'

Ahora que su configuración HTTPS está en su lugar, está listo para comenzar a crear una aplicación de búsqueda de interfaz.

Paso 3: Instalación de instant-mellisearch en un nuevo proyecto Node.js

En este paso, creará un nuevo proyecto Node.js utilizando instant-mellisearch, una interfaz de InstantSearch para Meilisearch.

Cree un nuevo directorio para este proyecto usando mkdiry acceda a él usando cd:

mkdir ~/my-instant-meili
cd ~/my-instant-meili

A continuación, utilice npm initpara inicializar un proyecto Node.js:

npm init

Se le solicitará que ingrese algunos metadatos para su nuevo proyecto. Puede ser lo más descriptivo posible aquí, suponiendo que eventualmente pueda publicar este proyecto en un repositorio como Github o en el npmregistro de paquetes. El único valor que definitivamente debería cambiar del valor predeterminado es entry point, a index.html.

OutputThis utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sensible defaults.See `npm help json` for definitive documentation on these fieldsand exactly what they do.Use `npm install pkg` afterwards to install a package andsave it as a dependency in the package.json file.Press ^C at any time to quit.package name: (instant) my-instant-meiliversion: (1.0.0)description:entry point: (index.js) index.htmltest command:git repository:keywords:author:license: (ISC)

Esto creará un package.jsonarchivo en el directorio de su proyecto. Antes de examinar más de cerca ese archivo, puede utilizar npmpara instalar algunas dependencias para este proyecto, que se agregarán package.jsone instalarán en el node_modulessubdirectorio:

npm i @meilisearch/instant-meilisearch @babel/core parcel-bundler

Ahora, usando nanosu editor de texto favorito, abra package.json:

nano package.json

Tu archivo debería verse así, reflejando los cambios que realizaste durante el npm initproceso y las dependencias que acabas de instalar. El único cambio que querrás hacer es en el scriptsbloque. Reemplaza las entradas predeterminadas con el comando startand buildque se muestra a continuación, lo que te permitirá usar parcella herramienta de JavaScript para servir tu nueva aplicación:

paquete.json

{  "name": "my-instant-meili",  "version": "1.0.0",  "description": "",  "main": "index.html",  "scripts": {    "start": "parcel index.html --global instantMeiliSearch --public-url /dev",    "build": "parcel build --global instantMeiliSearch index.html"  },  "dependencies": {    "@babel/core": "7.14.0",    "@meilisearch/instant-meilisearch": "0.6.0",    "parcel-bundler": "1.12.5"  },  "devDependencies": {    "@babel/core": "7.2.0",    "parcel-bundler": "^1.6.1"  },  "keywords": []}

Guarde y cierre el archivo. Si está utilizando nano, presione Ctrl+X, luego cuando se le solicite Yy luego ENTER.

A continuación, proporcionará los primeros componentes HTML, CSS y JavaScript para esta aplicación. Puede pegar los ejemplos que aparecen a continuación en archivos nuevos sin realizar cambios, ya que proporcionan una configuración de referencia utilizable. Tendrá la oportunidad de personalizar su interfaz de búsqueda más adelante.

Primero, abra index.htmly agregue el siguiente HTML:

nano index.html

índice.html

!DOCTYPE htmlhtml  head    meta charset="utf-8" /    meta      name="viewport"      content="width=device-width, initial-scale=1, shrink-to-fit=no"    /    meta name="theme-color" content="#000000" /    link      rel="stylesheet"      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css"    /    link rel="stylesheet" href="./index.css" /    titleMeiliSearch + InstantSearch/title  /head  body    div      h1MeiliSearch + InstantSearch.js/h1      h2Search Movies!/h2      div        div/div        div/div        div/div      /div    /div    script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"/script    script src="./app.js"/script  /body/html

El index.htmlarchivo carga activos tanto remotos como locales. Como puede ver arriba, también deberá crear index.cssy app.js. Guarde y cierre ese archivo, luego cree index.css:

nano index.css

Añade el siguiente contenido al archivo:

índice.css

body,h1 {  margin: 0;  padding: 0;}body {  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";  padding: 1em;}.ais-ClearRefinements {  margin: 1em 0;}.ais-SearchBox {  margin: 1em 0;}.ais-Pagination {  margin-top: 1em;}.left-panel {  float: left;  width: 200px;}.right-panel {  margin-left: 210px;}.ais-InstantSearch {  max-width: 960px;  overflow: hidden;  margin: 0 auto;}.ais-Hits-item {  margin-bottom: 1em;  width: calc(50% - 1rem);}.ais-Hits-item img {  margin-right: 1em;  width: 100%;  height: 100%;  margin-bottom: 0.5em;}.hit-name {  margin-bottom: 0.5em;}.hit-description {  font-size: 90%;  margin-bottom: 0.5em;  color: grey;}.hit-info {  font-size: 90%;}

Puede cambiar los parámetros CSS como desee o mantener los valores predeterminados. Guarde y cierre ese archivo y, finalmente, cree app.js:

nano app.js

aplicación.js

import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";const search = instantsearch({  indexName: 'movies',  searchClient: instantMeiliSearch(    "https://your domain",    "default_search_api_key"  ),})search.addWidgets([  instantsearch.widgets.searchBox({    container: "#searchbox"  }),  instantsearch.widgets.configure({    hitsPerPage: 6,    snippetEllipsisText: "...",    attributesToSnippet: ["description:50"]  }),  instantsearch.widgets.hits({    container: "#hits",    templates: {      item: `        div          div            {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}          /div          img src="{{poster}}" /          div            {{#helpers.snippet}}{ "attribute": "overview" }{{/helpers.snippet}}          /div          divGenre: {{genres}}/div        /div      `    }  }),  instantsearch.widgets.pagination({    container: "#pagination"  })]);search.start();

Este archivo contiene los detalles de conexión para su índice Meilisearch. Asegúrese de que indexName, la dirección IP y la clave de autenticación coincidan con los valores que probó con curl. Luego, guarde y cierre el archivo.

Nota : El templatesbloque que se encuentra cerca de la parte inferior de este archivo controla cómo se muestran los resultados de búsqueda. Tome nota de esto si alguna vez agrega un campo adicional a su conjunto de datos o si necesita revisar cómo mostrar otros datos además de este conjunto de películas.

Ahora puedes probar tu nueva interfaz de Meilisearch con el npm startcomando que configuraste package.jsonanteriormente:

npm start

npm startes una convención común para ejecutar aplicaciones Node.js. En este caso, npm startse ha configurado para ejecutar parcel:

Output instant-demo@1.0.0 start /root/instant parcel index.html --global instantMeiliSearchServer running at http://localhost:1234✨  Built in 2.16s.

Ahora deberías tener un parcelservidor temporal que sirva a tu interfaz en . Navega hasta esa URL en un navegador y deberías poder acceder a tu interfaz de Meilisearch. Experimenta ejecutando algunas consultas:https://your_domain/dev

El parcelservidor bloqueará tu shell mientras se esté ejecutando. Puedes presionar Ctrl+Cpara detener el proceso. Ahora tienes una interfaz de Meilisearch en funcionamiento que se puede implementar en producción. Antes de finalizar la implementación, en el siguiente paso agregarás algunas funciones opcionales más a tu interfaz de Meilisearch.

Paso 4: Personalización de la interfaz de Meilisearch

En este paso, agregará una interfaz de facetas a su interfaz de Meilisearch y revisará algunos widgets opcionales.

Para agregar widgets adicionales a una interfaz InstantSearch se requieren dos pasos: agregar divcontenedores a su página HTML y vincular esos contenedores a las características declaradas en el search.addWidgets()bloque de app.js. Como ya habilitó la segmentación por género en su índice de Meilisearch, puede agregar una interfaz de segmentación por género mediante los widgets refinementListy clearRefinementsInstantSearch.

Primero, abra index.htmly agregue el div/bloque en el medio del archivo como se muestra:

nano index.html

índice.html

…      h2Search Movies!/h2      div        div/div        h2Genres/h2        div/div      /div      div…

Guarde y cierre el archivo, luego ábralo app.jsy agregue el contenido correspondiente.

nano app.js

Tenga en cuenta que los container:bloques coinciden con los div/bloques en el HTML.

aplicación.js

import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";…    container: "#searchbox"  }),  instantsearch.widgets.clearRefinements({    container: "#clear-refinements"  }),  instantsearch.widgets.refinementList({    container: "#genres-list",    attribute: "genres"  }),  instantsearch.widgets.configure({    hitsPerPage: 6,…

Después de realizar esos cambios, reinicie su parcelservidor npm startpara verlos reflejados en el navegador:

npm start

Muchos otros widgets InstantSearch también son compatibles con Meilisearch, y puedes encontrar sus detalles de implementación en la documentación del proyecto.

En el paso final, volverás a implementar tu interfaz en una URL permanente.

Paso 5: Implementación de la aplicación instant-mellisearch en producción

Cuando editaste package.jsonlo anterior, proporcionaste un buildcomando además del startcomando. Puedes usar npm run-script buildahora (solo startobtiene la sintaxis abreviada npm start) para empaquetar tu aplicación para producción:

npm run-script build

Output instant-demo@1.0.0 build /root/instant parcel build --global instantMeiliSearch index.html✨  Built in 7.87s.dist/app.426c3941.js.map         211.84 KB     43msdist/app.426c3941.js              48.24 KB    5.28sdist/instant.0f565085.css.map      1.32 KB      4msdist/index.html                      872 B    2.41sdist/instant.0f565085.css            689 B    1.41s

Esto generará un conjunto de archivos que puede servir desde un directorio web estático sin necesidad de utilizar parcelun servidor temporal. Recuerde que Nginx sigue sirviendo su página de inicio predeterminada en los puertos HTTP/HTTPS predeterminados. Puede copiar el contenido del distdirectorio que acaba de generar en el directorio desde el que Nginx sirve su página de inicio predeterminada /var/www/html. Nginx servirá automáticamente el index.htmlarchivo desde su interfaz de Meilisearch:

sudo cp dist/* /var/www/html/.

Ahora deberías poder navegar en un navegador para acceder a tu interfaz de usuario de Meilisearch. Debido a que está compilada en una aplicación web estática que solo necesita conectarse a una instancia en ejecución, puedes implementar la interfaz de usuario en cualquier lugar que desees, incluso en otro servidor o en otro proveedor de alojamiento estático. Mientras tanto, puedes considerar ofrecerla con esta configuración de Nginx o escalar esta implementación de cualquier otra manera.https://your_domaininstant-meilisearchmeilisearch

Conclusión

En este tutorial, creó e implementó una interfaz de usuario de Meilisearch para su servidor Meilisearch existente. Trabajó con servidores proxy inversos y herramientas Node.js, y revisó algunos detalles adicionales sobre la autenticación de Meilisearch. Ahora puede personalizar aún más su interfaz de usuario y backend de Meilisearch para crear otras interfaces para consultar diferentes tipos de datos.

A continuación, es posible que desees experimentar con el web scraping para identificar otras fuentes de datos que puedan cargarse en Meilisearch.