Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

フルスタックアプリケーション

最終更新 Markdown で表示Agent セットアップ

フルスタックの Web アプリケーションは、フロントエンドとバックエンドの技術を組み合わせて、完結した動的なユーザー体験を提供します。こうしたアプリケーションは、ユーザーインターフェース、バックエンドサービス、データベース、連携、そして近年は AI 機能まで含む幅広い技術スタックに依存し、切れ目なく動作し、信頼性高くスケールします。

フロントエンドでは、通常 HTML、CSS、JavaScript を使い、React、Next.js、Angular などのフレームワークと組み合わせることが多いです。これらのツールは、現代のユーザーインターフェースに必要な構造とインタラクティビティを提供し、状態管理、動的コンテンツの描画、体験のパーソナライズ、デバイスをまたいだパフォーマンス最適化を助けます。

バックエンドでは、サーバーサイドのコードがリクエスト処理、ビジネスロジックの実行、ユーザー認証、AI モデルとの連携、データベース操作などを担います。開発者は JavaScript、Python、Java などの言語でこれらのサービスを構築し、ルーティング、ミドルウェア、API 作成を簡素化するフレームワークを使います。

データベースはスタックの中核で、アプリケーションデータを保存し、取り出します。MySQL、PostgreSQL、SQLite などのリレーショナルデータベースは構造化データを扱い、データの整合性を保ちます。MongoDB や Cassandra などの NoSQL は、非構造化データや大規模データセットを柔軟に扱えます。

現代のフルスタック開発では、外部サービス、API、既製コンポーネント、AI 機能を取り入れることが増えています。この方針により、コンテンツモデレーション、パーソナライズされたレコメンデーション、セマンティック検索など、複雑な機能をゼロから作る必要が減ります。その結果、開発チームはより速く、効率よくアプリケーションを構築できます。

Cloudflare の Developer Platform は、これらの機能をひとつのグローバル分散環境にまとめます。運用負荷を抑えながら、現代的なフルスタックアプリケーションの構築、デプロイ、スケールに必要なものを提供します。

図 1: Cloudflare Developer Platform
図 1: Cloudflare Developer Platform

Cloudflare のプラットフォームは、個別サービスを並べるだけではありません。組み合わせ可能なエコシステム として、チームが強力なアプリケーションをすばやく構築し、切れ目なくスケールし、インフラ管理の負担なしに、より速く革新できるようにします。

フルスタックアプリケーションの図

このセクションでは、これらのサービスが実際のフルスタックアプリケーション構成でどう組み合わさるかを、実例で示します。

図 2: フルスタックアプリケーション
図 2: フルスタックアプリケーション

1. クライアント

サーバーへリクエストを送ります。デスクトップやモバイルのブラウザー、ネイティブアプリ、モバイルアプリなどです。

2. セキュリティ

受信リクエストを処理し、アプリケーションのセキュリティを確保します。対象は SSL/TLS によるトラフィックの暗号化、DDoS protectionWeb アプリケーションファイアウォール(WAF) による悪意あるトラフィックのフィルタリング、自動ボットへの対策、API の脆弱性を特定して対処する API Shield です。設定に応じて、多様なパラメーターに基づきリクエストをブロック、ログ記録、許可できます。管理済みの既定設定を使えば、ほとんど手間をかけずに攻撃面を減らせます。

3. パフォーマンス

静的リクエストを グローバルキャッシュ(CDN) から配信します。キャッシュから返すため、ストレージやメディアサービス、コンピュートサービスへのリクエストが不要になり、レイテンシが下がり、リソース使用量も減ります。Argo Smart Routing を使い、混雑を避けて最も効率のよいネットワーク経路でリクエストをルーティングできます。

4. コンピュート

Workers のサーバーレスコンピュートで動的リクエストを処理します。認証、ルーティング、ミドルウェア、データベース操作、API の提供などが含まれます。さらに Workers Assets を使うと、React、Next.js、Angular などのクライアントサイドまたはサーバーサイドレンダリングの Web フレームワークを配信できます。Workers for Platforms を使うと、ユーザーがプラットフォーム上にカスタムコードをデプロイしたり、自分のコードを直接デプロイしたりできます。ステートフルなワークロードには、Durable Objects が低レイテンシのステートフルコンピュートを提供します。オブジェクトのデータがある場所の近くでロジックを実行し、エッジでの調整、永続化、リアルタイム通信を実現します。

従来のコンテナ化の柔軟さが必要なワークロードには、Containers で既存の Docker 互換アプリケーションを Cloudflare のグローバルネットワーク上で実行できます。Containers は、標準の Worker より多くのリソースを必要とするアプリケーション向けです。

5. データとストレージ

データを永続化して取り出すことで、アプリケーションに状態を持たせます。オブジェクトストレージの R2、リレーショナルデータの D1、読み取りが多いデータの KV、強い整合性が必要なデータの Durable Objects があります。どのストレージが用途に合うかは、ストレージオプションのガイド で判断できます。

6. リアルタイムコンテンツとメディア

Realtime で、リアルタイムのサーバーレス動画、音声、データアプリケーションを構築します。Images から最適化した画像を配信し、オンデマンド動画とライブストリームは Stream から配信します。

7. AI

Workers AI では、サーバーレス GPU を使い、テキスト生成、画像分析、コンテンツモデレーションなどの人気オープンソースモデルを実行できます。Vectorize は、類似検索、パーソナライズ、レコメンデーション向けのグローバル分散ベクトルデータベースです。Agents は AI の機能をさらに広げます。Cloudflare は Agents SDK を提供し、タスク実行、リアルタイム対話、モデル呼び出し、状態管理、ワークフロー実行、データ照会、人が介入する操作(human-in-the-loop)を行う AI エージェントを構築してデプロイできます。

8. オーケストレーションと抽象化

Queues は耐久性のある非同期メッセージングで、サービスを疎結合にし、トラフィックスパイクに対応します。Workflows は API、サービス、人の承認をまたぐ複雑なプロセスをオーケストレーションし、インフラと状態管理を抽象化します。Pipelines は、インフラを管理せずに大量のリアルタイムデータを取り込みます。

9. Cloudflare のオブザーバビリティ

Logpush ですべてのサービスからログを送信し、Cloudflare ダッシュボード上の Workers Logs で洞察を集め、Workers Analytics Engine で Workers からカスタムメトリクスを収集し、AI Gateway で AI アプリケーションを観測・制御します。

10. 外部のログと分析

Cloudflare のオブザーバビリティを、既存のサードパーティ製品と連携できます。Logpush は、保存と追加分析のためにログを送る 送信先 を多数サポートします。また、Cloudflare の分析は 分析ソリューションと連携 できます。GraphQL Analytics API では、柔軟なクエリと連携が可能です。

11. ツールとプロビジョニング

TerraformPulumi などのサードパーティツールとフレームワーク、Cloudflare Developer Platform のコマンドラインインターフェイス(CLI)である Wrangler、または Cloudflare API を使い、リソースと設定を定義・管理します。これらのツールは手動のプロビジョニングにも、CI/CD パイプラインの一部としての自動化にも使えます。

12. 外部サービスとの連携

Cloudflare の Developer Platform は、外部サービスとの連携 を前提に作られています。サードパーティの API、データベース、SaaS プラットフォーム、クラウドプロバイダーへの接続でも、Workers からアウトバウンドリクエストを送り、外部イベントをきっかけにワークフローを起動し、システム間で安全にデータをやり取りできます。

役に立ちましたか?