okinawa.rb #222 で Cloudflare Workers を紹介しました

index.ts

// Service Worker Syntax で書いてます
// addEventListener('fetch', event => {
//   event.respondWith(handleRequest(event.request));
// });

// Module Worker Syntax で書いてます
// async function handleRequest(request) {
//   return new Response('Hello worker!', {
//     headers: { 'content-type': 'text/plain' },
//   });
// }

// ここからは R2 への画像アップロード
interface Env {
  CODEHEX_BUCKET: R2Bucket
}

export default {
  async fetch(request: Request, env: Env) {
    const url = new URL(request.url)
    const path = url.pathname
    if (path === "/upload") {
      const formdata = await request.formData()
      const imagedata = formdata.get("imagedata") 
      if (imagedata === null) {
        throw new Error("not found imagedata")
      }
      const file = imagedata as File
      const obj = await env.CODEHEX_BUCKET.put("image", file, {
        httpMetadata: {
          contentType: "image/png"
        }
      })  
      
      return new Response(`key: ${obj.key}!!`, {
        headers: { 'content-type': 'text/plain' },
      })
    }


    if (path === "/image") {
      const obj = await env.CODEHEX_BUCKET.get("image")  
      if (obj === null) {
        throw new Error("upload してー")
      }
      return new Response(obj.body)
    }

    
    return new Response('Not found', {
      status: 404,
      headers: { 'content-type': 'text/plain' },
    });
  }
}

package.json

{
  "name": "hn-image-workers",
  "version": "1.0.0",
  "description": "cloudflare r2 image workers for hacker news",
  "main": "dist/index.js",
  "author": "Kei Kamikawa <code-hex@users.noreply.github.com>",
  "license": "MIT",
  "scripts": {
    "dev": "wrangler dev ./src/index.ts",
    "deploy": "wrangler publish ./src/index.ts"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^3.14.0",
    "@tsconfig/recommended": "^1.0.1",
    "miniflare": "^2.5.1",
    "wrangler": "^2.0.16"
  },
  "dependencies": {}
}

tsconfig.json

{
  "extends": "@tsconfig/recommended/tsconfig.json",
  "compilerOptions": {
    "lib": ["es2022"],
    "target": "es2022",
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "types": [
      "@cloudflare/workers-types"
    ]
  }
}

wrangler.toml

name = "hn-image-workers"
compatibility_date = "2022-07-06"

[[r2_buckets]]
binding = "CODEHEX_BUCKET"
bucket_name = "codehex-bucket"

• Event: https://okinawarb.doorkeeper.jp/events/139181
• Deploy は yarn deploy でできます
• R2 Bucket の作り方
  • npx wrangler r2 bucket create codehex-bucket
  • npx wrangler r2 bucket list で確認

R2 の初めてのときに読むドキュメント
https://developers.cloudflare.com/r2/get-started/

https://www.iplocation.net/ip-lookup を使って IP の情報を調べました

ツイートしたよ！
https://twitter.com/codehex/status/1544646340860596224?s=20&t=DwOuLw5TZ4n7JMME75VaDw