contact-us

GitHub

Cloudflare Worker によるお問い合わせフォームバックエンド。Discord チケット連携 & メール通知。

概要

contact-us は、Cloudflare Worker 上で動作するお問い合わせフォームバックエンドです。 フォーム送信を受け付け、Discord にチケットチャンネルを自動作成し、Resend 経由でメール通知を行います。 Discord の /reply コマンドやメール返信で、ユーザーとの双方向コミュニケーションが可能です。

機能

構成

コンポーネント 詳細
ランタイム Cloudflare Workers
KV チケット情報（チャンネル ID ↔ メールアドレス）の保存
外部サービス Discord API, Resend API, Cloudflare Turnstile

環境変数（Secrets）

変数名 説明
DISCORD_BOT_TOKEN Discord Bot トークン
DISCORD_GUILD_ID チケットを作成するサーバー ID
DISCORD_CATEGORY_ID チケットチャンネルを作成するカテゴリ ID
DISCORD_PUBLIC_KEY Discord Interaction 検証用公開鍵
RESEND_API_KEY Resend API キー
RESEND_FROM_EMAIL 送信元メールアドレス
TURNSTILE_SECRET_KEY Cloudflare Turnstile シークレットキー
ALLOWED_ORIGIN CORS 許可オリジン（カンマ区切りで複数指定可）
REPLY_TO_DOMAIN 返信用メールアドレスのドメイン（省略時は RESEND_FROM_EMAIL のドメインを使用）

エンドポイント

メソッド パス 説明
POST / フォーム送信を受け付け
GET / ヘルスチェック
POST /discord-interactions Discord Interaction Webhook

フロー図

[ユーザー]
  │ フォーム送信
  ▼
[Cloudflare Worker] ── Discord チャンネル作成
  │ 確認メール送信 (Reply-To: reply+{channelId}@domain)
  ▼
[ユーザーがメールに返信]
  │ reply+{channelId}@domain 宛に届く
  ▼
[Cloudflare Email Routing] ── Worker の email() ハンドラを呼び出し
  │ Discord チャンネルに返信内容を投稿
  ▼
[Discord スタッフが確認・/reply で返信]
  │ 返信メール (Reply-To: reply+{channelId}@domain)
  ▼
[ユーザー] → またメールに返信できる（スレッド継続）

セットアップ

1. 依存関係のインストール

npm install

2. Discord Bot の作成

  1. Discord Developer Portal で新しいアプリケーションを作成
  2. Bot タブで Bot を有効化し、トークンを取得
  3. OAuth2 → URL Generator で権限を付与してサーバーに招待
    • Scopes: bot, applications.commands
    • Bot Permissions: Manage Channels, Send Messages, Embed Links
  4. チケット用のカテゴリチャンネルを Discord サーバーに作成

3. Resend の設定

  1. Resend でアカウントを作成
  2. Domains から送信用ドメインを追加し、DNS レコード（SPF, DKIM, DMARC）を設定
  3. API Keys から API キーを取得

4. Cloudflare Turnstile の設定

  1. Cloudflare Dashboard → Turnstile → Add Widget
  2. 対象サイトのドメインを登録してウィジェットを作成
  3. Site Key（フロントエンド用）と Secret Key を取得

5. KV Namespace の設定

npx wrangler kv namespace create TICKET_KV
npx wrangler kv namespace create TICKET_KV --preview

出力された id と preview_id を wrangler.toml に設定。

6. Email Routing の設定

  1. Cloudflare Dashboard → 対象ドメイン → Email → Email Routing
  2. Settings タブで Subaddressing が有効になっていることを確認
  3. Routes タブで reply@yourdomain → Send to Worker のルールを追加

7. Secrets の登録

npx wrangler secret put DISCORD_BOT_TOKEN
npx wrangler secret put DISCORD_GUILD_ID
npx wrangler secret put DISCORD_CATEGORY_ID
npx wrangler secret put DISCORD_PUBLIC_KEY
npx wrangler secret put RESEND_API_KEY
npx wrangler secret put RESEND_FROM_EMAIL
npx wrangler secret put TURNSTILE_SECRET_KEY
npx wrangler secret put ALLOWED_ORIGIN

8. デプロイ

npx wrangler deploy

デプロイ後、Worker の URL を Discord Developer Portal の Interactions Endpoint URL に <Worker URL>/discord-interactions として設定。

注意事項