Refineで社内向けの管理画面を作る
r_matsubaRefine
ファーストインプレッション
- Reactベースの管理画面を作るのになんか良さげなフレームワークっぽい
- いろいろ1から実装しなくても各種サービスとの連携が用意されてる
- Next.jsも使えるっぽい。使ってみよ（ちなみにReactもNextも実務経験無し）
r_matsubaインストール
npm create refine-app@latest
インストールされたのはver.4.47.1
- テンプレートはNext.js
- data-providerは一旦REST API
- UIフレームワークはMUIを使ってみる
- サンプルページあり
- パッケージマネージャーはnpm
あと、DBはなんとなくPostgreSQLを使ってみようかなーという想定。
npm run dev
でローカル起動してサンプルページは確認OK
さわってみる
ドキュメントを読みながらコードを編集して、画面の変化を確認する。 ドキュメントに関しはRefineがまだ歴史も浅く発展途上ということもあり、ちょいちょい最新のコードに追従できてない部分がありそう。
ドキュメントを斜め読みし、チュートリアルを途中まで（基本のCRUDあたりまで）実施。
色々噛み砕くと、
- resouce: 管理する対象の項目を定義
-
provider: システム必要な機能（データ取得とか認証とか）を定義
みたいなコンセプトらしい。
もっといろんな概念があるけど、最初からしっかり認識する必要があるのは↑の2つくらい？
サンプルではblog-postsリソースとcategoriesとリソースがある。
加えてstocksリソースをCLIから作成。
npm run refine add resource
必要なファイルが作成されて、/src/app/layout.tsxに定義が追記される。
画面を開くと左ペインのメニューが自動的に追加されている。
ただし、実際にメニューを選択し一覧表示しようとすると、REST APIのdata-providerはデフォルトでfakeAPIを参照するため、存在しないリソースは表示されない。
r_matsubaMaterial UI
Material UI is an open-source React component library that implements Google's Material Design.
翻訳
Material UI は、Google のMaterial Designを実装するオープンソースの React コンポーネント ライブラリです。
なるほど！
（Materialなんちゃら系をちゃんと識別できてなかった）
r_matsubaバックエンド
Refineが担うのは基本的にフロントエンドなので、バックエンドで用意する必要がある（RefineはREST APIやGraphQL、各BaaS等との連携をサポート）
Supabase
BaaSと呼ばれる類のものらしい。DB+APIまで提供してくれるっぽい。
テンプレートにNext.jsを選んでいるのでAPIも同一プロジェクト内で構築できそうだが、DBをどこに用意するかとか、Next.jsでのAPI整備とかどうしよう（Next.jsの理解浅い）、、、とかあったので、BaaSを使うのが手っ取り早そう→人気そうだった、くらいの理由で一旦開発段階ではSupabaseを使ってみることに。
ちなみに認証基盤やストレージも使えるっぽい。
Supabaseセットアップ
- 無料プランで登録し
- Refineプロジェクト用のSupabaseプロジェクト（=DBみたいな）を作成
- テーブル作成
- 適当なレコード登録
一旦ここまで
Refine側の準備
インストールの時点でdata-providerとしてSupabaseを選んでなかったので、後から必要なパッケージなどをインストールする必要がある。
ただ色々試してみた感じだと、導入のパターンによってそれぞれ成果物（ファイル構成、コード）に差異がある模様。。。
- プロジェクト作成時にdata-providerにSupabase選んだ場合
- auth-providerもSupabaseように作られてしまう。
- ドキュメントに沿ってセットアップする場合
- CLIのswizzleという機能を使う場合
結局、「プロジェクト作成時にdata-providerにSupabase選んだ」別プロジェクトと現プロジェクトとの差分をみて、必要なファイルのコピーとパッケージインストールを実施。
データ取得
Supabase用のdata-providerは内部的にはどうやらREST API経由でデータ取得しようとしてる模様。
しかしテスト用に登録したはずのレコードが取得できず。
なにか設定が足りないのかも。。。と思って調べてみるとこんな記事が。
RLS(Row Level Security)を有効にしてる場合だと、「ポリシー」とやらを作成する必要があったっぽい。
とりあえずSELECTを許可するポリシーを作成したらAPI経由でデータ取得できた。
ちなみにポリシー設定の画面にはこんな文言が。
Row Level Security is enabled for this table, but no policies are set
Select queries may return 0 results.
AWS
現状Supabaseサービス上でDB構築しているが、自社のメインIaaSがAWSなのでゆくゆくはRDSやらへの移行も考える必要が出てくるかも？
もしくはSupabaseがセルフホスティングもできるとのことなので、ECSとかでコンテナ動かせばAWS環境で完結できそう。