python+sqlalchemy+lambdaで管理者画面を作る¶
背景¶
バックエンドエンジニアをやっています。litestar+sqlalchemy+lambdaの構成でAPIをつくったのですが、フロントの方から管理者画面を作った方がいいよの声が... 普通みんな持ってるでしょって言われました あるあるなんでしょうか？ みなさん教えてください
というわけで、管理者画面を拵えることになったのですが、工数はないので、適当なライブラリを使うことに。Djangoみたいに簡単にできればいいなというところで、sqladmin を見つけました。 簡単な管理者画面にはとてもいいのですが、jinja2で毎レスポンスごとに、全てのhtmlを送ってくる仕様でした。 ちょっと困るのでlambda+cognitoで使えるようにhtmxを使って書き換えることにしました。
TL;DR¶
sqladminでcrudできるの楽しい
htmxおもしろい
sqladminlambda 作ってみたので、みてみてください
そもそも¶
sqladminについて¶
sqlalchemyのモデル定義をもとに、starlette系のASGIライブラリで管理者画面を作ることができる。 starletteでasgiを作り、sqlalchemyのモデルをwtformsでフォーム化、jinja2でhtmlをレンダリングする。
利点¶
少しの変更で、crudができるようになる
モデルのcrudの前に処理を挟むことができるので、必要な独自処理を追加できる
拡張性が高い
個人的に足りなかったこと¶
毎回全てのhtmlをレンダリングして返してくるので、効率が悪い
cognitoに対応したい
開発¶
色々やってみたかったのですが、第一弾として、htmxに対応してもらって、id_tokenを渡すことで、apigatewayの認証にも対応できるようにしました。
やったこと¶
htmxによる擬似的なページ遷移の実現
htmxによるDOM操作
htmxでid_tokenを渡せるように修正
htmxについて¶
<button hx-get="/api/user-info"
hx-trigger="load"
hx-headers='{"Authorization": "Bearer ${localStorage.getItem("id_token")}"}'
hx-target="this"
hx-push-url="true">
</button>
このbutton操作によってできること
DOM操作
hx-target属性を使用して、更新する要素を指定hx-triggerで、いつHTMXのリクエストを実行するかを制御
認証トークンの設定
個別のリクエストで
hx-headers属性を使用してヘッダーを設定
ルーティングの仮想遷移
hx-push-url="true"属性により、ブラウザの履歴にURLを追加
終わりに¶
あくまでも個人的見解です。
夢はあるなと
cognitoの対応もしたのですが、sqladminの外側で定義したので、ライブラリに含めることはできなかったです。
lambdaとsession周りをどう適応させるかわからず今回はこのような方式にしましたが、ちょくちょく認証が切れて、ログアウトさせられるのをどうにかしたいところです。
最近litestarにハマっているので、starlette系だけではなく、litestarにも対応させたいです。litestarの方にも piccolo admin がありましたが、こちらの方が使いやすそうな印象でした。
文章力がほしい...