​【Cloudflare R2入門】D1やAmazon S3との違いからHono＋Workersでの実践コードまで徹底解説

npm create hono@latest my-d1+r2-app
✔ Which template do you want to use? cloudflare-workers
✔ Do you want to install project dependencies? Yes
✔ Which package manager do you want to use? npm

cd my-d1+r2-app

npx wrangler d1 create my-db-d1

√ Would you like Wrangler to add it on your behalf? ... yes
√ What binding name would you like to use? ... my_db_d1
√ For local dev, do you want to connect to the remote resource
  instead of a local resource? ... no

npx wrangler r2 bucket create my-bucket

√ Would you like Wrangler to add it on your behalf? ... yes
√ What binding name would you like to use? ... my_bucket_r2
√ For local dev, do you want to connect to the remote resource 
　instead of a local resource? ... no

{
  "name": "my-app",
  "main": "src/index.ts",
  "compatibility_date": "2026-08-04",
  // D1のバインディング設定
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "my-db",
      "database_id": "YOUR_DATABASE_ID_HERE" // 先ほど作成したdatabase_idを貼り付け
    }
  ],
  // R2のバインディング設定
  "r2_buckets": [
    {
      "binding": "BUCKET",
      "bucket_name": "my-bucket"
    }
  ]
}

CREATE TABLE IF NOT EXISTS files (
    id TEXT PRIMARY KEY,
    title TEXT NOT NULL,
    r2_id TEXT NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

npx wrangler d1 execute my-db --local --file=./schema.sql

import { Hono } from 'hono'

type Bindings = {
  my_db_d1: D1Database
  my_bucket_r2: R2Bucket
}

const app = new Hono<{ Bindings: Bindings }>()

// 1. 作成 (CREATE): 画像などのバイナリとタイトルを送信
app.post('/api/files', async (c) => {
  const formData = await c.req.formData()
  const file = formData.get('file') as File | null
  const title = formData.get('title') as string | null

  if (!file || !title) {
    return c.json({ error: 'ファイルとタイトルは必須です' }, 400)
  }

  const id = crypto.randomUUID()
  const r2Id = `${id}-${file.name}`

  // R2にバイナリ保存
  await c.env.my_bucket_r2.put(r2Id, await file.arrayBuffer(), {
    httpMetadata: { contentType: file.type },
  })

  // D1にメタデータ保存
  await c.env.my_db_d1.prepare(
    'INSERT INTO files (id, title, r2_id) VALUES (?, ?, ?)'
  ).bind(id, title, r2Id).run()

  return c.json({ message: '作成完了', id, r2_id: r2Id }, 201)
})

// 2. 読み込み (READ): メタデータ取得
app.get('/api/files/:id', async (c) => {
  const id = c.req.param('id')
  const record = await c.env.my_db_d1.prepare('SELECT * FROM files WHERE id = ?').bind(id).first()

  if (!record) {
    return c.json({ error: 'データが見つかりません' }, 404)
  }

  return c.json(record)
})

// 2-1. バイナリファイルの取得
app.get('/api/files/:id/content', async (c) => {
  const id = c.req.param('id')
  const record = await c.env.my_db_d1.prepare('SELECT r2_id FROM files WHERE id = ?').bind(id).first<{ r2_id: string }>()

  if (!record) {
    return c.json({ error: 'データが見つかりません' }, 404)
  }

  const object = await c.env.my_bucket_r2.get(record.r2_id)
  if (!object) {
    return c.json({ error: 'R2ファイルが見つかりません' }, 404)
  }

  const headers = new Headers()
  object.writeHttpMetadata(headers)
  headers.set('etag', object.httpEtag)

  return new Response(object.body, { headers })
})

// 3. 更新 (UPDATE): タイトル変更および/またはファイルの差し替え
app.put('/api/files/:id', async (c) => {
  const id = c.req.param('id')
  const formData = await c.req.formData()
  const newFile = formData.get('file') as File | null
  const newTitle = formData.get('title') as string | null

  const record = await c.env.my_db_d1.prepare('SELECT * FROM files WHERE id = ?').bind(id).first<{ r2_id: string, title: string }>()
  if (!record) {
    return c.json({ error: 'データが見つかりません' }, 404)
  }

  let r2Id = record.r2_id
  let title = newTitle || record.title

  // 新しいファイルがあれば旧ファイルを消して新ファイルを保存
  if (newFile && newFile.size > 0) {
    await c.env.my_bucket_r2.delete(record.r2_id)
    r2Id = `${id}-${newFile.name}`
    await c.env.my_bucket_r2.put(r2Id, await newFile.arrayBuffer(), {
      httpMetadata: { contentType: newFile.type },
    })
  }

  // D1のメタデータ更新
  await c.env.my_db_d1.prepare(
    'UPDATE files SET title = ?, r2_id = ? WHERE id = ?'
  ).bind(title, r2Id, id).run()

  return c.json({ message: '更新完了', id, title, r2_id: r2Id })
})

// 4. 消去 (DELETE): D1とR2の両方から削除
app.delete('/api/files/:id', async (c) => {
  const id = c.req.param('id')
  const record = await c.env.my_db_d1.prepare('SELECT r2_id FROM files WHERE id = ?').bind(id).first<{ r2_id: string }>()

  if (!record) {
    return c.json({ error: 'データが見つかりません' }, 404)
  }

  // R2からバイナリ削除
  await c.env.my_bucket_r2.delete(record.r2_id)

  // D1からレコード削除
  await c.env.my_db_d1.prepare('DELETE FROM files WHERE id = ?').bind(id).run()

  return c.json({ message: '削除完了', id })
})

export default app

npm install -D @cloudflare/workers-types

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "skipLibCheck": true,
    "lib": [
      "ESNext",
      "DOM"
    ],
    "types": [
      "@cloudflare/workers-types"
    ],
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx"
  }
}

npm run dev

# ファイルのパスは適宜変更してください
curl.exe -X POST http://localhost:8787/api/files `
  -F "title=テスト画像" `
  -F "file=@C:\Users\user\Pictures\img_1.png"

# 以下のようなメッセージが表示されれば完了
{"message":"作成完了","id":"73eccc43-149c-4fee-9975-1cd7f065a2d9",
"r2_id":"73eccc43-149c-4fee-9975-1cd7f065a2d9-img_1.png"} 

# 取得するファイルのidを入力してください
curl.exe http://localhost:8787/api/files/ここにid

# ダウンロードするファイルのidを入力してください
curl.exe http://localhost:8787/api/files/ここにid/content --output downloaded_img.png

# タイトルとファイルを同時に更新する場合
curl.exe -X PUT http://localhost:8787/api/files/ここにid `
  -F "title=更新後のタイトル" `
  -F "file=@C:\Users\user\Pictures\img_2.png"

curl.exe -X DELETE http://localhost:8787/api/files/ここにid