Cloudflare と OCIで作る！ 試し読みWebアプリの爆速構築
-- Views
December 10, 25
スライド概要
Cloudflare Meet-up Tokyo Vol.9 にてLTさせてもらった、
Cloudflare と OCIでサイト作った話です。
Cloudflare x OCI はいいぞ！
関連スライド
Meta XR SDK(V66-74)でQuestアプリを開発
あうぜん
1.1M
各ページのテキスト
Cloudflare と OCIで作る！ 試し読み Webアプリの爆速構築 自著の宣伝サイトを作ってみた Cloudflare Meet-upTokyo Vol.9 2025/12/10 Co-Engineer Club 山田 俊一 / 新井 健一
自己紹介 山田 俊一 (Shunichi Yamada) @yama6 Fav Game: Pokemon 所属: Co-Engineer Club 普段はOCI(Oracle Cloud)のプリセールス 最近の活動 : 技術書典にて、技術書を共著で自費出版しました 新井 健一 (Kenichi Arai) @araidon Fav Game: Street Fighter 6
技術書典 19にて頒布 AWS経験者が秒で理解する Oracle Cloud 爆速構築バイブル AWSの知識をベースに、OCIの概念を最速でマッピン グするための実践的なガイドブックです。 今回はこの本の魅力を伝えるため、Webサイトを 作ることにしました。
自著の宣伝サイトを作りたい 「試し読み」機能 Kindleのサンプルのように、ブラウザ上で数ページだ け読める体験を提供したい。 ただのLPではなく、少しリッチなWebアプリケーションと して実装することを目指しました。
OCI と Cloudflare の「特別な関係」 • 他社クラウド (AWS / Azure / GCP) 自前のCDNサービスを持ち、エコシステム内で完 結。 • OCI (Oracle Cloud) 自前のCDNを持っていません。 • その代わり ... Cloudflareとパートナーシップを結んでいます。 最大のメリットは Egress (転送料) の安さ です。 https://www.cloudflare.com/ja-jp/bandwidth-alliance/
実際にやってみた 爆速デプロイ Cloudflare Pagesを使ってみたところ、 設定は一瞬、デプロイは爆速。 完結してしまった これだけでWebサイトが公開できてしまいました。「す ごい...」と同時にある感情が。 「あれ、 OCIいらないのでは ...？」
それでも OCI と連携したい！ 「OCIのプリセールスとして、意地でも OCIと連携した実績を作りたい！」 Frontend: Cloudflare Workers (高速配信) Backend: OCI Container Instances + Object Storage OCIをオリジンとして構成し、CloudflareのCDNを活用する「適材適所」な構成としました
技術的な実装詳細 WorkersのJavaScriptファイルにて以下実装 ・エッジでのキャッシュ実装 ・Refererチェックによる、 PDFへの直接アクセスのブロック OCIにて以下実装 ・OCI Object StorageのPAR（事前認証済みリクエスト） によるセキュアにアクセス制限 Cloudflare Workers とOCIを活用することで、 高速化・コスト削減（ Egress安価）・セキュア を同時に実現
まとめ： Cloudflare x OCI はいいぞ OCIにはCDNがない。だからこそCloudflareとのパートナーシップが輝きます。 Cloudflareの最高なDev体験と、OCIの堅牢なバックエンドを組み合わせることで、「適材 適所」なアーキテクチャが実現できます。
実際にやってみた (Cloudflare Pages) 爆速デプロイ Cloudflare Pagesを使ってみたところ、設定は一瞬、 デプロイは爆速。 完結してしまった これだけでWebサイトが公開できてしまいました。「す ごい...」と同時にある感情が。 「あれ、 OCIいらないのでは ...？」