INDEX
前回、Notionの記事データを取得して、Webサイトに一覧表示させるまでを紹介しました。
※その時の記事はこちら
今回は、その時に利用したCloudflare Workersについて具体例を交えつつご紹介します。
1. Cloudflare Workersとは？
Cloudflare Workersは、Cloudflareのエッジネットワーク（※）上でコードを実行できるサーバレスプラットフォームです。分散されたエッジサーバーを利用して、世界中のユーザーに低遅延で応答を提供できます。従来のサーバー運用と比べて、インフラ管理が不要でスケーリングも簡単です。
※エッジネットワーク（Edge Network）とは、データ処理やサービス提供を利用者に近い場所で行う分散型のネットワークアーキテクチャを指します。「エッジ」という言葉は、ネットワークの中心（クラウドやデータセンター）から離れた末端部分、つまり利用者やデバイスの近くにあるインフラやコンピューティングリソースを指します。
2. Cloudflare Workersでできること
・リクエスト・レスポンスの処理
Cloudflare Workersでは、HTTPリクエストとレスポンスの内容を処理できます。例えば、リクエストの検証や変換、特定の条件に基づいたリダイレクトを簡単に設定可能です。
・APIゲートウェイとしての利用
Cloudflare Workersを使ってAPIゲートウェイを構築することで、複数のAPIエンドポイントを統合・最適化したり、データを一括で処理・返却できます。外部APIのデータを加工して返すなど、ビジネスロジックの拡張も可能です。
・セキュリティ強化
エッジでのリクエスト処理によって、SQLインジェクションやXSSといった攻撃に対する防御を強化できます。また、Workersで独自の認証や認可ロジックを実装することで、より安全なサービスが提供できます。
・エッジキャッシュの最適化
Cloudflareのキャッシュ機能を最大限に活用できるのも、Workersの強みです。キャッシュ制御をカスタマイズすることで、動的コンテンツや頻繁に変更されるデータのキャッシュ制御を最適化できます。
3. 実際の利用シーン
・ページリダイレクト
リクエストのURLを判別し、条件に応じたページにリダイレクトが可能です。キャンペーンページの動的なリダイレクトやA/Bテストなどに応用できます。
・認証機能
特定のページやリソースにアクセス制限をかけるための認証機能を実装することもできます。シングルサインオン（SSO）やJWTベースの認証に対応した認証ゲートウェイを構築可能です。
・サードパーティAPIのプロキシ
サードパーティのAPIを利用する際に、Workersをプロキシとして設定することで、CORSの制御やレスポンスデータの加工ができます。これにより、より柔軟なフロントエンド開発が可能になります。
4. Cloudflare Workersの導入方法
Cloudflare Workersを利用するには、Cloudflareアカウントを作成し、ダッシュボードからWorkersの設定を行います。開発環境では、WranglerというCLIツールを使ってローカルでの開発・テストが可能です。無料プランでも多くの機能を試せるので、まずは小規模なプロジェクトで活用してみましょう。
5. 具体例をご紹介
ユーザーの地域に基づいたコンテンツの出し分け
例：多言語対応サイトで、ユーザーの位置情報をもとに表示言語を自動切り替えしたい場合。Cloudflare Workersを使うことで、ユーザーのリクエストからIPアドレス情報を取得し、地域ごとに適切なコンテンツ（例えば、日本のユーザーには日本語ページ、アメリカのユーザーには英語ページ）を動的に出し分けできます。
addEventListener("fetch", (event) => {
event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
const country = request.headers.get("cf-ipcountry"); // 国情報を取得
if (country === "JP") {
return fetch("https://example.com/ja"); // 日本語ページにリダイレクト
} else {
return fetch("https://example.com/en"); // 英語ページにリダイレクト
}
}
サイト全体でのセキュリティ強化（Bot対策）
例：特定のページ（フォーム送信など）でボットによる不正アクセスを防止したい場合。Cloudflare Workersを使って、ボットと思われるリクエストをフィルタリングし、アクセスを制限できます。
例えば、リクエストヘッダーやIPアドレスをもとに判定を行い、不正と疑われるアクセスをブロックします。
addEventListener("fetch", (event) => {
event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
const userAgent = request.headers.get("User-Agent");
if (userAgent && /bot|spider|crawler/i.test(userAgent)) {
return new Response("Bot access denied", { status: 403 });
}
return fetch(request);
}
IPアドレスによるアクセス制限
例：管理画面や限定ページに特定のIPアドレスからしかアクセスできないように制限したい場合。Workersを使用して、指定されたIPアドレスのみアクセスできるようにフィルタリングを行い、アクセス制限を実装できます。
const ALLOWED_IPS = ["123.123.123.123", "124.124.124.124"];
addEventListener("fetch", (event) => {
event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
const clientIP = request.headers.get("cf-connecting-ip");
if (!ALLOWED_IPS.includes(clientIP)) {
return new Response("Access Denied", { status: 403 });
}
return fetch(request);
}
CORSヘッダーの動的制御
例：APIエンドポイントを開発する際、特定のオリジンからのリクエストのみ許可したい場合。Workersを利用して、動的にCORSヘッダーを設定することで、APIのセキュリティを高め、許可されたオリジンからのみアクセスを許可できます。
addEventListener("fetch", (event) => {
event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
const origin = request.headers.get("Origin");
const allowedOrigins = ["https://example.com", "https://sub.example.com"];
let response = await fetch(request);
if (allowedOrigins.includes(origin)) {
response = new Response(response.body, response);
response.headers.set("Access-Control-Allow-Origin", origin);
}
return response;
}
6. まとめ
Cloudflare Workersは、サーバレスの強みを活かし、ビジネスやプロジェクトのスピードと柔軟性を高められるツールです。APIのプロキシや認証、エッジキャッシュの最適化など、幅広い用途で活躍し、開発者にとってはインフラ管理の負担を軽減しつつ、機能拡張の自由度も確保できます。まずは小さな実装から始め、エッジでのアプリケーション展開に挑戦してみてください。