Cloudflare Pages × Workers実装ガイド：高速HPと問い合わせフォーム構築

Cloudflare Pagesのような「静的サイトホスティング」は、サーバーが存在しないため、「メールを送る」「データベースに保存する」といった処理が単体ではできません。

安易に外部からのJavaScriptだけで処理しようとすると、APIキーが漏洩し、スパムの踏み台にされるリスクがあります。そこで、「フォームの裏側で動く極小のサーバー」が必要になります。

Note: 本記事は実装・運用にフォーカスした技術解説です。Cloudflare Pagesの基本的な構築手順や、Vercelとの料金比較（経営者・Web担当者視点）については、こちらの導入ガイドをご覧ください。

「B: Pages Functions」も悪くありませんが、将来的に「スマホアプリからも送りたい」「他のサイトでも使いたい」となった時、独立した「C: Workers」の方が柔軟性が高いため、本記事ではCを推奨します。

開発者が迷いやすい、Cloudflare内の機能の使い分け基準を整理します。

特に「Secrets管理」と「リアルタイムログ」の点で、バックエンド処理にはWorkersの方が運用強度が一段上です。

今回構築するシステムの全体像です。

クライアントからは直接メールを送らず、必ずWorkerを経由します。ここで「Turnstileの認証トークン」をチェックすることで、ボットによる大量送信を水際で遮断します。

実運用に耐えうる構成での実装ステップです。以下の手順に従って構築を進めてください。

「動けばいい」で作ったフォームは、攻撃者の格好の標的になります。最低限考慮すべき脅威と対策をまとめました。

特に「Botスパム」は公開後すぐに来ます。Turnstileを入れておけば、ユーザーに「自転車のタイルを選んでください」といった面倒なパズルを強いることなく、裏側でAIがボット判定してくれます。

VercelのServerless Functionsも優秀ですが、Cloudflare Workersには「コールドスタート（起動遅延）がほぼ無い」という特性があります。

メール送信のような軽い処理には、Workers（V8 Isolate）の爆速起動が相性抜群です。一方で、重い画像処理や複雑なNode.jsライブラリを使う場合はVercelに軍配が上がります。

本構成の真の価値は、フォームを作った後にあります。Cloudflareのエコシステムに乗っているため、以下のようなセキュリティ強化が「管理画面の設定だけ」で可能になります。

• WAF (Web Application Firewall)：特定の国やIPからのアクセスをブロック。
• Rate Limiting：「1分間に10回以上送信してきたら1時間ブロック」等のルール設定。
• Zero Trust：社内管理画面を追加で作る際、VPNなしで安全にアクセス制御。

「まずはフォームから」始めたとしても、将来的にエンタープライズレベルのセキュリティ基盤へとスムーズに拡張できるのがCloudflareの強みです。

「静的サイトだからフォームは諦める（またはGoogleフォームで妥協する）」必要はありません。Cloudflare Workersを使えば、セキュアで高速、かつ運用費の安いフォームが作れます。