Cloudflare Workers AIを試す
下記の記事を見て興味を持ちました
この記事を見て「面白そうだな」と思ったのでWorkers AIをHonoで動かしてReactのアプリで呼んでみます。デプロイまでやってみました。興味あったけど触れてなかったHonoを使う良い機会になりました。
作ったもの
フォームに英語を打ち込んて送信するとWorkers AIが返してくれます。英語だと何かしらの文章を返してくれます。Workers AIについてまだ疎いので凝った実装はできていないです
リポジトリ
フロント
サーバー
つまづきポイント
CORS
Coudflare WorkersのCORSはまだわからないことだらけです。
最初はCloudflare WorkersでデプロイしたものをReactで呼び出そうとしました。しかしCORSエラーが解消できず困りました。一方Honoを使うとこの辺りすぐ解決できたので良かったです
環境変数でCORS許可するURLを設定する方法もHonoのIssueに残ってたので非常に助かりました
環境変数
Honoをデプロイした後
環境変数で許可したURLに注意してください。/で終わってるとCORSエラーになりました
http://localhost:3000/ ❌
http://localhost:3000 ⭕️
Honoを触ってみて感じたこと
1. 書いてて楽しい
すごく主観ですね笑
ルーティングが簡単でとても嬉しいです。また「Cloudflare Workersだったらどうするんだろう？」というのがHonoを使えば簡単にできたりします。まだまだ触ったばかりなのでこれからもっと使っていきたいと思いました。ゆくゆくは何か貢献できたら幸いです
2. CORSの設定が簡単
最初はCloud Workersを使って実装を試みてましたが、CORSで躓きました。
HonoはCORS設定が簡単なので開発体験が非常に良かったです。
3. 情報が意外とたくさん見つかる
公式ドキュメントをまず読むと良いです。基本的なことはできることがわかります。
また、yusukebeさんがZennでたくさん記事を書いてくれてます。
公式見ても解決できなかったらGitHubのIssuesやPull requestsを見ると良いです。過去に他の方が質問されてて解決方法が載ってたりします。自分はIssuesを見て解決できたことがありました。
最後に
Workers AIを触ってみました。ベータ版なのでこれからどうなっていくのか楽しみです。
また、Workers AIに興味を持ったことをきっかけにHonoを知ることができました。Hono、非常に面白いのでこれをきっかけに色々なことにHonoで挑戦していきたいですね
参考になった記事一覧
Discussion