import { env } from 'cloudflare:workers' import { Hono } from 'hono' import { basicAuth } from 'hono/basic-auth' import { getExtension } from 'hono/utils/mime' type Bindings = { BUCKET: R2Bucket USERNAME: string PASSWORD: string } const app = new Hono<{ Bindings: Bindings }>() app.use('/upload', basicAuth({ username: env.USERNAME, password: env.PASSWORD })) app.use('/list', basicAuth({ username: env.USERNAME, password: env.PASSWORD })) app.get('/', (c) => { return c.json({ message: "Hello World!", }) }) app.get('/list', async (c) => { const cache = caches.default const cacheKey = new Request(c.req.url, { method: 'GET' }) const cachedResponse = await cache.match(cacheKey) if (cachedResponse) { return cachedResponse } const objects = await c.env.BUCKET.list() const imageList = objects.objects.map(obj => ({ id: obj.key, size: obj.size, uploaded: obj.uploaded, contentType: obj.httpMetadata?.contentType || 'application/octet-stream' })) const htmlContent = ` 画像一覧

画像一覧

新しい画像をアップロード

${imageList.length === 0 ? '

画像がありません

' : `

${imageList.map(img => `

${img.id}

サイズ: ${(img.size / 1024).toFixed(1)} KB

アップロード: ${new Date(img.uploaded).toLocaleString('ja-JP')}

タイプ: ${img.contentType}

開く

`).join('')}

` }

` const response = c.html(htmlContent) if (!response.body) { return response } const [body1, body2] = response.body.tee() const originalResponse = new Response(body1, { ...response, headers: { ...response.headers, 'Cache-Control': 'public, max-age=300' } }) const responseToCache = new Response(body2, { ...response, headers: { ...response.headers, 'Cache-Control': 'public, max-age=300' } }) c.executionCtx.waitUntil(cache.put(cacheKey, responseToCache)) return originalResponse }) app.get('/:id', async (c) => { const object = await c.env.BUCKET.get(c.req.param('id')) if (!object) { return c.notFound() } const contentType = object.httpMetadata?.contentType ?? 'application/octet-stream' const data = await object.arrayBuffer() return c.body(data, 200, { 'Cache-Control': 'public, max-age=31536000', 'Content-Type': contentType }) }) app.put('/upload', async (c) => { const data = await c.req.parseBody<{ image: File }>() const body = data.image const type = data.image.type const extension = getExtension(type) ?? 'png' let key = (await crypto.randomUUID()) + '.' + extension await c.env.BUCKET.put(key, body, { httpMetadata: { contentType: type } }) const cache = caches.default const listCacheKey = new Request(new URL('/list', c.req.url), { method: 'GET' }) c.executionCtx.waitUntil(cache.delete(listCacheKey)) return c.text(key, 200) }) app.get('*', async (c, next) => { const cacheKey = c.req.url const cache = caches.default const cachedResponse = await cache.match(cacheKey) if (cachedResponse) { return cachedResponse } await next() if (!c.res.ok) { return } c.header('Cache-Control', 'public, max-age=31536000') const res = c.res.clone() c.executionCtx.waitUntil(cache.put(cacheKey, res)) }) export default app

タグ: #Cloudflare

画像配信用のAPIをWorkers+R2で作った