Platforms

Cloudflare Workers

Cloudflare Workers 向けの開発環境・本番環境セットアップガイド。

サンプルを起動する

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

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

Vite が表示するローカル URL を開きます。一画面に Hello, world と表示されます。

Worker の設定を確認する

サンプルには Workers で動かすためのファイルが揃っています。

ファイル	役割
`src/entry.effront.tsx`	HTML レイアウト、一つのページ、`/` ルートを定義します。
`src/entry.workers.ts`	`createFetchHandler(application)` で作成した Fetch ハンドラーをエクスポートします。
`vite.config.ts`	`effront()` と `effrontCloudflare()` を登録します。
`wrangler.jsonc`	Worker のエントリー、互換性の日付、`nodejs_compat` フラグを定義します。
`package.json`	アダプター、Wrangler、アプリケーションの依存パッケージを定義します。

ページの内容は src/entry.effront.tsx で変更します。 Wrangler の設定を変更するときは nodejs_compat フラグを保持してください。

ビルド済みの Worker を Wrangler で実行する

開発サーバーを停止し、生成したプロジェクトで次のコマンドを実行します。

vp build
vp exec wrangler dev --local --config dist/rsc/wrangler.json --ip 127.0.0.1 --port 8787

http://127.0.0.1:8787 を開きます。生成された設定は、wrangler.jsonc のソースエントリーではなく、ビルド済みの Worker とブラウザー用アセットを読み込みます。これらのローカルコマンドはサンプルをデプロイせず、Cloudflare 認証も不要です。

Worker のバインディングとリクエスト情報を読む

createFetchHandler が処理する Page、Server Function、アプリケーション Layer など、リクエスト内で実行される Effect からアクセサーを使います。 API_ORIGIN 変数を持つ Worker では、次のヘルパーでバインディングとリクエスト URL を読み、監査処理を waitUntil() に渡せます。

import { getWorkersEnv, getWorkersRequestContext } from "@effront/cloudflare/workers";
import { Effect } from "effect";

type Env = { API_ORIGIN: string };

export const readRequestSettings = Effect.fn("app/readRequestSettings")(function* (
  recordAccess: (path: string) => Promise<void>,
) {
  const env = yield* getWorkersEnv<Env>();
  const { request, executionContext } = yield* getWorkersRequestContext<Env>();
  const path = new URL(request.url).pathname;
  executionContext.waitUntil(recordAccess(path));
  return { apiOrigin: env.API_ORIGIN, path };
});

API_ORIGIN を Worker に設定し、このヘルパーを Effect 内から呼ぶ際に、自分の recordAccess 関数を渡します。

ファクトリーで Env を一度指定すると、アクセサーを呼ぶ際の型引数が不要になります。

import { createWorkersContextAccessors } from "@effront/cloudflare/workers";
import { Effect } from "effect";

type Env = { API_ORIGIN: string };
const workers = createWorkersContextAccessors<Env>();

export const currentRequest = Effect.gen(function* () {
  const env = yield* workers.getWorkersEnv();
  const { request } = yield* workers.getWorkersRequestContext();
  return { apiOrigin: env.API_ORIGIN, path: new URL(request.url).pathname };
});

詳しい契約は Workers コンテキストのリファレンスを参照してください。

表示用のテキストではなく認証情報を設定する場合は、vars の代わりに Cloudflare secrets を使います。

Alchemy でリソースを管理する

Worker とリソースをコードで定義する場合は、別の Alchemy サンプルから始めてください。