Remix v2 + Cloudflare Pages Functionsで環境変数を使いたい

環境変数を使いたい

Remix v2のお勉強で、ローカルで開発しながらCloudflareにデプロイして確認してます。
その際、workersやAPIのURLをローカルと本番環境で分けるために環境変数を使いました。
結構特殊でなかなか時間とかした・・・。

公式

公式にpagesの場合は特殊だからこうしてねっ！って書いてありました。 remix.run

.dev.vars

環境変数は.envではなく、.dev.varsに書きます。

BASE_URL = "http://localhost"

これで、wrangler pages devで実行した際に環境変数として流れるみたいですね。

Using vars defined in .dev.vars
Your worker has access to the following bindings:
- Vars:
  - BASE_URL: "(hidden)"
⎔ Starting local server...

無事バインドされました。

loaderで取得

取得の方法がちょっと特殊。環境変数を取得する場合も、loader/actionを経て受け取らなければなりません。

export const loader = async ({ context }: LoaderFunctionArgs) => {
  const BASE_URL = context.env.BASE_URL;
   ...
};

ただ、このままだとtypescriptの場合envがunknownでエラーになります。
なので、型書いて渡します。

type Env = {
  BASE_URL: string;
};
export const loader = async ({ context }: LoaderFunctionArgs) => {
  const { BASE_URL } = context.env as Env;
  ...
};

型についてGithubでコード検索してると、remix.env.d.tsにAppLoadContextを指定したコードもあったけど、力尽きてるのでまたいつか・・・。