cloudflare-full-stack-integration
✓ReactフロントエンドをCloudflare Workerバックエンドに接続するための本番環境でテストされた統合パターン Hono、Clerk 認証、D1 データベースを使用します。一般的なフロントエンドとバックエンドの接続の問題を防ぎます。 CORS エラー、認証トークンの失敗、競合状態。 次の場合に使用します: フロントエンドとバックエンドの接続、認証フローの実装、API 呼び出しの設定、 CORS のトラブルシューティング、競合状態の修正、認証トークンが渡されない、フロントエンドとバックエンドの接続エラー、 401 エラー、Clerk と Workers の統合、フルスタック Cloudflare アプリのセットアップ、vite Cloudflare プラグインのセットアップ。 防止: CORS エラー、401 Unauthorized、認証トークンの不一致、認証読み込み時の競合状態、 環境変数の混乱、フロントエンドが間違ったエンドポイントを呼び出す、JWT 検証エラー、D1 接続の問題。 キーワード: フロントエンド バックエンド統合、Cloudflare Workers、Hono、Clerk 認証、JWT 検証、CORS、React API クライアント、 競合状態、認証読み込み、接続の問題、フルスタック統合、vite プラグイン、@cloudflare/vite-plugin、 D1 データベース、環境変数、トークンの添付、セッション管理、保護されたルート、API ミドルウェア
SKILL.md
Production-tested patterns for React + Cloudflare Workers + Hono + Clerk authentication.
Key Insight: The Worker and frontend run on the SAME port during development.
Why: The Vite plugin runs your Worker using workerd directly in the dev server. No proxy needed!
ReactフロントエンドをCloudflare Workerバックエンドに接続するための本番環境でテストされた統合パターン Hono、Clerk 認証、D1 データベースを使用します。一般的なフロントエンドとバックエンドの接続の問題を防ぎます。 CORS エラー、認証トークンの失敗、競合状態。 次の場合に使用します: フロントエンドとバックエンドの接続、認証フローの実装、API 呼び出しの設定、 CORS のトラブルシューティング、競合状態の修正、認証トークンが渡されない、フロントエンドとバックエンドの接続エラー、 401 エラー、Clerk と Workers の統合、フルスタック Cloudflare アプリのセットアップ、vite Cloudflare プラグインのセットアップ。 防止: CORS エラー、401 Unauthorized、認証トークンの不一致、認証読み込み時の競合状態、 環境変数の混乱、フロントエンドが間違ったエンドポイントを呼び出す、JWT 検証エラー、D1 接続の問題。 キーワード: フロントエンド バックエンド統合、Cloudflare Workers、Hono、Clerk 認証、JWT 検証、CORS、React API クライアント、 競合状態、認証読み込み、接続の問題、フルスタック統合、vite プラグイン、@cloudflare/vite-plugin、 D1 データベース、環境変数、トークンの添付、セッション管理、保護されたルート、API ミドルウェア ソース: jackspace/claudeskillz。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/jackspace/claudeskillz --skill cloudflare-full-stack-integration- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
cloudflare-full-stack-integration とは？
ReactフロントエンドをCloudflare Workerバックエンドに接続するための本番環境でテストされた統合パターン Hono、Clerk 認証、D1 データベースを使用します。一般的なフロントエンドとバックエンドの接続の問題を防ぎます。 CORS エラー、認証トークンの失敗、競合状態。 次の場合に使用します: フロントエンドとバックエンドの接続、認証フローの実装、API 呼び出しの設定、 CORS のトラブルシューティング、競合状態の修正、認証トークンが渡されない、フロントエンドとバックエンドの接続エラー、 401 エラー、Clerk と Workers の統合、フルスタック Cloudflare アプリのセットアップ、vite Cloudflare プラグインのセットアップ。 防止: CORS エラー、401 Unauthorized、認証トークンの不一致、認証読み込み時の競合状態、 環境変数の混乱、フロントエンドが間違ったエンドポイントを呼び出す、JWT 検証エラー、D1 接続の問題。 キーワード: フロントエンド バックエンド統合、Cloudflare Workers、Hono、Clerk 認証、JWT 検証、CORS、React API クライアント、 競合状態、認証読み込み、接続の問題、フルスタック統合、vite プラグイン、@cloudflare/vite-plugin、 D1 データベース、環境変数、トークンの添付、セッション管理、保護されたルート、API ミドルウェア ソース: jackspace/claudeskillz。
cloudflare-full-stack-integration のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/jackspace/claudeskillz --skill cloudflare-full-stack-integration インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/jackspace/claudeskillz
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-01