この記事を見て、ええやん無料枠で色々やれるし試してみよう!と思ったので試してみた
(ほぼ書いてくださっているとおりに進めたらできたのであまり書くことはない。神。)
サイトを見ながらやったこと
- cloudflare登録して
- r2を使えるようにして
- 2022/05時点ではr2のページから進んでいくとクレカ登録が通らなかった
- 設定画面から先にクレカを登録しておくことで解決
- wranglerをインストールして
- 画面で案内があるので特に詰まるところはないと思う
- bucketを作って
- workerを作成して
- https://github.com/yusukebe/r2-image-worker を使うと爆速
- ↑のREADMEにもあるがKVも作成
- これで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