使用 Cloudflare Workers 代理

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

下面创建了一个 API，它将从浏览器发送的 InstantSearch 请求转换为 Elasticsearch 查询，并将响应转换为 InstantSearch 结果。

开始使用 Cloudflare Workers

按照指南此处 (在新标签页中打开)开始使用 Cloudflare Workers。

查看示例项目

您

curl https://codeload.github.com/searchkit/searchkit/tar.gz/main | \
tar -xz --strip=2 searchkit-main/examples/with-cloudflare-workers

或者在 GitHub 上查看示例代码库此处 (在新标签页中打开)

创建一个新项目

npx wrangler init my-searchkit-proxy-api
cd my-searchkit-proxy-api

安装 @searchkit/api 和 searchkit

yarn add @searchkit/api searchkit

更新 Cloudflare Worker

编辑 src/index.js 文件使其如下所示，将 connection 和 search_settings 替换为您自己的。

import Client from "@searchkit/api";
 
const client = Client({
  connection: {
    host: "<ELASTICSEARCH_URL>",
    // 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: ["highlightField1", "highlightField2"],
    search_attributes: ["title", "description"],
    result_attributes: ["title", "description"],
    facet_attributes: [
      "type",
      { attribute: "actors", field: "actors.keyword" },
    ],
  },
});
 
// Handle CORS preflight requests
async function handleOptions(request: Request) {
  return new Response(null, {
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type",
    },
  });
}
 
async function handleRequest(event: FetchEvent) {
  if (event.request.method === "OPTIONS") {
    // Handle CORS preflight requests
    return handleOptions(event.request);
  }
 
  const body = await event.request.json();
  const results = await client.handleRequest(body);
 
  return new Response(JSON.stringify(results), {
    headers: {
      "content-type": "application/json",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, HEAD, POST, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type",
    },
  });
}
 
addEventListener("fetch", (event) => {
  return event.respondWith(handleRequest(event));
});

然后在本地运行您的 Worker。

npx wrangler dev

更新前端的 Searchkit 客户端

然后我们更新 InstantSearch 客户端以使用 API。

不再需要 Searchkit 配置和导入。搜索状态不再在浏览器中生成和执行 Elasticsearch 请求，而是发送到 API，然后 API 在服务器上生成并执行对 Elasticsearch 的请求。

const searchClient = instantsearch({
  indexName: "imdb_movies",
  searchClient: SearchkitInstantsearchClient({
    url: "https://127.0.0.1:8787/",
  }),
});

生产环境

当您准备好部署到生产环境时，运行

npx wrangler publish

然后更新前端中的 URL 以指向新 URL。

就是这样！您无需担心 Elasticsearch 集群的安全性，并且可以独立于搜索集群扩展您的 API。

视频教程

使用 Express.js 使用您自己的 API 服务器