Cloudflare 公式ドキュメントに従ってプロジェクトを作成したものとします。

TL; DR

wrangler.tomlを書く。

# wrangler.toml
[vars]
API_TOKEN = "xxxxxxxxxxxxxxxxxx"

RUN npm run typegen

loaderで環境変数を使う。

export async function loader({ context }: LoaderFunctionArgs) {
  const env = context.cloudflare.env as Env;
  env.API_TOKEN;
}

wrangler.toml

wrangler.tomlをプロジェクトルートに作成し、

[vars]
API_TOKEN = "xxxxxxxxxxxxxxxxxx"

のように記入する。

そしてnpm run typegenすると、

プロジェクトルートにworker-configuration.d.tsが作成される。

// Generated by Wrangler on Sun Apr 07 2024 04:59:25 GMT+0900 (Japan Standard Time)
// by running `wrangler types`

interface Env {
  API_TOKEN: "xxxxxxxxxxxxxxxxxx";
}

これにより特に設定しなくても、loader内で環境変数が使えるようになるらしい。

Env

export async function loader({ context }: LoaderFunctionArgs) {
  const apiToken = context.cloudflare.env.API_TOKEN;
}

とすると、Property 'API_TOKEN' does not exist on type 'Env'.と怒られる。

以下仕組みはわからないがとりあえずの解決策

export async function loader({ context }: LoaderFunctionArgs) {
  const env = context.cloudflare.env as Env;
  env.API_TOKEN;
}

こうすれば怒られないし、env.まで入力するとAPI_TOKENのようなオートコンプリートの候補まで出してくれる。

同じEnvなのに何が違うんだろう？