Cloudflare Workers × Dify Workflow API 中継構築

🌐 Cloudflare Workers × Dify Workflow API 中継構築まとめ

🎯 目的

ブラウザ → Cloudflare Worker → Dify Workflow API
という流れで安全に診断テキストを送信する仕組みをつくる。
環境変数の秘匿、CORSの回避、安全なAPI中継が主眼。

---

🗂️ システム構成図（擬似コード風）

[ブラウザ]
↓ fetch(JSON)
[Cloudflare Worker]
↓ 認証付きPOST
[Dify Workflow API (/run)]

---

🧱 構成要素とポイント

項目	内容
Cloudflare Workers	中継・CORS処理・キー秘匿など
Dify API	https://api.dify.ai/v1/workflows/<workflow_id>/run
wrangler.toml	環境変数（APIキーなど）定義
ブラウザ	fetchでPOST（Content-Type: application/json）

---

🛠️ ステップバイステップ構築手順

① Worker プロジェクト作成

npm create cloudflare@latest
# テンプレート選んで `wrangler.toml` 自動生成

---

② wrangler.toml 設定

name = "dify-dff-proxy"
type = "javascript"
compatibility_date = "2024-07-04"

[vars]
DIFY_API_KEY = "sk-xxxxx"  # ← 秘密キー

💡 .tomlに書きたくない場合：

wrangler secret put DIFY_API_KEY

---

③ Workerスクリプト（CORS対応済み）

export default {
  async fetch(request, env) {
    const corsHeaders = {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET,HEAD,POST,OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type',
    };

    if (request.method === 'OPTIONS') {
      return new Response(null, { status: 204, headers: corsHeaders });
    }

    const DIFY_WORKFLOW_URL = 'https://api.dify.ai/v1/workflows/<workflow_id>/run';

    try {
      const contentType = request.headers.get("Content-Type") || "";
      const body = contentType.includes("application/json")
        ? await request.json()
        : JSON.parse(await request.text());

      const res = await fetch(DIFY_WORKFLOW_URL, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${env.DIFY_API_KEY}`,
        },
        body: JSON.stringify(body),
      });

      return new Response(await res.text(), {
        status: res.status,
        headers: {
          "Content-Type": "application/json",
          ...corsHeaders,
        },
      });
    } catch (err) {
      return new Response(JSON.stringify({ error: err.message }), {
        status: 500,
        headers: corsHeaders,
      });
    }
  },
};

---

④ デプロイ

wrangler deploy

➡️ URLが発行される：

https://dify-dff-proxy.<your-name>.workers.dev/

---

🌍 CORS対策まとめ

項目	内容
問題	fetch時にCORS制限（プリフライト要求）
対策	OPTIONS対応 + Access-Control-Allow-Origin: *
開発中	*でOKだが本番は特定のOriginへ限定を推奨

---

🌐 ブラウザから送信する例

await fetch("https://dify-dff-proxy.～.workers.dev", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    inputs: { assessment: "診断テキスト" },
    user: "test_user"
  }),
});

---

💡 応用Tips

応用	方法
Workflow切替	workflow_idをリクエストで指定可能
Zapier等へ連携	Dify Workflow内にZapierノード挿入
認証追加	Workerで独自トークンチェックも可
Cloudflare Pages連携	UI部分はPages, APIはWorkersに分離
Gemini/ChatGPT版も可	エンドポイントを差し替え可能

---

🧪 デバッグ

wrangler tail

➡️ リアルタイムログ確認。console.log()も活用。

---

✅ まとめ

• Worker経由で外部APIに安全中継
• CORS制御と環境変数管理で堅牢
• Difyに限らず色んなAPI中継に応用可