RemixをCloudflare Pagesにデプロイする時にハマった話

はじめに

修正や追加等はコメントまたはGitHubで編集リクエストをお待ちしております。

RemixをCloudflare Pagesでデプロイする時にハマった話

RemixをCloudflare Pagesでデプロイする時にハマったのでやったことを未来の自分のために残しておきます

その1: 環境変数の仕様

• Remixの環境変数は .env ファイルに記述するが、Cloudflare Pagesでは .env ファイルを読み込まない
• ローカルでの確認時には、.dev.vars ファイルに環境変数を記述しておかないといけない
• process.env は使えず、context.cloudflare.env を使う
  • ネットには context.env と書いてある記事もあるが、context.cloudflare.env が正しい

私はローカルでの開発時にはBunとViteを使っているので、以下のようにして環境変数を読み込んでます

// Envは環境変数の型でwrangler typesを実行すると.dev.varsを元に生成される

export const loader = async ({ request, context }: LoaderFunctionArgs) => {
  let env: Env;
  try {
    env = process.env as unknown as Env; // ローカルはnodeなのでprocess.env
  } catch {
    env = context.cloudflare.env as Env; // Cloudflare Pagesはcontext.cloudflare.env
  }
  if (!(env.SUPABASE_URL && env.SUPABASE_ANON_KEY)) {
    throw new Error("SUPABASE_URL or SUPABASE_ANON_KEY is not defined");
  }
  const response = new Response();

  const supabase = createServerClient(env.SUPABASE_URL, env.SUPABASE_ANON_KEY, {
    request,
    response,
  });

  const {
    data: { session },
  } = await supabase.auth.getSession();

  return json(
    {
      env,
      session,
    },
    {
      headers: response.headers,
    },
  );
};

その2: デプロイ時の設定

CloudflareのDocsに Build directory: public と書いてありますが、正しくは ./build/client です。
これを間違えるとCSSやJSが読み込まれないので注意してください。
また、デフォルトの設定だとBunのバージョンが古いので、環境変数 BUN_VERSION を指定して最新のバージョンを使うようにしてください。

https://developers.cloudflare.com/pages/framework-guides/deploy-a-remix-site/

まとめ

以上、RemixをCloudflare Pagesでデプロイする時にハマった話でした。
もし同じ問題にぶつかってる誰かの助けになれば幸いです。

おまけ

何やかんやありつつ、出来上がったサイトがこちら

https://remix-study.oshaburikitchin.com/

ソースコードはこちら

https://github.com/riya-amemiya/remix-study

アクセス権とかいう概念は捨ててるので、Todoリストを誰でも閲覧、追加、削除できるようになってます。
個人情報を入力したら全世界に公開されるのでご注意ください。