CloudFront + S3 で https://ch3cooh.net/
をホストしている。このサイトでは単に welcome! としか表示しない。特に何をやっているわけではなく、AdMob で規定されている 「アプリ向けの認定販売者宣言システム(app-ads.txt)」置き場である。そのためできる限りコストを掛けずに運用したい。
ch3cooh.net
ドメインは先日 AWS Route 53 から Cloudflare へ移管したので、CloudFront + S3で運用している静的サイトも Cloudflare + Worker + R2 に移行することにした。
- R2 にバケットを作成して、htmlファイルをアップロードする
- マイアカウントページで API Key を作成する
- Denoflare をインストールする
- Denoflare 経由で Worker を作成する
- 参考ページ
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 のバケットを静的サイトをして公開することができるようになった。