はじめに

とある案件で「フロントに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を挟むことでアクセス制御などの機能を柔軟に追加できる

といった仕組みが思ったよりシンプルに実現できて、「こんなに手軽にできるのか！？」と実感しました。
同じように「契約ユーザー専用の配信システムを作りたい」という要件がある方には、この構成はかなりおすすめです！