RemixJS, Supabase 專案發佈到 Cloudflare Pages

注意的事項

條列一下，Remix 從專案建立到發佈到 Cloudflare pages 該注意的事項：

1. 建立專案時，直接使用 Cloudflare 的官方工具 npm create cloudflare，以方便發佈，參考Deploy a Remix site。

2. 原本由 @remix-run/node 匯入的類型 LinksFunction, LoaderFunctionArgs 或函式 json, redirect 改由 @remix-run/cloudflare 匯入。

3. 和 NodeJS 相依的套件，儘量不要使用，例如 qs 套件。如果用到了，要在 remox.config.js 裡設定 polyfill。

4. 開發時，環境變數設定在 .dev.vars 裡。在正式環境時，須到 Cloudflare pages 的專案裡，設定環境變數。

5. 環境變數的取得，不是透過 process.env，是透過 context.env。而 context 物件是由 LoaderFunctionArgs 或 ActionFunctionArgs ({ request, context, params }) 而來。

在測試的專案用到 bcryptjs，而該套件使用到 Node 的 crypto，因此要如下設定：

// remox.config.js
/** @type {import('@remix-run/dev').AppConfig} */
export default {
  /* 略 */
  browserNodeBuiltinsPolyfill: { modules: { crypto: true } }, // bcryptjs 需要
};

Supabase 相關

連線 supabase

// app/utils/supabase-client.ts
import { createClient } from "@supabase/supabase-js";

let supabase;

export default function getSupabase(context={}){
  if(! supabase) {
    supabase = createClient(
      context.env.SUPABASE_URL,
      context.env.SUPABASE_ANON_KEY
    );
  }
  return supabase;
}

新增

  const result = await supabase
    .from("address_book")
    .insert({ name, email, mobile, birthday, address, creator_gid: myAuth.gid })
    .select();

讀取

算數量

let totalRows = 0;
const tmpSupabase = supabase
  .from("address_book")
  .select("*", { count: "exact", head: true });

if (searchStr) {
  const { count } = await tmpSupabase.or(
    `name.like.%${searchStr}%,mobile.like.%${searchStr}%`
  );
  totalRows = count;
} else {
  const { count } = await tmpSupabase;
  totalRows = count;
}

條件搜尋

if (searchStr) {
  const { data, error } = await supabase
    .from("address_book")
    .select()
    .or(`name.like.%${searchStr}%,mobile.like.%${searchStr}%`)
    .order("sid", { ascending: false })
    .range((page - 1) * perPage, page * perPage - 1);
  if (!error) {
    rows = data;
  }
} else {
  const { data, error } = await supabase
    .from("address_book")
    .select()
    .order("sid", { ascending: false })
    .range((page - 1) * perPage, page * perPage - 1);
  if (!error) {
    rows = data;
  }
}

更新

let query = supabase
  .from("address_book")
  .update({ name, email, mobile, birthday, address })
  .eq("sid", sid);
let result;
if (myAuth.gid === context.env.ADMIN_GID) {
  result = await query;
} else {
  result = await query.eq("creator_gid", myAuth.gid);
}

刪除

let result;
let query = supabase.from("address_book").delete().eq("sid", sid);
if (myAuth.gid === context.env.ADMIN_GID) {
  result = await query;
} else {
  result = await query.eq("creator_gid", myAuth.gid);
}