技術的なことはまったくわからねーが Cloudflare Worker ってのをさわんねーといけね

Cloudflare R2 ってとこにファイルを置けば簡単に静的ウェブサイトができるってんでやってみたら, /にアクセスしてもindex.htmlが公開されないということが分かった. https://example.com ではページは見られなくて, https://example.com/index.html と指定しないといけないわけだ. やってみるまでわからなかったからまあ勉強になったよね.

どうするかというと Cloudflare Worker ってやつを噛ませるようだ. その設定は denoflare ってプログラムでやるといい感じになるらしくって, その denoflare をインストールするためには deno ってプログラムが必要だって話だ. これだけでめんどうな匂いがするよね.

  • ここまででだいぶ舐めてたことがおわかりいただけると思う

Easily make your R2 bucket publicly-readable on your own domain

自分は macOS なんで deno は homebrew でインストールするよ.

  • こんな感じでインストールしたけれど エラーで躓いてしまった.
# homebrew で deno をインストール
# https://denoflare.dev/cli/#installation
# https://docs.deno.com/runtime/getting_started/installation/#download-and-install
brew install deno

# deno で denoflare をインストール
# https://denoflare.dev/cli/#installation
deno install --unstable-worker-options --allow-read --allow-net --allow-env --allow-run --name denoflare --force https://raw.githubusercontent.com/skymethod/denoflare/v0.6.0/cli/cli.ts
# error: the following required arguments were not provided:
#   --global
# Note: Permission flags can only be used in a global setting

# --global フラグをつけて再度インストール
deno install --global --unstable-worker-options --allow-read --allow-net --allow-env --allow-run --name denoflare --force https://raw.githubusercontent.com/skymethod/denoflare/v0.6.0/cli/cli.ts

# cloudflare の ウェブ管理画面で受け入れ準備を済ませて denoflare で設定を cloudflare に push する
# https://denoflare.dev/examples/r2-public-read
denoflare push 'https://raw.githubusercontent.com/skymethod/denoflare/v0.6.0/examples/r2-public-read-worker/worker.ts' \
 --name ${MY_BUCKET}-public-read \
   --r2-bucket-binding bucket:"${MY_BUCKET}" \
 --text-binding flags:listDirectories,emulatePages \
 --text-binding 'allowCorsOrigins:\*' \
 --custom-domain "${MY_SUBDOMAIN}" \
 --account-id "${ACCOUNT_ID}" \
 --api-token "${API_TOKEN}"
# bundling memo-public-read into bundle.js...
# TS0: error: unexpected argument 'https://raw.githubusercontent.com/skymethod/denoflare/v0.6.0/examples/r2-public-read-worker/worker.ts' found
# Usage: deno bundle [OPTIONS]
#   at undefined:
# error: Uncaught (in promise) Error: bundle failed
#         throw new Error('bundle failed');
#               ^
#     at bundle (https://raw.githubusercontent.com/skymethod/denoflare/v0.6.0/cli/bundle.ts:108:15)
#     at eventLoopTick (ext:core/01_core.js:177:7)
#     at async buildAndPutScript (https://raw.githubusercontent.com/skymethod/denoflare/v0.6.0/cli/cli_push.ts:57:28)
#     at async Object.push [as handler] (https://raw.githubusercontent.com/skymethod/denoflare/v0.6.0/cli/cli_push.ts:124:5)
#     at async CliCommand.routeSubcommand (https://raw.githubusercontent.com/skymethod/denoflare/v0.6.0/cli/cli_command.ts:104:13)
#     at async https://raw.githubusercontent.com/skymethod/denoflare/v0.6.0/cli/cli.ts:41:5
  • インストールしたプログラムのそれぞれのバージョンをチェックする
denoflare version
# 0.6.0
deno --version
# deno 2.2.4 (stable, release, aarch64-apple-darwin)
# v8 13.4.114.11-rusty
# typescript 5.7.3
  • deno と denoflare のバージョンのミスマッチが怪しいので, deno のバージョンを 1.x 系にバージョンを落とせないか調べる. asdf ってのがあるんだ… くぁwせdrftgyふじこlp リスペクトでしょ.
deno uninstall denoflare
brew uninstall deno

# https://docs.deno.com/runtime/getting_started/installation/#download-and-install
brew install asdf
asdf plugin add deno
# deno の1.x系のバージョンを調べる
asdf list all deno
asdf install deno 1.46.3
asdf set deno 1.46.3
asdf current deno
# Name Version Source Installed
# deno 1.46.3 /Users/me/.tool-versions true
  • deno 1.x 系で再度 push する
deno
# zsh: command not found: deno

# asdf.sh を shell の rc に登録する? 面倒だったので手動で読み込みした.
source /opt/homebrew/opt/asdf/libexec/asdf.sh

# もう一度
deno install --global --unstable-worker-options --allow-read --allow-net --allow-env --allow-run --name denoflare --force https://raw.githubusercontent.com/skymethod/denoflare/v0.6.0/cli/cli.ts

denoflare
# zsh: command not found: denoflare

# PATH に登録する? 面倒だったので絶対パスを指定した.
/Users/me/.asdf/installs/deno/1.46.3/.deno/bin/denoflare push https://raw.githubusercontent.com/skymethod/denoflare/v0.6.0/examples/r2-public-read-worker/worker.ts \
    --name ${MY_BUCKET}-public-read \
    --r2-bucket-binding bucket:"${MY_BUCKET}" \
    --text-binding flags:listDirectories,emulatePages \
    --text-binding 'allowCorsOrigins:\*' \
    --custom-domain "${MY_SUBDOMAIN}" \
    --account-id "${ACCOUNT_ID}" \
    --api-token "${API_TOKEN}"

# bundling memo-public-read into bundle.js...
# bundle finished (process) in 752ms
# computed bindings in 1ms
# putting module-based worker memo-public-read... (14.6kb) (4.2kb compressed)
# put script memo-public-read in 2236ms
# ensuring memo.montaworks.com points to memo-public-read...
# bound worker to custom domain in 776ms

できた…けど, たぶん一度限りの作業だと思う

とても面倒だったので, そのうちCloudflareの設定画面で簡単にできるようになるのではないかな?

ちょいと拝借してトラブルになるのはよくある話

しょーがないよね. today is not the day.