Category: Cloudflare

Cloudflare

Cloudflare WorkersでのVitestテスト実装：Selfバインディングエラーの解決法

この記事では、Cloudflare WorkersでVitestを使用してテストを行う際に発生する「`SELF`バインディングエラー」の解決方法を解説しています。`poolOptions.workers.main`の設定を追加することで、ワーカーのエントリーポイントを正しく認識し、リアルなインテグレーションテストが可能になります。

Okamoto Hidetaka

CloudflareHono / Sonik

Cloudflare Pages + React + Hono: 手軽に始めるサーバーレスフルスタック開発

Cloudflare Pages、React、Hono を組み合わせたサーバーレスフルスタック開発の手法。単一リポジトリで管理でき、git push一発でデプロイ。Cloudflareのエッジネットワークを活用した高速応答と、Vite、TypeScriptによる快適な開発体験。

Okamoto Hidetaka

CloudflareSaaS / FaaSStripe

Cloudflare workersでstripeを使う時はverifyHeaderAsyncを使おう

Cloudflareなどのエッジ環境でStripeのWebhookを実装する際、同期処理でエラーが発生する可能性があります。その対策として、非同期版の`verifyHeaderAsync`メソッドを使うことで、エッジ環境でも安全にWebhookの署名検証ができます。

Okamoto Hidetaka

CloudflareTypeScript

Cloudflare Workflowsのワークフローを自分で実装する方法

Cloudflareの新機能であるWorkflowsは複数のステップに分かれたタスクを実行できる機能であり、Cloudflare Workersを利用しています。Workflowを作成する際は、Class形式でワークフローを実装し、Bindingした後にwranglerでデプロイする必要があります。ベータ版の機能ではありますが、複数のステップの実行やリトライをさせたいワークフローを作成する際に便利であり、単一のフローとしては使いやすい機能と言えます。

Okamoto Hidetaka

CloudflareNext.jsSaaS / FaaS

next-on-pagesでのビルドでerror _not_foundが出たら読む記事

Next.jsのページをCloudflareにデプロイする際にビルドエラーが発生しました。”not-found”エラーの対処法として、”app/not-found.tsx”に”export const runtime = ‘edge’;”を追加する必要があります。これによってCloudflare上で正しく動作することが確認できます。ビルドエラーの原因はデフォルトのNot Foundページが”export const runtime = ‘edge’;”を持っていないことにあるようです。

Okamoto Hidetaka

CloudflareNext.jsSaaS / FaaS

next-on-pagesでApp RouterのREST APIがエラーになった時に見る記事

Cloudflare PagesでNext.jsアプリをデプロイする際のエラーと対応方法についての覚書です。REST APIを追加するとWranglerでのプレビューがエラーになる場合、compatibility_dateを更新することで解決できます。最新の日付に更新後、再度ビルドとプレビューを行うと問題が解消されます。

Okamoto Hidetaka

CloudflareNext.jsSaaS / FaaS

Next.jsをCloudflareで使う時に `await is not defined`が出たら見る記事

RevTech / Serverless Devの岡本さんがCloudflare Pagesでアプリをデプロイする際にハマった点を共有しました。Next.jsのバージョン15.1.0でawaitが使えないエラーが発生し、next.config.tsをmjsに変更することで対応しました。変更後に再起動すると問題が解決し、Next.js 15.1.0でアプリが正常に動作したようです。

Okamoto Hidetaka

CloudflareHono / SonikJavaScriptSaaS / FaaS

Honoxで動的な値をmiddlewareで設定する場合はcontext.set/getを使う

Honoxでページを作成する際、サイト全体で利用したい動的な値を設定する方法について解説されています。middlewareとcontextを使用して解決策を示し、例としてAPIのアドレスを動的に設定するコードが示されています。環境変数を使用する方法と比較しつつ、ステージングやプレビューデプロイでも利用できる利点が紹介されています。さらに、取得した値にTypeScriptの型情報を追加する方法も提案されています。

Okamoto Hidetaka

AI / MLCloudflareLLMSaaS / FaaS

OpenHandsのLLMにCloudflare AI Gatewayを使おうとしてダメだった話

OpenHandsを利用したAIコーディングに挑戦中。CloudflareのAI Gatewayは使えない可能性が高い。API構造が異なるため、エラー発生。CloudflareのAPI key取得やAI Gateway作成を試みるも失敗。OpenHandsの準備も進めるも、API認証エラーで実行失敗。401 UnauthorizedエラーでCloudflare AI Gatewayのサポート必要。OSSな解決策を模索。今後同様の課題に直面する方への参考に。

Okamoto Hidetaka

CloudflareSaaS / FaaS

Cloudflare PagesでAWS Amplify SDK v6をつかおうとした時の覚書

この記事では、AWS Amplify SDKをCloudflare Pagesで利用する際の注意点やエラーについて紹介しています。エラーの原因や解決策、サーバーサイドでのSDK読み込み方法なども述べられています。2024年11月時点では、CloudflareはIDP as a Serviceを提供しておらず、AWS Amplifyや他のプロバイダーを利用するか、独自のIDPを構築する必要があります。しかし、実装にはトリッキーな側面や不具合の可能性があることに注意が必要です。

Okamoto Hidetaka
Home
Search
Bookmark