Ubuntu22.04でInstantSearchを使用してMeilisearchフロントエンドを実行する方法

投稿日: 2022-10-24 2022-10-24
タグ: ubuntu

序章

Meilisearch は、高性能のRustプログラミング言語で記述されたオープンソースのスタンドアロン検索エンジンです。他の一般的な検索エンジンと比較して、メイリサーチは展開を簡単に保つことに重点を置いています。ファジーマッチングやスキーマレスインデックス作成などの機能をすぐに利用でき、単一のコマンドラインバイナリで管理されます。デモ用の独自のWebフロントエンドが含まれており、InstantSearchライブラリと統合してより複雑なWeb展開を行うことができます。

このシリーズの前のチュートリアルでは、Ubuntu22.04サーバーにMeilisearchをインストールして構成しました。また、含まれている非本番Webフロントエンドを開発モードで使用して、データの読み込みとメイリサーチのクエリを試しました。このチュートリアルでは、InstantSearchフロントエンドを使用して、本番デプロイメント用にMeilisearchを設定し、それをより大規模なWebデプロイメントに埋め込む方法を探ります。

前提条件

このチュートリアルに従うには、次のものが必要です。

Ubuntu 22.04初期サーバーセットアップガイドに従ってセットアップされたUbuntu22.04サーバー（sudo非rootユーザーとファイアウォールを含む）。
キーベースの認証で構成された、サーバー上で実行されているMeilisearch。 Meilisearchを設定する必要がある場合は、このシリーズの前のチュートリアルDockerを使用してUbuntu22.04にMeilisearchをデプロイおよび構成する方法に従ってください。
DockerとDocker-composeは、 Ubuntu22.04にDockerをインストールして使用する方法とUbuntu22.04にDocker-Composeをインストールして使用する方法の最初のステップに従ってインストールされます。これは、このシリーズの前のチュートリアルでも説明されています。
Node.jsと一緒にインストールされます npm パッケージマネージャー。 Node.jsをインストールして npm Ubuntu22.04にNode.jsをインストールする方法に従ってください。
また、このチュートリアルの最後の手順を完了する前に、ドメイン名を登録しておくことをお勧めします。 DigitalOceanを使用したドメイン名の設定の詳細については、DigitalOceanDNSの概要を参照してください。

ステップ1—MeilisearchAPIキーを取得して本番モードを有効にする

このシリーズの前のチュートリアルでは、Meilisearchをで実行するように設定しました docker-compose 環境変数を使用します。本番環境でのMeilisearchの設定を完了するには、 MEILI_ENV 構成に対する環境変数。

あなたに戻る meilisearch-docker を使用するディレクトリ cd コマンドを使用してから、 nano またはお気に入りのテキストエディタで、 meilisearch.env 構成ファイル：

cd ~/meilisearch-docker
nano meilisearch.env

ファイルの最後に次の行を追加します MEILI_ENV="production". この設定を有効にすると、組み込みの検索プレビューインターフェイスが無効になり、一部の内部ロギングパラメータが最適化されます。

〜meilisearch-docker / meilisearch.env

MEILI_MASTER_KEY="secret_key"
MEILI_ENV="production"

を押してファイルを保存して閉じます Ctrl+X、プロンプトが表示されたら、 Y その後 ENTER. 次に、次の新しい設定変更を使用して、メイリサーチコンテナを再起動します。

docker compose down
docker compose up --detach

を使用して、正常に再起動したことを確認します docker-compose ps:

docker compose ps

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

前のチュートリアルでは、ローカルインデックスを使用してメイリサーチをテストしました。次に、新しいを作成しました docker-compose.yml 構成。 Meilisearchインスタンスにサンプルデータがロードされていることを確認するには、次のコマンドを再実行します curl -X POST コマンド。

注： Meilisearchプロジェクトは、TMDB、TheMovieDatabaseから取得したサンプルのJSON形式のデータセットを提供します。まだお持ちでない場合は、からデータをダウンロードしてください docs.meilisearch.com を使用して wget 指図：

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

今回は、 secret_key の一部として Authorization: Bearer secret_key HTTPヘッダー。

最初のコマンドは movies.json Meilisearchにファイルする：

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

2番目のコマンドは、Meilisearch設定を更新して、ジャンルとリリース日でフィルタリングし、リリース日で並べ替えることができるようにします。

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" ] }'

