【Cloudflare】@aws-sdk/client-s3を利用して、R2に画像をアップロードする [Techblog#6]

Cloudflare R2 は AWS S3 の API と互換性を持っているので、npm 配布の AWS SDK で画像をアップロードしてみます

R2 からは 300MB を超えるファイルはアップロードできませんが、これを利用すればその制限も回避できると思います

Cloudflare R2 APIトークンの発行

まずは、CloudflareのR2管理ページに移動し、API トークンを発行します

R2 を選択した後、バケット一覧にある R2 API トークンの管理 をクリックします

さらに右上にある APIトークンを作成する という青のボタンをクリックし、適切な設定を行います

これらの設定は、トークン発行後でも変更できます

設定が完了したら、必要なAPIトークンをコピーしておきます (ページを閉じると二度と表示されないので注意)

利用するのは以下の3つです

アップロードスクリプトの実装

トークンの発行が終わったら、適当なディレクトリを作って @aws-sdk/client-s3 と tsx をインストールします

npm i @aws-sdk/client-s3 tsx

次に、適当な.tsファイルを作成して、以下のように記述します (ここでは example.ts として作成しました)

先ほどコピーした認証情報を各々代入します。Web 上にアップロードする場合は、環境変数等に代入すると良いと思います

import fs from 'fs'import path from 'path'
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3'
const ACCESS_KEY_ID = process.env.ACCESS_KEY_ID || ''  // アクセスキーIDconst ACCESS_KEY_SECRET = process.env.ACCESS_KEY_SECRET || ''  // シークレットアクセスキーconst ENDPOINT = process.env.ENDPOINT || ''  // エンドポイント

続けて、画像を読み込んでアップロードしてみます。画像自体はバイナリで Body に指定します

const S3 = new S3Client({  region: 'auto',  endpoint: ENDPOINT,  credentials: {    accessKeyId: ACCESS_KEY_ID,    secretAccessKey: ACCESS_KEY_SECRET,  },})
await S3.send(new PutObjectCommand({  Bucket: 'cats',  // catsバケットを指定  Key: 'hoge/fuga.png',  // R2上ではhogeディレクトリ下のfuga.pngのような表示になる  Body: fs.readFileSync(path.resolve(__dirname, 'cat.png')),  // example.tsと同じ位置にあるcat.pngをアップロード  ContentType: 'image/png',}))

base64形式になっている場合は ContentEncoding: 'base64' を追加します

await S3.send(new PutObjectCommand({  Bucket: 'cats',  Key: 'hoge/fuga.png',  Body: base64_image,  ContentType: 'image/png',  ContentEncoding: 'base64',  // Base64であることを明示}))

スクリプトができたら、実行してみます。アップロードできたか確認してみましょう

npx tsx example.ts

これで Node.js から Cloudflare R2 に画像をアップロードできるようになりました 🎉

トラブルシューティング