Cloudflare R2 とは

公式ブログを読むべし

denoflare とは

skymethod/denoflare: Develop, test, and deploy Cloudflare Workers with Deno.

Overview · Denoflare

Develop, test, and deploy Cloudflare Workers with Deno

Denoflare is still under active initial development (pre 1.0), but is completely open-source and can be used as is.

denoflare インストール

macOS で確認します。

% defaults read loginwindow SystemVersionStampAsString
12.4

最初に v0.5.1 をインストールしようとするとエラーになったので、v0.5.1 の前に v0.3.2 をインストールすると問題なく完了しました。

% deno install --unstable --allow-read --allow-net --allow-env --allow-run --name denoflare --force \
https://raw.githubusercontent.com/skymethod/denoflare/v0.3.2/cli/cli.ts
✅ Successfully installed denoflare
/Users/kyouhei/.deno/bin/denoflare
ℹ️  Add /Users/kyouhei/.deno/bin to PATH
    export PATH="/Users/kyouhei/.deno/bin:$PATH"
    
% deno install --unstable --allow-read --allow-net --allow-env --allow-run --name denoflare --force \
https://raw.githubusercontent.com/skymethod/denoflare/v0.5.1/cli/cli.ts
Check https://raw.githubusercontent.com/skymethod/denoflare/v0.5.1/cli/cli.ts
✅ Successfully installed denoflare
/Users/kyouhei/.deno/bin/denoflare

インストールが完了し、コマンド実行できることを確認します。

% denoflare version                                                                                  
0.5.1
% denoflare --help 
denoflare 0.5.1

USAGE:
    denoflare <command> <args> <options>

COMMANDS:
    serve      Run a Cloudflare worker script in a local Deno web server
    push       Upload a Cloudflare worker script to Cloudflare
    tail       View a real-time stream of logs from a published Cloudflare worker
    site       Develop and deploy a static docs site to Cloudflare Pages
    analytics  Dump stats via the Cloudflare GraphQL Analytics API
    cfapi      Call the Cloudflare REST API
    r2         Manage Cloudflare R2 storage using the S3 compatibility API
    version    Dump cli version

For command-specific help: denoflare <command> --help

事前準備ガイド

R2 Public Read · Denoflare に沿って進めます。

Cloudflare アカウント - https://dash.cloudflare.com/sign-up
ドメインセットアップ - カスタムドメインに必要
R2 有効化 - 支払い方法の設定が必要
- 10 GB / 月の無料枠があるので、すぐには課金される心配はない

https://developers.cloudflare.com/r2/platform/pricing/

R2 バケット作成

ダッシュボードで作成します。

API トークン作成

https://dash.cloudflare.com/profile/api-tokens から API トークンを作成します。

「Edit Cloudflare Workers」のテンプレートを使います。

カスタムドメイン利用に必要な以下の権限を追加します。

その後、API トークンが発行されますが、一度しか表示されないため、メモします。

カスタムドメインで公開

変数を確認し、セットします。

export ACCOUNT_ID='YOUR_ACCOUNT_ID'
export MY_DOMAIN='YOUR_DOMAIN_NAME'
export MY_BUCKET='YOUR_BUCKET_NAME'
export API_TOKEN='YOUR_API_TOKEN'

以下のコマンドで push するだけで、Workers と R2 が Binding され、カスタムドメイン適用の上で公開されます。

設定を修正したい場合は、flags 等を変更して再度 push すれば、反映されます。

denoflare push https://raw.githubusercontent.com/skymethod/denoflare/v0.5.1/examples/r2-public-read-worker/worker.ts \
   --name ${MY_BUCKET}-public-read \
   --r2-bucket-binding bucket:${MY_BUCKET} \
   --text-binding flags:listDirectories \
   --custom-domain ${MY_BUCKET}.${MY_DOMAIN} \
   --account-id ${ACCOUNT_ID} \
   --api-token ${API_TOKEN}

以下のログ表示が確認できます。

bundling xxx-public-read into bundle.js...
bundle finished (process) in 557ms
computed bindings in 1ms
putting module-based worker xxx-public-read... (12.8kb) (3.8kb compressed)
put script xxx-public-read in 1725ms
ensuring xxx.example.com points to xxx-public-read...
bound worker to custom domain in 502ms

https://${MY_BUCKET}.${MY_DOMAIN} にアクセスすると、ディレクトリリスティングのページが確認できます。

画像もアクセスして確認できました。

まとめ

いわゆる Route 53 + CloudFront + S3 と同等の構成を Cloudflare でも実現できました。

しかも無料でここまで構成できるので、誰でも体験できるようになっています。

さらには Cloudflare Access を使って認証を設定したり、Firewall Rules で国別アクセス制御を設定できます。
（denoflare の Workers スクリプト内で IP アクセス制御等を行うこともできますが、Cloudflare の機能を使って制御するのもおすすめです。）

Cloudflare R2 を Open Beta のうちから触っておくと、色々と想像が膨らませられそうです。

denoflare で Cloudflare R2 をカスタムドメイン公開する