最後に、次の手順に進む前に、より制限された権限を持つ読み取り専用の認証キーを取得します。このキーを使用してフロントエンドインターフェイスで検索クエリを実行するため、必要なのは読み取り専用のアクセス許可のみです。 Meilisearchは、本番環境で実行するときに、読み取り専用キーを1つ自動的に作成します。これは、 /keys 以下を使用するエンドポイント curl 指図：

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"
    }
  ]
}

をメモします Default Search API Key. の代わりに使用します default_search_api_key 次の手順でフロントエンドを構成するためのプレースホルダー。認証ドキュメントに従って、MeilisearchAPIキーを作成または削除することもできます。

Meilisearchインデックスが本番モードで実行されているので、Nginxを使用してMeilisearchサーバーへのアクセスを設定できます。

ステップ2— Nginxをインストールし、HTTPS経由でリバースプロキシを構成する

NginxなどのWebサーバーをMeilisearchの前に配置すると、パフォーマンスが向上し、HTTPSを介してサイトを保護するのがはるかに簡単になります。 Nginxをインストールし、Meilisearchへのリバースプロキシリクエストを構成します。つまり、ユーザーからMeilisearchへのリクエストの処理を処理します。

を使用している場合 ufw ファイアウォールの場合、デフォルトのHTTP / HTTPSポートである80および443にアクセスできるように、この時点でファイアウォール構成にいくつかの変更を加える必要があります。 ufw これらのポートの両方へのアクセスを提供する「NginxFull」と呼ばれるストック構成があります。

sudo ufw allow "Nginx Full"

次に、パッケージリストを更新してから、を使用してNginxをインストールします apt:

sudo apt install nginx

Nginxを使用すると、サイトごとの構成をサブディレクトリ内の個々のファイルに追加できます。 sites-available/. 使用する nano またはお気に入りのテキストエディタで、新しいNginx構成を作成します。 /etc/nginx/sites-available/meili:

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

以下を新しい構成ファイルに貼り付けます。必ず置き換えてください。 your_domain あなたのドメイン名で。

/ etc / nginx / sites-available / 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;
    }
}

これは最小限のリバースプロキシ構成です。デフォルトのHTTPポートで外部リクエストをリッスンします。 80.

The location / ブロックはNginxのデフォルトからインデックスページを提供します /var/www/html ディレクトリ。
The location /indexes/movies/search ブロックは、ポートで実行されているMeilisearchバックエンドにリクエストを転送します 7700.
The location /dev/ ブロックは、このチュートリアルの後半で、InstantSearchフロントエンドの開発バージョンにリクエストを転送するために使用されます。

注：このMeilisearchバックエンドに別のインデックスを追加したい場合は、このNginx構成に次のような別のブロックを追加する必要があります。 location /indexes/books/search {}、正しいURLを傍受するために、同じ内容が含まれています。

your_domain をドメイン名に置き換えることを忘れないでください。これは、ポート443でHTTPSサポートを追加するために必要になるためです。次に、ファイルを保存して閉じます。

次に、この新しい構成をアクティブ化する必要があります。 Nginxの規則は、次のファイルからシンボリックリンク（ショートカットなど）を作成することです。 sites-available/ と呼ばれる別のフォルダに sites-enabled/ それらを有効または無効にすることを決定したとき。明確にするためにフルパスを使用して、そのリンクを作成します。

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

デフォルトでは、Nginxには別の構成ファイルが含まれています。 /etc/nginx/sites-available/default、にリンク /etc/nginx/sites-enabled/default、デフォルトのインデックスページも提供します。からルールを削除して、そのルールを無効にする必要があります /sites-enabled、新しいメイリサーチ構成と競合するため：

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

これで、HTTPSの有効化に進むことができます。これを行うには、インストールします certbot Let’sEncryptプロジェクトから。 Let’s Encryptは、Certbotを snap パッケージなので、 snap install コマンド、Ubuntu22.04でデフォルトで使用可能：

sudo snap install --classic certbot

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

次に、実行します certbot の --nginx モード。を使用して -d フラグ、ドメイン名を指定します：

sudo certbot --nginx -d your-domain

Let’s Encryptの利用規約に同意し、メールアドレスを入力するよう求められます。

その後、すべてのHTTPトラフィックをHTTPSにリダイレクトするかどうかを尋ねられます。それはあなた次第ですが、これは一般的に推奨され、安全に行うことができます。

その後、Let’s Encryptがリクエストを確認し、Certbotが証明書をダウンロードします。

Output…
Successfully deployed certificate for your-domain to /etc/nginx/sites-enabled/meili
Congratulations! 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は、新しい構成と証明書を使用してNginxを自動的にリロードします。

