注意

Remix は 2022 年 3 月時点でかなり活発に開発が進んでいるフレームワークなので、バージョン差異や作成時期により再現できない可能性があります。この記事を再現するためのコードは下記にあります。

https://github.com/Hidekazoo/remix-cloudflarepages-env

下記のコマンドで作成し、CloudFlare Pages の構成を選択した構成です。上記は再現の手間を省くために.env ファイルを git に含めていますが普段はは含めないです。

npx create-remix@latest

• remix: 1.3.3
• wrangler: beta

環境変数を利用する

Remix の CloudFlare デプロイ用の構成の場合、環境変数の読み込み方法が独特です。フロント開発でよく使う process.env でアクセスができません。また、ローカル開発時に環境変数を利用したい場合、wrangler の起動時に binding し、context から読み取る必要がありました。

まず、ローカル環境に.env ファイルを作成し値を記載、dev コマンドの wranglerk 起動時に cat コマンドで展開しています。

"dev:wrangler": "cross-env NODE_ENV=development wrangler pages dev ./public --binding $(cat .env)",

参考元：Error “process is not defined” when accessing environment variables

useLoaderData で context からアクセスする

下記の用に React Component ファイルからアクセスができます

import type { LoaderFunction } from "remix";
import { useLoaderData } from "remix";

export const loader: LoaderFunction = async ({ context }) => {
  const { SAMPLE_VARIABLE } = context;
  return {
    variable: SAMPLE_VARIABLE,
  };
};

export default function Index() {
  const data = useLoaderData();
  console.log(data);
  return <div></div>;
}

他にも方法があるかもしれないものの、一旦読み取れたのでこの方法で環境変数を読み取るようにしました。冒頭で書いた通り、remix のバージョンおよび wrangler のバージョンで挙動が変わりそうなので、上手くいかない場合は remix の github の issue を検索すると良いかもしれません。