環境変数とbinding

重要：

• npx wrangler secret put SECRET_NAME で環境変数の設定、 npx wrangler d1 create NAMEなどで各種Cloudflareの機能（ = binding）を作成しアプリに追加するが、それを行うたびに npx wrangler types コマンドを実行し worker-configuration.d.tsという型定義ファイルに型を生成する。

• そうすることで import { env } from "cloudflare:workers";から補完が効くようになる。

環境変数・bindingの削除：

• wrangler.jsonc から該当するものを削除し、 wrangler typesコマンドで型からも削除

R2

npx wrangler r2 bucket create/delete NAME

やること：

1. パブリック開発URLの作成

2. CORS

  {
    "AllowedOrigins": [
      "http://localhost:3000",
      "本番ドメイン"
    ],
    "AllowedMethods": [
      "GET",
      "POST",
      "DELETE"
    ]
  }

URL：

• 開発時 - パブリック開発URL / 本番 - カスタムドメイン

バケット：

• １のバケットを１つのR2用カスタムドメイン（cdn.example.com ）で使いまわすことは出来ない。「既に紐付いているバケットがある」旨のメッセージが出る。

// X
cdn.example.com → bucket1
cdn.example.com → bucket2

// O
cdn1.example.com → bucket1
cdn2.example.com → bucket2

Vercelと画像サイズ：

• 1MB以上の画像をserverActionで処理しようとすると画像のUploadが出来ない。

• Vercel-Log

  Uncaught Exception: Error: Body exceeded 1 MB limit.

• fileのsizeプロパティが1,000,000 bytes = 1MB以下かチェックを入れる。

upload例：

import { env } from "cloudflare:workers";
import { createServerFn } from "@tanstack/react-start";

export const uploadImageFn = createServerFn({ method: "POST" })
	.validator((data) => {
		if (!(data instanceof FormData)) {
			throw new Error("Expected FormData");
		}
		return data;
	})
	.handler(async ({ data }) => {
		const image = data.get("image") as File;
		const arrayBuffer = await image.arrayBuffer();

		await env.cflare_eco.put(image.name, arrayBuffer, {
			httpMetadata: {
				contentType: image.type,
			},
		});
	});

• env.BUCKET.put/get/delete(key, arrayBuffer)

• await image.arrayBuffer() でFileオブジェクトからバイナリデータを取り出してUploadするのはどのCloudも共通した流れ

• webpはpngの1/10くらいのサイズなのでwebp変換を関数に取り入れるのもあり

<img src={`${env.VITE_R2_ENDPOINT}/icon128.png`} alt="" />

KV

key/valueペアのストレージ、使い方はRedisと似ている。

npx wrangler kv namespace create/delete NAMESPACE

• env.NAMESPACE.get/put/delete(key, value)

• 既存のkeyにputをすると上書き

TTL（time to live）：

await env.SUMMARY.put(id, result.response, {
	expirationTtl: 60 * 60 * 24 * 5, // 5日間
});

• 最小は60秒