Cloudflare Solution Blog

Architecture & Technology

このブログについて

Cloudflare のサーバーレスプラットフォーム上に構築された、AI アシスト付きテクニカルブログの技術構成を紹介します。

アーキテクチャ概要

ブラウザユーザーCF AccessZero Trust 認証IdP 連携 (Google)JWT 検証Cloudflare PagesRemix (SSR)LoaderActionTailwind CSS + TypographyD1 (SQLite)記事 / ユーザーテンプレート / カテゴリR2 (Storage)画像アップロードメディア管理Workers AILlama 3.1 70B記事ドラフト生成KVセッション / キャッシュVectorize関連記事検索Drizzle ORM

全コンポーネントが Cloudflare のエッジ上で動作し、サーバーレスで運用されています。

技術スタック

Cloudflare Pages

Remix アプリケーションのホスティング。SSR（サーバーサイドレンダリング）により、SEO に強く高速な初期表示を実現。

HostingSSREdge

D1 (SQLite)

記事、ユーザー、テンプレート、カテゴリなど全データを管理するエッジデータベース。Drizzle ORM でタイプセーフにアクセス。

DatabaseSQLEdge

R2 (Object Storage)

記事に挿入する画像・スクリーンショットを保存。S3 互換 API でアップロード・配信を処理。

StorageMediaS3互換

Workers AI

Llama 3.1 70B モデルを使用し、テンプレートベースの記事ドラフトを AI が自動生成。プロンプトエンジニアリングで企業事例スタイルに最適化。

LLMLlama 3.170B

Vectorize

記事の埋め込みベクトルを保存し、コンテンツの類似度に基づく関連記事の推薦を実現。

Vector DBEmbedding検索

Cloudflare Access

Zero Trust 認証でポータルを保護。IdP（Google 等）連携による SSO と JWT ベースのセッション管理。

Zero TrustSSOJWT

KV (Key-Value)

セッション管理とページキャッシュに使用。エッジ上での低レイテンシなデータアクセスを実現。

SessionCache

Remix v2

フルスタック Web フレームワーク。Loader/Action パターンによるデータフェッチと、ネストルーティングで高度な画面構成を実現。

FrameworkReactSSR

Tailwind CSS

ユーティリティファーストな CSS フレームワーク。Typography プラグインにより、Markdown コンテンツも美しく表示。

CSSTypographyUI

記事作成フロー

📋
1

テンプレート選択

6種類のテンプレートから選択

✏️
2

フォーム入力

メモ書きレベルでOK

🤖
3

AI ドラフト生成

Llama 3.1 70B が記事化

🖼️
4

編集・画像追加

Markdown エディタで調整

🚀
5

公開

ワンクリックで公開

AI ドラフト生成のしくみ

入力

VPNが遅い、よく切れる
リモート増えて同時接続きつい
IT部がVPN対応で疲弊してる

ラフなメモ書き・箇条書きでの入力

AI 出力

リモートワークの全社導入に伴い VPN の同時接続数が急増し、業務のピーク時間帯にはライセンス上限に達して接続できない社員が続出するようになりました。IT部門は日々の VPN トラブル対応に追われ、本来注力すべきインフラ改善に手が回らない状況でした...

行間を読み、文脈を補完した企業事例スタイルの文章

プロンプトエンジニアリングの特徴

●行間を読む文章構成 — 箇条書きの裏にある判断理由を推測し肉付け
●事実の完全保持 — 入力された数値・固有名詞は絶対に省略しない
●品質ガードレール — 多言語混入禁止、反復表現禁止、重複禁止
●セクション末尾の考察 — 背景の総括、改善点、今後の課題を自動追加

テンプレート一覧

Zero Trust

Zero Trust 導入ガイド

Access / Gateway / Tunnel の導入事例を構造化して記述

Workers

Workers / Pages 開発記

サーバーレスアプリケーションの設計・実装事例

Performance

パフォーマンス最適化

CDN / Cache / Argo 等によるパフォーマンス改善事例

Security

セキュリティ対策

WAF / Bot Management / DDoS 防御の導入・運用事例

Network

ネットワーク構成

Magic Transit / WAN / Spectrum 等のネットワーク設計事例

General

Tips & Tricks

短めの実用的な Cloudflare 活用テクニック

データモデル

usersid, email, display_namerole, avatar_url, biopassword_hashapproved_post_countpostsid, title, slug, contentexcerpt, cover_image_urlauthor_id → userscategory_id → categoriesstatus: draft | publishedtags_json, reading_timepublished_at, view_countcategoriesid, name, slugdescription, sort_ordertemplatesid, name, descriptioninput_fields_jsonai_prompt_templatedifficulty, category_idai_draft_requestsuser_id, template_id, post_idmodel_used, latency_ms, status

セキュリティ & インフラ

🔒

認証・認可

  • Cloudflare Access による Zero Trust 認証
  • IdP 連携（Google Workspace 等）
  • JWT ベースのセッション管理（KV 保存）
  • ロールベースアクセス制御（admin / se / user）
🌐

エッジコンピューティング

  • 全コンポーネントが Cloudflare エッジで動作
  • オリジンサーバー不要のフルサーバーレス
  • グローバル CDN による低レイテンシ配信
  • 自動スケーリング・ゼロコールドスタート
📊

運用機能

  • RSS フィード自動生成
  • SEO 最適化（OGP / Twitter Card）
  • 閲覧数カウント
  • 監査ログ（Audit Log）
🧩

開発体験

  • TypeScript + Drizzle ORM でタイプセーフ
  • D1 マイグレーションによるスキーマ管理
  • Wrangler CLI でローカル開発・デプロイ
  • Vite ベースの高速 HMR

仕様一覧

項目技術 / 仕様
フレームワークRemix v2 (Vite)
ランタイムCloudflare Workers (V8 Isolates)
データベースCloudflare D1 (SQLite at edge)
ORMDrizzle ORM
ストレージCloudflare R2 (S3 互換)
AI モデルMeta Llama 3.1 70B Instruct (Workers AI)
ベクトル検索Cloudflare Vectorize
認証Cloudflare Access (Zero Trust)
セッションCloudflare KV
CSSTailwind CSS v3 + Typography plugin
Markdownmarked + DOMPurify (XSS 対策)
言語TypeScript 5.7
デプロイWrangler CLI → Cloudflare Pages