cloudflareのR2というストレージサービスがあるみたいなので調査と使ってみる

'use client'

import { format } from 'date-fns'
import { useState } from 'react'

export default function Home() {
  const [uploading, setUploading] = useState(false)
  const [url, setUrl] = useState('')

  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    setUploading(true)
    const fileName = `${format(new Date(), 'yyyyMMddHHmm')}_${file.name}`

    const res = await fetch('/api/presigned-url', {
      method: 'POST',
      body: JSON.stringify({ fileName }),
      headers: {
        'Content-Type': 'application/json',
      },
    })
    if (res.ok) {
      const { data, message } = await res.json()
      const result = await fetch(data.presignedUrl, {
        method: 'PUT',
        headers: {
          'Content-Type': file.type,
        },
        body: file,
      })
      if (result.ok) {
        alert(message)
        // https://avatar.storage-url.com の部分はcloudflareで登録をしたカスタムドメインの部分
        setUrl(`https://avatar.storage-url.com/${fileName}`)
      }
    } else {
      setUrl('')
      alert('アップロードに失敗しました。')
    }
    setUploading(false)
  }

  return (
    <div>
      <div>
        urlは{url}
        {url && !uploading ? (
          <>
            <h2>アップロードされた画像</h2>
            <div>
              <img src={url} alt="upload" width={200} />
            </div>
          </>
        ) : (
          <>
            <h2>画像をアップロード</h2>
            <input type="file" onChange={handleFileChange} className="hidden" id="upload" />
            <label htmlFor="upload">upload</label>
          </>
        )}
      </div>
    </div>
  )
}

import { PutObjectCommand, S3Client } from '@aws-sdk/client-s3'
import { getSignedUrl } from '@aws-sdk/s3-request-presigner'
import { type NextRequest, NextResponse } from 'next/server'

export async function POST(req: NextRequest) {
  const reqData = await req.json()
  const fileName = reqData.fileName
  const presignedUrl = await createPresignedUrlWithClient({
    bucket: 'avatar', // cloudflareで事前に登録をしているバケット名
    key: fileName,
  })
  return NextResponse.json({
    message: 'アップロードに成功しました。',
    data: { presignedUrl },
  })
}

const createPresignedUrlWithClient = ({ bucket, key }: { bucket: string; key: string }) => {
  const client = new S3Client({
    region: 'auto',
    endpoint: process.env.R2_ENDPOINT as string,
    credentials: {
      accessKeyId: process.env.R2_ACCESS_KEY as string,
      secretAccessKey: process.env.R2_SECRET_KEY as string,
    },
  })
  const command = new PutObjectCommand({ Bucket: bucket, Key: key })
  return getSignedUrl(client, command, { expiresIn: 3600 })
}