NuxtHubでベクトル検索を実装するときのメモ
NuxtHub を使用した Web アプリで、NuxtHub AI と NuxtHub Vectorize を使用してベクトル検索を実装しようとした。
地味に詰まったところがあるのでメモ。基本的にはドキュメントに書いてある内容ではある。
Cloudflare API Token への Permissions 付与
NuxtHub のプロジェクトをデプロイすると NuxtHub 用の Cloudflare API Token が発行されるが、デフォルトでは Workers AI と Vectorize は Permissions に含まれていないっぽい。
もしくは、最初のデプロイ時に有効にしていなければそのままとか？
User API Tokens のページから両方とも Edit で付与する。
↓ の画像のようになれば OK。
開発用リソースの作成
Workers AI と Vectorize は、ローカルでの開発時も Cloudflare 上のリソースを使用することになる。
nuxt.config.ts で ai と vectorize を ON にした状態でデプロイを実行すると自動でリソースが作成される。ローカルで開発サーバーを起動しても作成されないので、設定を ON にしたらとりあえず Preview 環境にデプロイしておく。
This option will enable Workers AI (LLM powered by serverless GPUs on Cloudflare’s global network) and automatically add the binding to your project when you deploy it.
This means to begin using Vectorize, you need to deploy your project to create the indexes before accessing them through remote storage.
ローカル環境からの開発用リソースの利用
上記で作成したリソースをローカル環境から利用するには、remote storage を利用するモードで開発サーバーを起動する必要がある。
Vectorize only works in local development when using remote storage with the npx nuxt dev --remote command.
remote storage は、現在のブランチをみて production につなぐか preview につなぐかを自動で判断してくれる。
Based on your current git branch, NuxtHub will either use your production or preview environment.
ただし、誤って production につなぐのを防ぐため、専用のスクリプトを用意するなどで preview 環境を参照するように強制するのがよいと思う。
"scripts": {
"dev": "nuxt dev",
"dev:remote": "nuxt dev --remote=preview",
},
終わり
ここまでできれば、あとはドキュメントの Example を見て実装すればとりあえず動くものができあがる。簡単にできてよいね。
Discussion