kstack-cloudflare-vite-plugin

Cloudflare Vite plugin を使うときの規約。理由を理解した上で適用すること。クライアントコードでの環境変数の読み方は kstack-vite の SKILL を参照。

Cloudflare Workers へは @cloudflare/vite-plugin でビルドする

Workers にデプロイするアプリは、Worker script が無い assets-only の SPA であっても @cloudflare/vite-plugin を使う。wrangler の設定を vite.config.ts で読んだり、出力先を wrangler.jsonc と二重に書いたりしない。

// Bad: wrangler の設定を自前で読み、define で埋め込み、outDir を assets.directory と合わせている
const { vars } = unstable_readConfig({ config: "wrangler.jsonc" });
export default defineConfig({
  plugins: [react()],
  define: { "import.meta.env.API_URL": JSON.stringify(vars.API_URL) },
  build: { outDir: "dist" },
});

// Good: plugin に任せる。クライアントに渡す値は .env の VITE_* に置く
import { cloudflare } from "@cloudflare/vite-plugin";