$ curl -X GET "https://api.cloudflare.com/client/v4/user/tokens/verify" \
     -H "Authorization: Bearer YOUR_TOKEN" \
     -H "Content-Type:application/json"
{"result":{"id":"xxxxxxxxx","status":"active"},"success":true,"errors":[],"messages":[{"code":10000,"message":"This API Token is valid and active","type":null}]}%

$ npx wrangler r2 object put DB_NAME/YOUR_FILE_NAME.jpg --file=FILE_PATH/FILE_NAME.png
 ⛅️ wrangler 3.28.3 (update available 3.29.0)
-------------------------------------------------------
Creating object "YOUR_FILE_NAME.jpg" in bucket "DB_NAME".
Upload complete.

[[r2_buckets]]
binding = "BUCKET"
bucket_name = "your-bucket-name"

interface Env {
  DB: D1Database;
  BUCKET: R2Bucket; // 追加
}

const schema = z.object({
  file: z
    .instanceof(File, { message: "ファイルを選択してください" })
    .transform((file) => file)
    .refine((file) => file.size < 500 * 1000, {
      message: "ファイルサイズは最大5MBです",
    })
    .refine(
      (file) => ["image/jpeg", "image/jpg", "image/png"].includes(file.type),
      {
        message: ".jpeg .jpgもしくは.pngのみ可能です",
      }
    ),
});

// ref: https://dev.classmethod.jp/articles/remix-upload-cloudflare-r2/
export const action = async ({ request, context }: ActionFunctionArgs) => {
    const formData = await request.clone().formData();
    const submission = parseWithZod(formData, { schema });
    if (submission.status !== "success") {
      throw new Error('error')
    }

    // R2に画像をアップロードしてURLを取得
    const env = context.env as Env;
    const uploadHandler = unstable_createMemoryUploadHandler({
      maxPartSize: 1024 * 1024 * 10,
    });
    
    const form = await unstable_parseMultipartFormData(request, uploadHandler);
    const file = form.get("file");        
    const response = await env.BUCKET.put("hoge.png", file);
    console.log(response);
    
    return json({ success: true });
};

function Layout() {
  return (
    // ref: https://conform.guide/file-upload
    <Form
        method="POST"
        id={form.id}
        onSubmit={form.onSubmit}
        encType="multipart/form-data"
      >
  )
}

HeadResult {
  range: undefined,
  customMetadata: {},
  httpMetadata: {},
  uploaded: 2024-02-29T12:13:52.333Z,
  checksums: Checksums {
    sha512: undefined,
    sha384: undefined,
    sha256: undefined,
    sha1: undefined,
    md5: ArrayBuffer {
      [Uint8Contents]: <ce c1 4d 6d de f5 54 8c c8 f1 b4 f8 cf 9e a6 6c>,
      byteLength: 16
    }
  },
  httpEtag: '"cec14d6ddef5548cc8f1b4f8cf9ea66c"',
  etag: 'cec14d6ddef5548cc8f1b4f8cf9ea66c',
  size: 448438,
  version: '2593c3321aa0021c2b80904789c37e32',
  key: 'hoge.png'
}

-  "start": "wrangler pages dev --compatibility-date=2023-06-21 ./public",
+  "start": "wrangler pages dev ./public",

+ compatibility_date = "2024-02-01"

// Staging/Productionの場合はこうかけば良さそう
<img
  src="https://images.domain.com/icon.png"
  alt=""
  style={{ width: "200px", height: "auto" }}
/>

$ npx wrangler dev
 ⛅️ wrangler 3.28.3 (update available 3.30.1)
-------------------------------------------------------

✘ [ERROR] Missing entry-point: The entry-point should be specified via the command line (e.g. `wrangler dev path/to/script`) or the `main` config field.

export default {
  serverBuildPath: "functions/[[path]].js",
};

# zshを使用していると[[ ]] はメタ文字として解釈されるためシングルクォーテーションで囲んでいる
$ npx wrangler dev 'functions/[[path]].js'

✘ [ERROR] workerd/server/workerd-api.c++:685: error: wrapped binding module can't be resolved (internal modules only); moduleName = cloudflare-internal:d1-api


✘ [ERROR] MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above.

$ npx wrangler deploy 'functions/[[path]].js' --outdir bundled/ --dry-run

--dry-run: exiting now.
Total Upload: 1420.32 KiB / gzip: 346.75 KiB

Total Upload: 1384.59 KiB / gzip: 335.48 KiB

$ npx wrangler deploy 'functions/[[path]].ts' --outdir bundled/ --dry-run
 ⛅️ wrangler 3.29.0 (update available 3.30.1)

--dry-run: exiting now.
Total Upload: 7920.32 KiB / gzip: 1671.66 KiB

$ npx wrangler deploy 'functions/[[path]].ts' --outdir bundled/ --dry-run --minify
Total Upload: 5264.50 KiB / gzip: 1417.86 KiB

npx wrangler dev 'functions/[[path]].ts'