酢ろぐ!

カレーが嫌いなスマートフォンアプリプログラマのブログ。

Cloudflare R2 で静的サイトを公開する

CloudFront + S3 で https://ch3cooh.net/ をホストしている。このサイトでは単に welcome! としか表示しない。特に何をやっているわけではなく、AdMob で規定されている 「アプリ向けの認定販売者宣言システム(app-ads.txt)」置き場である。そのためできる限りコストを掛けずに運用したい。

ch3cooh.netドメインは先日 AWS Route 53 から Cloudflare へ移管したので、CloudFront + S3で運用している静的サイトも Cloudflare + Worker + R2 に移行することにした。

R2 にバケットを作成して、htmlファイルをアップロードする

バケット名は net-ch3cooh として、S3に置いているファイルをそのまま持ってきた。

このバケットを直接インターネットに公開することは可能であるが、https://ch3cooh.net/ にアクセスするとエラーになってしまう。S3 では / にアクセスすると index.html を表示してくれたのだが……

Cloudflare で、S3でいうところのインデックスドキュメント機能 (/ にアクセスして index.html を表示させる機能) を使うためには Worker を使う必要がある。

本記事では Cloudflare + Worker + R2 で静的サイトを公開する方法を紹介する。

マイアカウントページで API Key を作成する

API Keyを作成する。API Keyは一度しか表示されないので忘れないようにする。

https://ch3cooh.net/ でアクセスしたときの証明書も自動で設定してくれるので「SSL証明書」、指定したドメインにアクセスされたときに Worker を割り当てるために「DNS」の編集権限が必要になるようだ。

Denoflare をインストールする

Denoflare を使って Cloudflare を CLI から操作できる。インストール方法は「CLI · Denoflare」より。

brew install deno
deno install --unstable --allow-read --allow-net --allow-env --allow-run --name denoflare --force \
https://raw.githubusercontent.com/skymethod/denoflare/v0.5.11/cli/cli.ts

/Users/ch3cooh/.zprofile で deno へのパスを通す。

export PATH="/Users/ch3cooh/.deno/bin:$PATH"

ターミナルを起動し直して deno にパスが通っていることを確認する。

Denoflare 経由で Worker を作成する

https://blog.3qe.us/entry/2023/01/15/015921 を参考にして Worker を追加する。

$ denoflare push \
  https://raw.githubusercontent.com/skymethod/denoflare/v0.5.11/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トークン}
  • Workerの名前 は適当に worker-net-ch3cooh とした
  • R2バケット名 は さきほど作成した net-ch3cooh を指定した
  • ドメイン名 は公開したい ch3cooh.net を指定した

また「常にHTTPSを使用」を有効にしておくと、http://ch3cooh.net にアクセスされた場合に Cloudflare側で自動で https://ch3cooh.net にリダイレクトしてくれる。これだけでひとつページルールが節約になるので設定しておくと良い。

以上で、Cloudflare R2 のバケットを静的サイトをして公開することができるようになった。

参考ページ

blog.3qe.us

tks2.co.jp