Algolia の検索を Cloudflare Workers で動かす方法

Cloudflare Workers上でAlgoliaの検索を実装する際に発生する「XMLHttpRequest is not defined」エラーの解決法。fetch requesterを活用した具体的な実装方法を解説します。

Algolia は高速な全文検索サービスとして人気を集めています。しかし、Cloudflare Workers で公式 SDK をそのまま使おうとすると「XMLHttpRequest is not defined」などのエラーに遭遇することがあります。本記事では、その原因と具体的な解決方法について解説いたします。

なぜエラーが発生するのか

Cloudflare Workers は Node.js でもブラウザでもない独自の JavaScript ランタイムで動作しています。そのため、XMLHttpRequest や window、http/https モジュールなど一部の API が利用できません。

Algolia の公式 JavaScript SDK（algoliasearch）は、デフォルトでリクエスト送信に XMLHttpRequest や http/https を使用するため、Cloudflare Workers 上では正常に動作しないという問題が生じます。

解決策として fetch requester を活用する

Algolia の SDK には「requester」という仕組みが用意されており、HTTP リクエストの方法を差し替えることができます。Cloudflare Workers ではグローバルな fetch が使えるため、@algolia/requester-fetch パッケージを利用して fetch ベースのリクエストに切り替えましょう。

npm install algoliasearch @algolia/requester-fetch

あとはalgoliasearchを初期化する際に requesterを設定してやるだけです。

import { algoliasearch } from "algoliasearch";
import { createFetchRequester } from "@algolia/requester-fetch";

const client = algoliasearch(
  "あなたの ALGOLIA_APP_ID",
  "あなたの ALGOLIA_API_KEY",
  {
    requester: createFetchRequester()
  }
);

const index = client.initIndex("your_index_name");
const res = await index.search("検索キーワード");
console.log(res);

Cloudflare Workers のハンドラー内でも同様に使用できます。

export default {
  async fetch(request, env, ctx) {
    const client = algoliasearch(
      env.ALGOLIA_APP_ID,
      env.ALGOLIA_API_KEY,
      { requester: createFetchRequester() }
    );
    
    const index = client.initIndex("your_index_name");
    const result = await index.search("keyword");
    
    return new Response(JSON.stringify(result), { 
      headers: { "Content-Type": "application/json" } 
    });
  }
}