React,Remixアプリのprocess.env.ENVをCLOUD FLAREで使う方法

1. .envをコピーする

CLERK_PUBLISHABLE_KEY=pk_stghorhtoierihtoeihtoieh
CLERK_SECRET_KEY=sk_enaligrnorgiehgowiuggwhrthrhrhtr
CLERK_SIGN_IN_URL=/sign-in
CLERK_SIGN_UP_URL=/sign-up
CLERK_AFTER_SIGN_IN_URL=/
CLERK_AFTER_SIGN_UP_URL=/
PUBLIC_SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJsingo9hrtnoruhtoernhoerhthrehetty
PUBLIC_SUPABASE_URL=https://vysjmksliubsirtgoiwrubgwoitgvaq.supabase.co

.envをコピーする

2. CLOUDFLAREのコンソールにアクセスする

編集したいアプリ名をクリックする

設定をクリックする

変数を編集するを押す

変数を追加するを押す

3. Ctrl + Vで貼り付ける

暗号化を押す

保存する

4. process.env.ENVをCLOUD FLAREの環境変数の取得args.context.cloudflare.env.ENVに変更する

ローカルと本番どっちも対応するために条件分岐させよう

// Supabaseクライアントを生成するユーティリティ関数
const getSupabaseClient = async (args: ActionFunctionArgs) => {


    const env = typeof process !== 'undefined' ? process.env as unknown as Env : args.context.cloudflare.env as Env;
    const { userId,getToken } = await getAuth(args);
    if(userId == null){return null}
    
    const token = await getToken({ template: 'supabase' });
    if (!token) {
        throw new Response('Token is missing', { status: 401 });
    }
    
    return createClient(
        env.NEXT_PUBLIC_SUPABASE_URL!,
        env.NEXT_PUBLIC_SUPABASE_KEY!,
        {
        global: { headers: { Authorization: `Bearer ${token}` } },
        }
    );
    };

参考
https://developers.cloudflare.com/pages/framework-guides/deploy-a-remix-site/#create-and-add-a-binding-to-your-remix-application

5. おわり

おわりです。