CloudFront+S3構成だった自分のサイトをCloudflare+R2に移行した

harada
· 6 min read
CloudFront+S3構成だった自分のサイトをCloudflare+R2に移行した

少し前にCloudflareを導入しました。
元々AWS一本でやったほうが管理しやすいよね、という思想でまとめて運用していたのですが、ここ最近独自ドメインの更新料の値上がりがひどく、個人でやっていくうえで大きな死活問題でした。
（べつにNoteとかQiitaとか無料で技術ブログ投稿できる媒体はいくらでもありますが、ひっそりとやりたいので笑）

Route53で2025年7月1日から.netや.comの価格が変わるよ！ - Qiita
こんばんは。 この記事は約1年前に書いたこちらの記事のリメイク版（？）です。 なので本文も大体同じです。 [Notification] Route 53 Domain Pricing Changes [AWS Account: xxxxxxxxxxxx] というメー…
Qiitahollage0214
Route 53 ドメイン費用の変更(2024年4月8日) を調べてみた。 | DevelopersIO
2024年4月8日に予定されているRoute53 ドメインレジストラの価格改定、ドメイン維持費の値上げ状況を調査してみました。
Route 53 ドメイン費用の変更(2024年4月8日) を調べてみた。 | DevelopersIOsuzuki.ryo

Cloudflareはドメインを原価で売りさばくという気合の入った企業精神をお持ちのようなので、このブログのドメインのレジストラ・DNS周りはAWS Route53からCloudflareに乗り換えました。

ドメイン取得は原価販売のCloudflare Registrar一択。安さの秘訣とは | オタク総研
大手インターネット企業・Cloudflareが運営するドメインレジストラ「Cloudflare Registrar」が最もドメイン登録でおすすめできる理由と何故安く販売できるかを紹介する。 利点と料金…
オタク総研Yoshioka

で、せっかくCloudflareを使うのだったら色々移せるものは移してよいかなと思ったので、この個人ブログに関してもCloudflareで稼働させようー！と思った次第です。
近年は新サービスを続々と発表していて、インターネット界の雄の地位を確立している印象もあります。

【クラウドフレアの凄さを徹底解剖】　インターネットの見えないヒーロー「Cloudflare」はだから凄い！｜秦孝秀 takahide hata
🌀 はじめに：見えない戦いの最前線 普段私たちは、スマホでYouTubeを見たり、LINEでメッセージを送ったり、オンラインゲームを楽しんだりしています。 でもその裏側では「インターネットをどう速くするか」「どう安全に守るか」という目に見えない戦いが続いています。 そしてその最前線に立ち、世界中で注目されているのが Cloudflare（クラウドフレア） です。 でもただ「速い」「安全」だけなら、AkamaiやFastly、AWS CloudFrontといった競合もやっています。 では、なぜCloudflareだけが「すごい」と言われるのでしょうか？ この記事では、なるべくわかりや
note（ノート）秦孝秀 takahide hata

このブログについて

このブログは2017年頃からAWS S3 + Cloudfrontのサーバレス構成を採用しています。（長いな、、）

Wordpressを静的webサイトに変換してS3でホストする
自己啓発の発表用として建てたこのWordpressが、もうすぐ1年経つそうです。 しかし当初は自宅サーバで動かしていたものが、安定性を求めVPSに移行してしまい その分の料金が毎月かかってしまうという負担になっていました。 なので今あるコンテンツを全て静的ファイルに変換して S3上でホスティングできる様にいじってしまおうというのが今回の目的です。 1.概要 ・EC2上にWordpressを構築。記事の更新は基本こちらで行う ・WordPressは記事を更新するだけなので、サーバスペックは最低限でOK ・「StaticPress」というプラグインを使うと、Wordpressを静的コンテンツに変換してくれます 更に「StaticPress S3」を使うと、変換した静的コンテンツをS3上にアップロードしてくれます ・S3はホスティング機能を有効にして、Route53でドメインをS3に向ければWEBに公開できちゃう てな具合でかんたーんなんです。 いいところ ・サーバーのメンテナンスが不要。脆弱性の心配とかいらない ・抜
Harada's Diaryharada

