はじめに
Cloudflare Meet-up Tokyo Vol.9のLTで発表した内容をベースに、実装の詳細を加えてまとめたものです。
- LT時の資料
先日、技術書典19でOCIの本を共同執筆して頒布したんですが、その宣伝もかねてサンプルサイトを作りたい！と思ったのがきっかけです。
- 【宣伝】AWS経験者が秒で理解する Oracle Cloud 爆速構築バイブル【宣伝】
※現在、下記サイトからは電子版のみ購入可
- サンプルページ（Cloudflare - OCI構成）
実は... OCIにはCDNサービスがないんですよね...
そこで、CloudflareとOCIを組み合わせて実装してみたら、めちゃくちゃ良い構成ができたので紹介します！
OCIの課題：CDNがない
他のクラウドと比較してみると：
| クラウド | CDN |
|---|---|
| AWS | Amazon CloudFront |
| Azure | Azure CDN |
| Google Cloud | Cloud CDN |
| OCI | ❌ なし |
どうすればいいの...？って思いますよね。
解決策：Cloudflareとの提携！
実は、OCIとCloudflareは提携関係にあります！
Bandwidth Alliance
- 2021年11月にOCIが参加
- OCI Object StorageからのEgress料金が無料
OCIにCDNがなくても大丈夫！
これがOCIの戦略なんですね。自前で全て作るのではなく、協力関係を築く。
| クラウド | CDN戦略 |
|---|---|
| AWS | CloudFront（自前） |
| Azure | Azure CDN（自前） |
| Google Cloud | Cloud CDN（自前） |
| OCI | Cloudflareと提携 ⭕️ |
個人的には、この戦略はOCIの強みになると考えています。
CloudflareとOCIの組み合わせの利点
1. コスト削減
- Bandwidth Alliance: Object Storage直接なら転送料無料
- OCIはOutbound転送量が月10TBまで無料
- 組み合わせ次第で大幅なコスト削減
2. パフォーマンス向上
- Cloudflareの世界中のエッジネットワーク活用
- レイテンシ削減
3. セキュリティ強化
- DDoS保護、WAF、Bot軽減
- Cloudflareの強力なセキュリティ機能
実装：Cloudflare Workers + OCI連携
アーキテクチャ
ユーザー
↓
Cloudflare Workers（プロキシ + キャッシュ + アクセス制御）
↓
OCI Flexible Load Balancer
↓
Container Instances（nginx）
↓
Object Storage（PAR経由でPDF配信）
各コンポーネントの役割
Cloudflare Workers（フロント）
- エッジでのリバースプロキシ
- 世界中のエッジでキャッシュ
- Refererチェックでアクセス制御
OCI Load Balancer
- Container Instancesの前段に配置
- ヘルスチェック
OCI Container Instances
- nginxでプロキシ・配信
- サーバーレスでコンテナ起動
- スケーラブルな構成
OCI Object Storage
- プライベートバケットにPDFを保存
技術的なポイント
1. Refererチェック
PDF URLへの直接アクセスをブロックする仕組みを実装しました。
export default {
async fetch(request, env) {
const referer = request.headers.get('Referer');
// Refererチェック
if (!referer || !referer.includes('samplepdf.araidon.com')) {
return new Response('403 Forbidden', { status: 403 });
}
// プロキシ処理...
}
}
動作
- PDF をブラウザで直接開く → ブロック
- Workers経由でのアクセス → 許可
簡単な実装ですが、基本的なアクセス制御として有効です。
2.エッジキャッシュ
Workersでキャッシュを実装して、OCIへのリクエストを大幅に削減しました。
const cache = caches.default;
const cacheKey = new Request(url, request);
// キャッシュチェック
let response = await cache.match(cacheKey);
if (response) {
// キャッシュHIT - エッジから即座に返す
console.log('Cache HIT');
return response;
}
// キャッシュMISS - OCIから取得
console.log('Cache MISS - fetching from OCI');
response = await fetch(backendUrl);
response = await fetch(backendUrl, {
method: request.method,
headers: {
'User-Agent': request.headers.get('User-Agent') || 'Cloudflare-Workers',
},
}
// キャッシュに保存（24時間）
const responseToCache = response.clone();
await cache.put(cacheKey, responseToCache);
return response;
※コードサンプルで実際にはもう少し複雑な処理を実施してます。
効果
- 世界中のエッジでキャッシュ
- 2回目以降のアクセスは超高速
- OCIへのリクエストを大幅に削減（コスト削減！）
③：PAR活用
Object StorageのPAR（事前認証済みリクエスト）を活用しました。
PARとは？
- Object Storageをプライベートに保持
- 一時的なアクセスURLを発行
- 有効期限や権限を細かく制御可能
nginx経由でプロキシ
Container Instances上のnginxで、PARを使ってObject Storageにプロキシしています。
location /pdf/ {
proxy_pass https://objectstorage.ap-tokyo-1.oraclecloud.com/p/{PAR-TOKEN}/n/{namespace}/b/{bucket}/o/;
proxy_set_header Host objectstorage.ap-tokyo-1.oraclecloud.com;
proxy_ssl_server_name on;
}
PDFへの直接アクセスを防ぎ、nginx経由でのみ配信する仕組みです。
この構成の効果とコスト
1. エッジキャッシュでコスト削減
- Workersで大半のリクエストをキャッシュ
- OCIへのリクエストが大幅に削減
- 2回目以降はエッジから即座に配信
2. Bandwidth Allianceについて
重要な注意点：今回の構成、Cloudfrare と Container Instances経由は 無償対象外です！
- Cloudflare → Object Storage : 無料
- Cloudflare → Container Instances : 対象外
今回の構成ではContainer Instancesを経由しているため、Bandwidth Allianceの対象外です。
ただし、OCIには月10TB無料枠（標準）があるので、小〜中規模のサイトなら問題ありません。
2. 実際のコスト
- Workers: 無料枠内（月100,000リクエスト）
- Egress: OCIの無料枠内（月10TB）
- Container Instances: 約$10-15/月（常時起動の場合）
今回の構成、Cloudfrare と Container Instances経由は 無償対象外です！
- Cloudflare → Object Storage : 無料
- Cloudflare → Container Instances : 有償（Bandwidth Alliance 対象外）
ただし、OCIには月10TB無料枠（標準）があるので、小〜中規模のサイトなら実質無償です。
まとめ
CloudflareとOCIの組み合わせ、最高です！
OCIにCDNがないことは課題ではなく、Cloudflareとの協力関係によって、むしろ強力な構成を実現できると感じました。
今回作成したサンプルPDFビューアーは、技術書典の本の宣伝サイトとして実際に稼働中です。
みなさんもぜひ、CloudflareとOCIの組み合わせを試してみてください！
それでは良い Cloudflare × OCIライフを！