🗂
RemixをCLOUD FLARE にデプロイする
ハマりどころ
1. "@remix-run/node"から"@remix-run/cloudflare"にする
import {
json,
type LoaderFunctionArgs,
type ActionFunctionArgs,
type MetaFunction,
} from "@remix-run/node";
import {
json,
type LoaderFunctionArgs,
type ActionFunctionArgs,
type MetaFunction,
} from "@remix-run/cloudflare";
2. 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}` } },
}
);
};
1.CloudFlare版のRemixインストール
プロジェクトファイルを作成したら
npm create cloudflare@latest my-remix-app -- --framework=remix
cd my-remix-app
npm run dev
2.デプロイ
npm run deploy
3.おわり
おわりです。
Discussion