これをそのままCloudflare R2 + Cloudflare Workersに移行することが目標です。
Cloudflare R2はS3互換のオブジェクトストレージサービスですが、10GBまで無料ストレージなのとエグレス料金ゼロという抜群のコストメリットがあります。
また、awscliなどもそのまま使うこともできるので学習コストが抑えられますね。

Cloudflare R2 で 10GB まで無料のストレージを使おう！しかも Amazon S3 と同じツールで操作可能！ - Qiita
はじめに Cloudflare R2 はオブジェクトストレージのクラウドサービスです ざっくり言うと、ファイルをクラウドに保管できます 10 GB までは無料で利用可能です そして嬉しいのが Amazon S3 と互換性があると言うこと AWS CLI はもち…
QiitaRyoWakabayashi

なおCloudflare Pagesというサービスもありますが、現在は非推奨らしいので、Cloudflare Workersを採用しました。

S3 -> R2への移行について

まずはS3バケットにあるデータ郡をR2ストレージに移します。
Cloudflare公式でR2 Super Slurperというデータ移行ツールが用意されていました。
さすがはCloudflare、抜かりないですね。。。

Super Slurper
Super Slurper allows you to quickly and easily copy objects from other cloud providers to an R2 bucket of your choice.
Cloudflare Docs

ツールの利用には色々条件がある模様。
例えば以下の条件だと使えないみたい

  • 単体のファイルサイズが50GB以上のもの
  • Glacier Instant Retrievalを除くS3 Glacierクラスのファイル
  • S3 Intelligent Tiering を使用していてDeepArchiveクラスに配置されたファイル

なお、利用にはAWSとCloudflareそれぞれAPI Tokenの発行が必要です。
このへんは公式ドキュメント見たらなんとなくわかりました。

  • 対象S3バケットのリソースを取得できるAWS IAMユーザーのアクセスキーの発行
  • Cloudflare R2の移行先バケットに編集権限を持つAPIトークンの発行

移行も特に躓くことなく終わりました。

オブジェクト数にも左右されると思いますが、私の環境はそんなに容量なかったので３分ほどで完了してました。

Cloudflare workersの作成

Workersの作成はこのへんを参考にしました

Cloudflare R2 を利用した静的サイトの構築 - 株式会社TKS2
株式会社TKS2は、AIを活用した革新的な開発体制で、お客様のビジネス成功を導くITシステム開発・技術コンサルティング企業です。
株式会社TKS2tks2
Workers の作成は CLI ツールである denoflare を利用します。
EC2に入れましたが、公式ドキュメント通りやればいけました。
curl -fsSL https://deno.land/install.sh | sh
deno install --global -A --unstable-worker-options --name denoflare --force \
https://raw.githubusercontent.com/skymethod/denoflare/v0.7.0/cli/cli.ts

Cloudflare API tokenの発行がちょい躓いた。
API Keyのページに移動して、必要なロールは以下で設定すればよいらしい

Workersデプロイのコマンドは以下。公式サイトに最新のリリース書いてあるので、そっちを参考にしたほうがよいと思われ。

denoflare push https://raw.githubusercontent.com/skymethod/denoflare/v0.7.0/examples/r2-public-read-worker/worker.ts \
  --name ${Workerの名前} \
  --r2-bucket-binding bucket:${R2バケット名} \
  --text-binding flags:listDirectories,emulatePages \
  --text-binding 'allowCorsOrigins:*' \
  --custom-domain ${ドメイン} \
  --account-id ${アカウントID} \
  --api-token ${APIトークン}
R2 Public Read · Denoflare
Easily make your R2 bucket publicly-readable on your own domain.

ドメインは公開したいドメインを指定
アカウントIDはCloudflareのホームから参照できる

ちなみに emulatePagesというフラグを付けることで、/へのアクセスは自動的に/index.htmlに変換されるようになるので、つけるのを忘れずに。

完了

これだけでカスタムドメインで静的ファイルを配信できるようになった。CloudflareがSSL証明書としてLet's Encryptのものを自動的に用意してくれるので、こちら側で設定する必要はない。本当にファイルとドメインがあればウェブサイトをホストできる。

あと静的データのデプロイはJenkinsでやってるんだけど、エクスポート先がS3になっているので、R2ストレージにすればよいかな。
まぁよしなに。

API tokenの管理だけしっかりしときましょうね～～～