はじめに
とある案件で「フロントにJSタグを1行入れるだけで使えるCDN配信システム」が必要になりました。
加えて「契約ユーザーだけが利用できるようにしたい」という要件もあり、ドメイン制御機能の実装が求められることに。
そこで今回は、Cloudflare PagesとWorkersを組み合わせて
ドメイン制御付きのCDN配信システムを構築しました。
その手順をまとめます💡
前提
今回の配信対象は静的アセットです。
（例：CSS / JS / 設定ファイル など）
システム要件は以下のとおり：
- フロント側ではJSタグを1行読み込むだけで利用できること
- 配信は 許可したドメインのみに制限できること
システム構成図
ディレクトリ構成
ディレクトリはこんな感じ👇
root
├── public
│ ├── assets
│ │ ├── css
│ │ │ └── style.css
│ │ └── js
│ │ └── app.js
│ └── settings
│ └── config.json
├── README.md
└── workers
└── プロジェクト名
├── src
│ └── worker.js
└── wrangler.toml
やったこと
構築フローはざっくり以下のとおりです。
- Cloudflare PagesとGitHubの連携
- GitHubリポジトリをPagesに接続
- オートデプロイ&CDN配信機能を利用
- 静的ファイルの配置
-
public配下にCSS / JS / 設定ファイルを格納 - Pages側で自動的にビルド&配信
-
- Workersをプロキシとして利用
- フロントではWorkersのエンドポイントを読み込むだけで利用可能
- Workers経由でPagesの静的ファイルを間接的に配信
- ドメイン制御の実装
- Workers側で許可ドメインのリストを定義
- 許可外ドメインからのアクセスは
403 Forbiddenを返却
worker.js のサンプルコード
const allowedDomains = JSON.parse(env.ALLOWED_DOMAINS || "[]");
const refererHost = new URL(request.headers.get("Referer") || "").hostname;
const isAllowed = allowedDomains.some(
(domain) => refererHost === domain || refererHost.endsWith("." + domain)
);
if (!isAllowed) {
return new Response("Access denied: Unauthorized domain", { status: 403 });
}
const targetURL = `${env.PAGES_BASE_URL}${new URL(request.url).pathname}`;
const res = await fetch(targetURL, { method: request.method, headers: request.headers });
return res;
- ALLOWED_DOMAINS の読み込み
環境変数から許可されたドメインリストを取得して配列化 - Referer ヘッダーの確認
リクエスト元（呼び出し側）のホスト名を取り出す - ドメインチェック
許可リストと突き合わせて、含まれていなければ403 Forbiddenを返す - Proxy動作
問題なければPAGES_BASE_URL（Cloudflare Pages側のURL）にリクエストを流し、静的ファイルを取得して返す
wrangler.toml のサンプルコード
[vars]
ALLOWED_DOMAINS = """
[
"example.com",
"example.org"
]"""
PAGES_BASE_URL = "https://プロジェクト名.pages.dev" # 各プロジェクトのPages URLに置き換え
-
ALLOWED_DOMAINS→ 許可するドメインのリスト -
PAGES_BASE_URL→ Cloudflare Pages が発行するURL
⚠️ 実際のwrangler.toml 全文は Wrangler公式ドキュメントを参照
フロントでの使い方
フロント側では、WorkersのURLを読み込むだけでOK。
<script src="https://ワーカー名.workers.dev/assets/js/app.js"></script>
これで
✅ CDN配信
✅ ドメイン制御（許可されたドメインのみ）
が有効になります💪
参考リンク
Workersのデプロイにはwrangler CLIを利用しています。
セットアップ方法については公式ドキュメント、または以下の参考記事が分かりやすいです。
まとめ
今回、Cloudflare PagesとWorkersを組み合わせることで、ドメイン制御付きのCDN配信システムを構築することができました。
Cloudflareのおかげで、
- Pagesに静的ファイルを置くだけで簡単にCDN配信できる
- Workersを挟むことでアクセス制御などの機能を柔軟に追加できる
といった仕組みが思ったよりシンプルに実現できて、「こんなに手軽にできるのか！？」と実感しました。
同じように「契約ユーザー専用の配信システムを作りたい」という要件がある方には、この構成はかなりおすすめです！