ReflexをCloud Shell Editorで起動するまで

ReflexをCloud Shell Editorで起動する

この記事に触発されて、こうしたライブラリで社内向け便利アプリを作っていけるのでは？？と思ってます。

やることはシンプルで、環境構築して、サンプルを実行するところまでを、とりあえずできるようになりたいと思います。

環境構築

いつものごとく、venvでPython環境を構築する。

python3 -m venv .venv
source .venv/bin/activate

次にReflexをインストールする

pip install reflex

そして、サンプルコードを持ってくる

reflex init
(お好みのサンプルを選択可能)

これで、サンプルコードが入る。
最近は色々をreflex initで選択できるようです。

ダッシュボードとかもあるようで、PowerBIでは結局Excelの可視化専用ツールになってる......という人にうってつけかも。

ダッシュボードだけだったら Streamlitがもっと簡単かもしれませんが。

実行

reflex run

──────────────────────────────────────────── Starting Reflex App ────────────────────────────────────────────
Compiling: ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 100% 13/13 0:00:00
──────────────────────────────────────────────── App Running ────────────────────────────────────────────────
App running at: http://localhost:3001

この状態のまま、プレビューを見てみると、

見たいのは3001ポートなので、ポートを変更して、プレビューを見る。

出てきました！かっこいいですね。

設定をいじってみる

GCPではポートを選択できるので問題ないですが、AWSのCloud9だと8080、8081、8082ポートしか使わせてくれないので、3001では困ってしまいます。

そのため、フロントエンドのポートを8080に変えてみます。結構あっさり変更できます。

↓↓ なお、この記事を読んで、試してなんとかなりました。

rxconfig.pyを、次のように変更します。

import reflex as rx

config = rx.Config(
    app_name="reflex_sample",
    frontend_port=8080,
)

frontend_portというオプションをつけてあげればOKとのこと。他のコンフィグも、

ここに書いてあります。
そして、起動しなおすと、

reflex run
──────────────────────────────────────────── Starting Reflex App ────────────────────────────────────────────
Compiling: ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 100% 13/13 0:00:00
──────────────────────────────────────────────── App Running ────────────────────────────────────────────────
App running at: http://localhost:8080

プレビューも8080ポートで見られるようになりました。

おわり

５月初めにReflexを試してみたときは、フロントエンドのポートを変えられなくて挫折してしまいました。そのときはCloud9で見たかったので、8080が必要でした。

当時は、reflexコマンドの引数で設定しても反映されなかった記憶がありましたが、いつの間にか使えていて、単なる記憶違いだったかもしれません。

このReflexは、特に非IT、製造関係の企業には朗報かもしれません。フロントエンドの開発できる人を用意するのは至難の業ですが、Pythonならなんとかなるという人材は、最近のAIブームのおかげでそこそこいるはずです。

社内アプリのひとつふたつ、作ってみたいなと思います。