ファイアウォールでポートを開き、リバースプロキシと証明書を設定すると、HTTPSを介してリモートでメイリサーチにクエリを実行できるようになります。以前と同じ構文でcURLを使用してテストできます—HTTPSURLはデフォルトでポート443になります。 certbot Nginx構成に自動的に追加されます：

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

HTTPS構成が整ったので、フロントエンド検索アプリの作成を開始する準備が整いました。

ステップ3—新しいNode.jsプロジェクトにインスタントメリサーチをインストールする

このステップでは、Meilisearchのインスタントサーチフロントエンドであるinstance-mellisearchを使用して新しいNode.jsプロジェクトを作成します。

を使用して、このプロジェクトの新しいディレクトリを作成します mkdir を使用してそれに変更します cd:

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

次に、 npm init Node.jsプロジェクトを初期化するには：

npm init

新しいプロジェクトのメタデータを入力するように求められます。最終的にこのプロジェクトをGithubなどのリポジトリまたは npm パッケージレジストリ。デフォルトから確実に変更する必要がある1つの値は、 entry point、に 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 fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (instant) my-instant-meili
version: (1.0.0)
description:
entry point: (index.js) index.html
test command:
git repository:
keywords:
author:
license: (ISC)

これにより、 package.json プロジェクトディレクトリ内のファイル。そのファイルを詳しく調べる前に、次を使用できます。 npm このプロジェクトのいくつかの依存関係をインストールします。これはに追加されます package.json にインストールします node_modules サブディレクトリ：

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

今、使用して nano またはお気に入りのテキストエディタを開きます package.json:

nano package.json

ファイルは次のようになります。これは、 npm init プロセスとインストールしたばかりの依存関係。あなたがしたいと思う1つの変更は scripts ブロック。デフォルトのエントリを start と build 以下のコマンド。これにより、javascriptのを使用できるようになります。 parcel 新しいアプリを提供するためのツール：

package.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": []
}

ファイルを保存して閉じます。使用している場合 nano、押す Ctrl+X、プロンプトが表示されたら、 Y その後 ENTER.

次に、このアプリの最初のHTML、CSS、およびjavascriptコンポーネントを提供します。以下の例は、使用可能なベースライン構成を提供するため、変更を加えることなく新しいファイルに貼り付けることができます。後で検索インターフェースをカスタマイズする機会があります。

まず、開く index.html 次に、次のHTMLを追加します。

nano index.html

index.html

<!DOCTYPE html>
<html lang="en">
  <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" />

    <title>MeiliSearch + InstantSearch</title>
  </head>
  <body>
    <div class="ais-InstantSearch">
      <h1>MeiliSearch + InstantSearch.js</h1>
      <h2>Search Movies!</h2>

      <div class="right-panel">
        <div id="searchbox" class="ais-SearchBox"></div>
        <div id="hits"></div>
        <div id="pagination"></div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
    <script src="./app.js"></script>
  </body>
</html>

The index.html ファイルはリモートアセットとローカルアセットの両方をロードします–上記のように、作成する必要もあります index.css と app.js. そのファイルを保存して閉じてから、作成します index.css:

nano index.css

次の内容をファイルに追加します。

index.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%;
}

CSSパラメータは必要に応じて変更することも、デフォルトのままにすることもできます。そのファイルを保存して閉じ、最後に作成します app.js:

nano app.js

