Harada's Diary

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

Learning

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

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

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

このブログについて

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

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

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

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

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

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

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

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

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

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

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

Cloudflare workersの作成

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

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トークン}

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

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

完了

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

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

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

Categories