ortの灰ログ

人狼のことや技術のことや日々雑感

Cloudflare r2試してみる備忘録

yusukebe.com

この記事を見て、ええやん無料枠で色々やれるし試してみよう!と思ったので試してみた
(ほぼ書いてくださっているとおりに進めたらできたのであまり書くことはない。神。)

サイトを見ながらやったこと

  • cloudflare登録して
  • r2を使えるようにして
    • 2022/05時点ではr2のページから進んでいくとクレカ登録が通らなかった
    • 設定画面から先にクレカを登録しておくことで解決
  • wranglerをインストールして
    • 画面で案内があるので特に詰まるところはないと思う
  • bucketを作って
  • workerを作成して
  • これでworker経由でr2に画像アップロード/表示する準備が整ったはず

以下は、それ以外にやってみたことを記載

Webアプリケーションから画像アップロードしてみる

Nuxt3からアップロードしてみる
こんな感じにすればアップロードできた
(inputまわりは省略、Nuxtあまり関係ないかも)

export const upload = async (imageFile: File): string => {
  const reader = new FileReader()
  reader.readAsDataURL(imageFile)
  await new Promise<void>((resolve) => (reader.onload = () => resolve()))
  // data:${mimeType};base64,${base64EncodedFile} が得られる
  const dataurl = reader.result as string
  const res = await useFetch(
    `${worker_base_url}/upload`,
    {
      method: 'PUT',
      body: {
        // base64部分のみを抽出
        body: dataurl.replace(/data:.*\/.*;base64,/, '')
      }
    }
  )
  const path = (res.data as Ref<string>).value
  return `${worker_base_url}/${path}`
}

ただしこれでlocalhostからアップロードするとCORSエラーとなるので、

worker側でCORS許可

workerのindex.tsに以下を追加する

app.use('*', cors())

https://github.com/honojs/hono を利用しているので簡単に設定できた
ローカルで試したので全許可しているが、本番で利用するときは↓あたりを参考にして調整すれば良さそう

github.com
https://developers.cloudflare.com/workers/examples/cors-header-proxy/

要はOPTIONSのリクエストで 'Access-Control-Allow-Origin': '*' になっているので
本番環境のドメインにしてあげれば良いはず。

おまけ

無料枠がかなり大きいので個人サイトなら十分使い倒せるのではないかと思う
2022/05時点でざっくり以下のようになっていた

R2

  • 10GB
  • 更新系1,000,000回/月
  • 取得系10,000,000回/月

worker