使用 Next.js 函数进行代理

出于生产用途，我们不建议直接从浏览器调用 Elasticsearch。幸运的是，Searchkit 提供了一种通过节点 API 代理搜索请求的方法。这非常易于设置。

下面创建了一个 Next.js 服务器函数，该函数将从浏览器发送的 instantsearch 请求转换为 Elasticsearch 查询，并将响应转换为 instantsearch 结果。

使用 Next.js 入门

首先，在您的 Next.js 项目中，安装依赖项

npm install @searchkit/api

创建 API 文件

接下来，创建一个名为 pages/api/search.ts 的文件，内容如下

pages/api/search.ts

import Client from "@searchkit/api";
import { NextApiRequest, NextApiResponse } from "next";
 
const client = Client({
  connection: {
    host: "https://127.0.0.1:9200",
    // if you are authenticating with api key
    // https://searchkit.elastic.ac.cn/docs/guides/setup-elasticsearch#connecting-with-api-key
    // apiKey: '###'
    // if you are authenticating with username/password
    // https://searchkit.elastic.ac.cn/docs/guides/setup-elasticsearch#connecting-with-usernamepassword
    // auth: {
    //   username: "elastic",
    //   password: "changeme"
    // },
  },
  search_settings: {
    highlight_attributes: ["name"],
    snippet_attributes: ["description"],
    search_attributes: [{ field: "name", weight: 3 }, "description", "categories"],
    result_attributes: ["name", "description", "price", "categories"],
    facet_attributes: [{
      field: "categories.keyword",
      type: "string",
      attribute: "categories",
    }, {
      field: "price",
      type: "numeric",
      attribute: "price",
    }],
  }
});
 
// example API handler for Next.js
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const results = await client.handleRequest(req.body);
  res.send(results);
}

然后在前端，更新 instantsearch 客户端以使用 API URL。

从前端删除 searchkit 导入和配置，因为它不再需要了。Elasticsearch 现在正从后端调用。

pages/index.tsx

const searchClient = instantsearch({
  // the API endpoint you created above
  url: "/api/search",
});

Code Sandbox 示例

为什么要代理 Elasticsearch？使用 Express.js