アーキテクチャ概要
全コンポーネントが Cloudflare のエッジ上で動作し、サーバーレスで運用されています。
クリックで拡大表示
技術スタック
Cloudflare Pages
Remix アプリケーションのホスティング。SSR（サーバーサイドレンダリング）により、SEO に強く高速な初期表示を実現。
D1 (SQLite)
記事、ユーザー、テンプレート、カテゴリなど全データを管理するエッジデータベース。Drizzle ORM でタイプセーフにアクセス。
R2 (Object Storage)
記事に挿入する画像・スクリーンショットを保存。S3 互換 API でアップロード・配信を処理。
Workers AI
Google Gemma 4 26B A4B モデルを使用し、テンプレートベースの記事ドラフトを AI が自動生成。Hono の streamSSE でチャット応答をリアルタイム配信。
Vectorize
記事の埋め込みベクトルを保存し、コンテンツの類似度に基づく関連記事の推薦を実現。
Cloudflare Access
Zero Trust 認証でポータルを保護。IdP（Google 等）連携による SSO と JWT ベースのセッション管理。
WAF + Bot Management
カスタムドメインに適用された WAF が OWASP Top 10（SQLi / XSS 等）を防御。Bot Management が API エンドポイントへの自動化攻撃を検知・軽減。ゼロコードでエッジ保護。
API Shield
OpenAPI 3.0 スキーマを登録し、全 API エンドポイントのメソッド・パス・リクエストボディをエッジで検証。スキーマに合致しないリクエストを自動ブロック。
Turnstile
チャット Q&A に invisible モードの Turnstile を統合済み・稼働中。ボットによる自動投稿を Workers 到達前に検知・ブロックし、UX を損なわずに保護。
AI Gateway
Workers AI 呼び出しを AI Gateway 経由でルーティング済み・稼働中。ログ・分析・レート制限・ガードレールを一元管理。
KV (Key-Value)
セッション管理とページキャッシュに使用。エッジ上での低レイテンシなデータアクセスを実現。
Hono
Cloudflare Workers に最適化された超軽量 API フレームワーク。型安全なバインディング、streamSSE による AI ストリーミング、共通ミドルウェア（認証・CORS・ロガー）を提供。
Remix v2
フルスタック Web フレームワーク。Loader/Action パターンによるデータフェッチと、ネストルーティングで高度な画面構成を実現。API ルートは Hono に委譲。
Email Workers + Email Routing
専用 Email Worker (send_email バインディング) で承認通知メールを送信。Email Routing API で宛先アドレスの登録・検証・削除を自動管理。
Tailwind CSS
ユーティリティファーストな CSS フレームワーク。Typography プラグインにより、Markdown コンテンツも美しく表示。
記事作成フロー
テンプレート選択
6種類のテンプレートから選択
フォーム入力
メモ書きレベルでOK
AI ドラフト生成
Gemma 4 26B が記事化
編集・画像追加
Markdown エディタで調整
AI アシスト修正
追加エッセンスで改善
公開
ワンクリックで公開
AI ドラフト生成のしくみ
入力
ラフなメモ書き・箇条書きでの入力
AI 出力
行間を読み、文脈を補完した企業事例スタイルの文章
プロンプトエンジニアリングの特徴
AI 修正アシスト
AI が生成した下書きを読んで気づいた補足情報や修正指示を、手動で書き直さずに AI で自然に本文に組み込む機能です。 修正案は HTML プレビューと Markdown ソースのタブ切替で確認し、納得できたら適用します。
追加エッセンス入力
編集画面の「AI アシスト修正」パネルで、補足したい内容・修正指示・新しいアイデアを自由記述。 例:「CASB 導入の記述を追加」「接続図の Mermaid 図を入れて」など。
チェックリスト型プロンプト
エッセンスの各項目を全て漏れなく本文に反映するよう AI に指示。 Mermaid 図の指示があれば正しい構文で自動生成。日本語ノードの引用符ルールも明記。
HTML プレビュー + Mermaid
修正案を HTML プレビュー（Mermaid 図レンダリング・Markdown 描画）と Markdown ソースのタブ切替で確認。構文エラー時はソース表示＋修正案内のフォールバック付き。
エッセンス入力
補足・修正指示を記入
AI 修正生成
チェックリスト型で全反映
プレビュー確認
HTML / Markdown タブ切替
適用 or 破棄
ワンクリックで本文反映
実装上の工夫
テンプレート一覧
Zero Trust 導入ガイド
Access / Gateway / Tunnel の導入事例を構造化して記述
Workers / Pages 開発記
サーバーレスアプリケーションの設計・実装事例
パフォーマンス最適化
CDN / Cache / Argo 等によるパフォーマンス改善事例
セキュリティ対策
WAF / Bot Management / DDoS 防御の導入・運用事例
ネットワーク構成
Magic Transit / WAN / Spectrum 等のネットワーク設計事例
Tips & Tricks
短めの実用的な Cloudflare 活用テクニック
JSON インポート — 他生成 AI との連携
Gemini、ChatGPT、Claude などの外部 AI ツールで作成したフィールド入力データを、テンプレートフォームに JSON インポートして記事を生成できます。 API キー不要でブラウザ内だけで完結するワークフローです。
フィールド定義をコピー
テンプレートフォームからワンクリック
AI ツールに貼り付け
エッセンスと一緒に送信
JSON をインポート
AI の出力を貼り付け
AI で下書き生成
フィールド自動入力 → 記事化
フィールド定義コピー
テンプレートフォームの「AI ツール連携 / JSON インポート」パネルで、テンプレートのフィールド構造（ID・ラベル・型・必須/任意）を JSON 形式でクリップボードにコピー。そのまま AI に貼り付けるだけ。
外部 AI で入力データ生成
Gemini / ChatGPT / Claude にフィールド定義と書きたい内容のエッセンスを送信。 AI がフィールド構造に合わせた JSON データを出力。プロンプト例もパネルに表示。
JSON インポート & 記事生成
AI が出力した JSON をインポートするとフォームが自動入力。 内容を確認・微調整後、Workers AI（Gemma 4 26B A4B）が Markdown 記事に変換。
上級者向け: Template API
Authorization: Bearer cfbk_* ヘッダー付きでGET /api/v1/ai-guide（全テンプレート一括取得）、POST /api/v1/templates/:id/test-generate（AI テスト記事生成）、POST /api/v1/templates/quick-generate（トピック指定で自動生成） などの API エンドポイントも利用可能。Windsurf / Cascade などの AI コーディングツールからの直接呼び出しにも対応しています。
投稿者申請 & メール通知フロー
外部エンジニアが投稿者として参加するには、公開申請フォーム（/apply）から申請を送信します。 Cloudflare Email Routing と専用 Email Worker を組み合わせた通知メールの仕組みが組み込まれています。
申請フォーム送信
/apply からメール・名前・所属を入力
メールアドレス検証
Email Routing API で宛先登録 → CF が検証メール送信
ユーザーが検証
メール内リンクをクリックして検証完了
管理者が承認
Access ポリシーにメール追加 + ユーザー作成
通知メール送信
Email Worker 経由で承認完了メールを送信
Email Routing API
申請時に POST /email/routing/addresses で 宛先アドレスを自動登録。Cloudflare が検証メールを送信し、ユーザーがリンクをクリックして検証完了。
Email Worker
Pages は send_email バインディング非対応のため、 専用 Worker（cf-se-blog-email-worker）を HTTP fetch で呼び出してメール送信。
ユーザー削除時の同期
ユーザー削除時に Access ポリシーからのメール削除と Email Routing 宛先アドレスの削除を API 経由で自動実行し、外部サービスとの整合性を維持。
Hono API アーキテクチャ
本ブログの API レイヤーは、Cloudflare Workers に最適化された超軽量フレームワークHonoで構築されています。Remix の SSR/UI 層と Hono の API 層を組み合わせることで、 それぞれのフレームワークの強みを最大限に活かしたハイブリッド構成を実現しています。
型安全なバインディング
c.env.DB、c.env.AI など 全 Cloudflare サービスに型付きでアクセス。開発時にミスを防止。
streamSSE
AI チャットの応答を Hono の streamSSE ヘルパーで リアルタイム配信。手動の ReadableStream 構築が不要に。
共通ミドルウェア
認証・認可・CORS・ロガーを共通ミドルウェアとして定義。 ルートごとに宣言的に適用でき、コードの重複を排除。
超軽量・高速
依存ゼロ、バンドルサイズ極小。Cloudflare Workers の起動時間を最小化し、 エッジでのレスポンス速度を最大化。
API ルート構成
POST /api/v1/chatAI チャット Q&A（SSE ストリーミング）POST /api/v1/ai/*タグ提案・文章改善・トレンドレポートPOST /api/upload-image画像アップロード（R2）GET /api/healthヘルスチェックデータモデル
セキュリティ & インフラ
認証・認可
- Cloudflare Access による Zero Trust 認証
- IdP 連携（Google Workspace 等）
- JWT ベースのセッション管理（KV 保存）
- ロールベースアクセス制御（admin / se / ae / user）
WAF + Bot Management
- カスタムドメインに WAF を適用
- OWASP Top 10 防御（SQLi / XSS 等）
- Bot Management で自動化攻撃を検知・軽減
- API Shield — OpenAPI スキーマで全エンドポイントを検証
- Turnstile — チャット Bot 保護（invisible モード）
- AI Gateway — AI 呼び出しのガードレール・ログ・分析
エッジコンピューティング
- 全コンポーネントが Cloudflare エッジで動作
- オリジンサーバー不要のフルサーバーレス
- グローバル CDN による低レイテンシ配信
- 自動スケーリング・ゼロコールドスタート
投稿者申請 & メール通知
- 公開申請フォーム（/apply）で自己申請
- Email Routing API で宛先アドレス自動登録・検証
- 専用 Email Worker で承認通知メール送信
- ユーザー削除時に Access + Email Routing を自動クリーンアップ
運用機能
- RSS フィード自動生成
- SEO 最適化（OGP / Twitter Card）
- 閲覧数カウント
- 監査ログ（Audit Log）
- ユーザープロフィール管理（所属・専門分野等）
開発体験
- TypeScript + Drizzle ORM でタイプセーフ
- Hono で API を型安全に構築
- D1 マイグレーションによるスキーマ管理
- Wrangler CLI でローカル開発・デプロイ
- Vite ベースの高速 HMR
AI チャットボット — 実装・改善・チューニング
各記事ページにフローティングチャットウィジェットを設置。読者が記事内容や Cloudflare 全般について質問でき、 AI がリアルタイムでストリーミング回答します。セキュリティ・モデレーション・UX を多層的に設計しています。
アーキテクチャ
- Hono
streamSSEによる SSE ストリーミング - Gemma 4 26B A4B（回答生成）
- Llama Guard 3 8B（コンテンツモデレーション）
- RAG: Vectorize で記事コンテキスト + 関連記事を自動取得
- 会話履歴 10 件を保持してコンテキスト継続
- D1 に質問・回答を永続化（24 時間 TTL で自動削除）
セキュリティ多層防御
- Turnstile — invisible CAPTCHA で Bot を排除
- 入力バリデーション — 1,000 文字制限 + スパムパターン検出
- KV レート制限 — IP あたり 10 回/分
- Llama Guard — 有害コンテンツを自動フラグ & 拒否
- AI Gateway — ガードレール・ログ・レート制限
- フラグ付きメッセージは DB に証跡保存（管理画面で確認可能）
UX 改善ポイント
- 自動リサイズ
textarea— 長文入力でも全文が見える - Shift+Enter で改行、Enter で送信
- サジェスト質問ボタン（3 種）で入力の敷居を低下
- SSE ストリーミング中のタイピングアニメーション
- ガードレール/エラー時のわかりやすいメッセージ表示
- SE・Admin による人間の回答も対応（緑バッジ表示）
チューニングポイント & 改善履歴
| 項目 | Before | After | 効果 |
|---|---|---|---|
| 回答スコープ | 記事コンテキストのみ（厳格なグラウンディング） | 記事優先 + Cloudflare 全般の知識で補足 | 幅広い質問に回答可能に |
| max_tokens | 1,024 | 2,048 | 詳細な回答・コード例が可能に |
| AI 回答の永続化 | fire-and-forget（消失リスク） | await で確実に D1 保存 | リフレッシュ後も回答が残る |
| スレッド TTL | 28 日 | 24 時間（自動クリーンアップ） | ストレージ節約・プライバシー向上 |
| 入力フィールド | 単行 input（長文が見切れる） | 自動リサイズ textarea（max 6rem） | 長文の可視性・改行対応 |
| エラーハンドリング | ガードレールブロック時は無応答 | SSE error イベントでユーザーに通知 | 「内容を変えてお試しください」と案内 |
| temperature | 0.3（低温＝事実重視・安定出力） | ハルシネーション抑制 | |
AI Gateway — 挙動例とエラーハンドリング
AI Gateway は Workers AI への全リクエストを中継し、ガードレール・ログ・キャッシュ・レート制限を適用します。ai.run() の第3引数に { gateway: { id: "..." } } を渡すだけで有効化されます。
正常フロー
ユーザー入力 → Turnstile 検証 → バリデーション → KV レート制限 → Llama Guard モデレーション（AI Gateway 経由） → RAG コンテキスト取得 → Gemma 4 26B A4B で回答生成（AI Gateway 経由・SSE ストリーミング） → D1 に保存。AI Gateway ダッシュボードでリクエスト数・レイテンシ・トークン消費量をリアルタイム監視可能。
ガードレールブロック時
AI Gateway のガードレールが不適切コンテンツを検知 → ストリームが空/中断 → サーバーが空レスポンスを検知 → SSE で { error: "AI からの応答を取得できませんでした..." } を送信 → フロントエンドが赤いエラーバーに「内容を変えて再度お試しください」と表示。 ai.run() 自体が例外をスローする場合も、エラーメッセージから gateway/guard/block を検知して専用メッセージを返却。
モデレーション（Llama Guard）との併用
Llama Guard 3 8B が「unsafe」を返した場合 → ユーザーメッセージを flagged=true で D1 に保存 → 「利用規約に反する可能性があるため送信できません」と即座に拒否。 Llama Guard 自体のエラーは Fail-open 設計（false negative 優先）で処理を続行。 二重防御: Llama Guard（コンテンツ分類）+ AI Gateway（ガードレール）の多層構成。
AI Gateway ダッシュボードで確認可能な情報
リクエスト数・成功/失敗率・平均レイテンシ・トークン消費量・ モデル別コスト分析・ガードレール発動回数・キャッシュヒット率。 全ログはリアルタイムで記録され、異常検知やコスト最適化に活用可能。
Markdown インポート
既存の Markdown 記事（Qiita、Zenn、社内 Wiki 等）をそのままインポートして記事化できます。 YAML Frontmatter からタイトル・タグ・カテゴリを自動抽出し、フォームに反映します。
Markdown を貼り付け
Frontmatter 付きの原稿をペースト
自動解析
タイトル・タグ・カテゴリを抽出
プレビュー確認
解析結果を確認して取り込み
公開時に画像を R2 へ
外部画像を自動で R2 に取り込み
YAML Frontmatter 対応
title、tags、category を Frontmatter から自動抽出。Frontmatter がない場合は最初の # 見出し をタイトルとして使用。
外部画像の自動 R2 取り込み
記事を公開する際に、Markdown 内の外部画像 URL（Qiita、S3 等）を自動検出し、 Cloudflare R2 にコピー。URL を R2 パスに自動置換するため、投稿者の操作は不要です。
デフォルトテンプレート
インポートモーダルを開くと Frontmatter のテンプレートがあらかじめ入力されており、 既存原稿を貼り付けるだけで即座に解析を開始できます。
このブログの使い方
Cloudflare フィールドノートは、SE が現場で得た技術知見を検証や事例の形で共有する場です。 対象読者ごとに最適な活用方法をまとめました。
お客様・ユーザー
- ▸Cloudflare 技術の理解・学習に
- ▸構成例や設計パターンの参考に
- ▸PoC や検証の出発点として
SE・社内エンジニア
- ▸お客様提案の技術リファレンスに
- ▸チーム内のナレッジ共有に
- ▸新人オンボーディングの教材に
パートナー
- ▸共同提案時の技術コンテキスト共有に
- ▸Cloudflare 技術の概要把握に
- ▸お客様向け説明資料の補足に
このブログの位置づけ
SE が現場で得た知見を共有するフィールドノートです。公式ドキュメントとは異なり、個人の経験・見解に基づく情報を含みます。 最新の仕様は developers.cloudflare.com をご参照ください。
免責事項ポリシー
本ブログは Cloudflare Japan のソリューションエンジニアが運営していますが、掲載内容は公式な製品仕様や動作保証を意味するものではありません。 この位置づけを明確にするため、サイト上の複数箇所に免責事項を掲載しています。
ホームページ — 概要説明
ヒーローセクション直下に、本ブログの位置づけを簡潔に説明する免責文を掲載。 執筆者個人の経験・見解に基づく情報であること、公式ドキュメントへの参照リンクを含みます。
各記事ページ — 詳細な免責事項
記事本文の末尾に「免責事項」ボックスを表示。 Cloudflare, Inc. の公式見解・推奨・仕様保証を構成するものではないこと、 すべてのお客様環境への適用を保証するものではないことを明記しています。
免責事項について
- - 投稿者は SE 個人の立場で経験・知見を共有しており、Cloudflare の公式メッセージとは異なります
- - お客様の環境はそれぞれ異なるため、記事の手順や構成がすべてに適用できるとは限りません
- - 他部署や社外のステークホルダーがこのブログの位置づけを正しく理解できるようにするためです
- - 最新の仕様や正式なサポートは Cloudflare 公式ドキュメント をご参照ください
仕様一覧
| 項目 | 技術 / 仕様 |
|---|---|
| フレームワーク | Remix v2 (Vite) + Hono (API Layer) |
| ランタイム | Cloudflare Workers (V8 Isolates — コールドスタートなし) |
| ホスティング | Cloudflare Pages (SSR + CDN 静的配信) |
| データベース | Cloudflare D1 (SQLite at edge) + Drizzle ORM |
| ストレージ | Cloudflare R2 (S3 互換・エグレス無料) |
| API レイヤー | Hono — streamSSE, 型付き Bindings, CORS / Auth / Logger ミドルウェア |
| AI モデル | Google Gemma 4 26B A4B (ドラフト・チャット) + Llama Guard 3 8B (モデレーション) |
| AI Gateway | AI 呼び出しの一元管理 — ログ・分析・レート制限・ガードレール（稼働中） |
| ベクトル検索 | Cloudflare Vectorize — セマンティック検索 + RAG チャット Q&A |
| WAF / DDoS | OWASP Core Ruleset + Bot Management + カスタムルール |
| API Shield | OpenAPI 3.0 スキーマで全 16 エンドポイントをエッジ検証 |
| Turnstile | チャット Bot 保護 (invisible モード・稼働中) |
| 認証 | Cloudflare Access (Zero Trust / Google SSO) |
| 認可 | RBAC (admin / se / ae / user) + Personal API Keys (Bearer cfbk_) |
| セッション / キャッシュ | Cloudflare KV (グローバル分散) |
| メール通知 | Email Workers (send_email) + Email Routing API |
| 投稿者申請 | /apply → Email 検証 → 管理者承認 → Access ポリシー自動追加 |
| CSS | Tailwind CSS v3 + Typography plugin |
| Markdown | marked + DOMPurify (XSS 対策) |
| 言語 | TypeScript 5.7 (フルスタック型安全) |
| CI/CD | GitHub Actions → Wrangler CLI → Cloudflare Pages |