app.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 class="hit-name">
            {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}
          </div>
          <img src="{{poster}}" align="left" />
          <div class="hit-description">
            {{#helpers.snippet}}{ "attribute": "overview" }{{/helpers.snippet}}
          </div>
          <div class="hit-info">Genre: {{genres}}</div>
        </div>
      `
    }
  }),
  instantsearch.widgets.pagination({
    container: "#pagination"
  })
]);

search.start();

このファイルには、メイリサーチインデックスの接続の詳細が含まれています。を確認してください indexName、IPアドレス、および認証キーはすべて、テストした値と一致します curl. 次に、ファイルを保存して閉じます。

注： templates このファイルの下部にあるブロックは、検索結果の表示方法を処理します。データセットにフィールドを追加する場合、またはこの映画のセット以外のデータを表示する方法を確認する必要がある場合は、これをメモしてください。

これで、新しいMeilisearchフロントエンドをテストできます。 npm start で設定したコマンド package.json ついさっき：

npm start

npm start Node.jsアプリを実行するための一般的な規則です。この場合、 npm start 実行するように構成されています parcel:

Output
> [email protected] start /root/instant
> parcel index.html --global instantMeiliSearch

Server running at http://localhost:1234
✨  Built in 2.16s.

これで一時的なものが必要です parcel サーバー、フロントエンドにサービスを提供 https://your_domain/dev. ブラウザでそのURLに移動すると、メイリサーチインターフェイスにアクセスできるようになります。いくつかのクエリを実行して実験します。

The parcel サーバーは実行中にシェルをブロックします–を押すことができます Ctrl+C プロセスを停止します。これで、本番環境にデプロイできるMeilisearchフロントエンドが機能します。展開を完了する前に、次のステップで、メイリサーチインターフェイスにさらにいくつかのオプション機能を追加します。

ステップ4—メイリサーチインターフェイスのカスタマイズ

このステップでは、ファセットインターフェイスをメイリサーチフロントエンドに追加し、いくつかのオプションのウィジェットを確認します。

InstantSearchインターフェースにウィジェットを追加するには、次の2つのステップがあります。 <div> コンテナをHTMLページに結び付け、それらのコンテナをで宣言された機能に結び付けます search.addWidgets() のブロック app.js. Meilisearchインデックスでジャンル別のファセットをすでに有効にしているため、を使用してファセットインターフェイスを追加できます。 refinementList と clearRefinements InstantSearchウィジェット。

まず、開く index.html を追加します <div class="left-panel"/> 図のように、ファイルの中央にブロックします。

nano index.html

index.html

…
      <h2>Search Movies!</h2>

      <div class="left-panel">
        <div id="clear-refinements"></div>

        <h2>Genres</h2>
        <div id="genres-list"></div>
      </div>

      <div class="right-panel">
…

ファイルを保存して閉じてから、開きます app.js 対応するコンテンツを追加します。

nano app.js

に注意してください container: ブロックは <div/> HTMLのブロック。

app.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,
…

これらの変更を行った後、 parcel サーバーと npm start それらがブラウザに反映されていることを確認するには：

npm start

他の多くのInstantSearchウィジェットもMeilisearchと互換性があり、それらの実装の詳細はプロジェクトドキュメントにあります。

最後のステップでは、フロントエンドを永続的なURLに再デプロイします。

ステップ5—インスタントメリサーチアプリを本番環境にデプロイする

編集したとき package.json 上記で、あなたは build に加えてコマンド start 指図。使用できます npm run-script build 今だけ start 短縮されます npm start 構文）、本番用にアプリをパッケージ化するには：

npm run-script build

Output
> [email protected] build /root/instant
> parcel build --global instantMeiliSearch index.html

✨  Built in 7.87s.

dist/app.426c3941.js.map         211.84 KB     43ms
dist/app.426c3941.js              48.24 KB    5.28s
dist/instant.0f565085.css.map      1.32 KB      4ms
dist/index.html                      872 B    2.41s
dist/instant.0f565085.css            689 B    1.41s

これにより、静的なWebディレクトリから使用せずに提供できる一連のファイルが生成されます。 parcel 一時サーバーを実行します。 Nginxは引き続きデフォルトのHTTP/HTTPSポートでデフォルトのホームページを提供していることを思い出してください。の内容をコピーすることができます dist Nginxがデフォルトのホームページを提供するディレクトリに生成したばかりのディレクトリ、 /var/www/html. Nginxは自動的にサービスを提供します index.html Meilisearchフロントエンドからのファイル：

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

これで、に移動できるようになります https://your_domain ブラウザでMeilisearchフロントエンドにアクセスします。なぜなら instant-meilisearch 実行中のWebアプリに接続するだけでよい静的Webアプリにコンパイルされます meilisearch たとえば、別のサーバーや別の静的ホスティングプロバイダーなど、好きな場所にフロントエンドをデプロイできます。それまでの間、このNginx構成でサービスを提供することを検討するか、他の方法でこのデプロイメントを拡張することができます。

結論

このチュートリアルでは、既存のMeilisearchサーバー用にMeilisearchフロントエンドを作成してデプロイしました。リバースプロキシとNode.jsツールを使用し、メイリサーチ認証に関する追加の詳細を確認しました。 Meilisearchバックエンドとフロントエンドをさらにカスタマイズして、さまざまなタイプのデータをクエリするための他のインターフェイスを作成できるようになりました。

次に、Meilisearchにロードできる他のデータソースを特定するために、ウェブスクレイピングを試してみることをお勧めします。

getdocs

13036