Platforms

Alchemy と Cloudflare

Alchemy を使った Cloudflare Workers 向けの開発環境セットアップガイド。

サンプルを準備する

最新の Node.js LTS と Vite+ をインストールします。

vp create effront -- my-app --platform alchemy-cloudflare
cd my-app
vp install

アプリケーションとリソースの定義を確認する

一画面のサンプルにはホストの設定が揃っています。

ファイル	役割
`src/entry.effront.tsx`	HTML レイアウト、一つのページ、`/` ルートを定義します。
`src/entry.workers.ts`	Worker を宣言し、リクエストまでアプリケーションの読み込みを遅延させます。
`alchemy.run.ts`	Stack を定義し、Worker の URL を出力します。
`vite.config.ts`	`effront()` と `effrontAlchemy()` を登録します。
`package.json`	`dev` を `alchemy dev` として定義します。

開発サーバーを起動する

生成したプロジェクトで次を実行します。

vp run dev

準備できたら、Alchemy が表示するローカル URL を開きます。一画面に Hello, world と表示されます。 src/entry.effront.tsx の <h1>Hello, world</h1> を <h1>Hello, Effront!</h1> に変えて保存します。

必要に応じてリソースを追加する

KV や D1 などのリソースを使うアプリケーションサービスは Alchemy Basic、Alchemy のリソース API、Effront の Alchemy API リファレンスを参照してください。