Reflexとは？PythonのみでフルスタックWebアプリを構築
はじめに
本記事について
最近、以下の記事を見て下さった方が多いようで、Reflexの注目が大きくなっているように思います。
しかし、日本語の記事が少なく、Reflexってなにかわからない。
インストールして動かしてみないとわからないことがありますよね。
そんなわからないことのうち、使うか使わないかの参考にできそうな情報を集めました。
まだReflexを触っていない方から、何度も使っている方まで、どんな方でも見れるように記事にしました。
自己紹介
山梨に住んでいる研究開発系のSEです。
主にPythonを使っていて、個人でライブラリの公開もしています。
Reflexのコントリビュートを2023年2月から行なっています。
Reflexとは
PythonのみでフルスタックWebアプリケーションを作成できるライブラリです。
Reflexのメリットとは？
Pythonの実装以外、基本的に要りません。
HTMLやCSSの記載をせずに、簡単なアプリから複雑なアプリまで実装できます！
CLIコマンドがあり、すぐにプロジェクトを作成できます。
バックエンドでは全てのPythonライブラリが使え、Pythonの柔軟さを活用できます。
フロントエンドは一般公開されているnpmライブラリを使用することができ、豪華なUIを実装できます。
デプロイコマンドもあるので、開発した実装をそのままクラウドサービスなどにデプロイが可能です！
ReflexのCLIコマンドについて
CLIコマンドについてのドキュメントはこちら
Reflexの日本語README
GitHubのREADME.mdに日本語がないため、翻訳しました。
こちらも併せて読んでみてください。
どんな人向け？
ReflexはPythonでデザイン性豊富なフロントエンドとpythonの拡張性を活かしたバックエンドを持ったフルスタックWEBアプリケーションを簡単に作成できます。
Pythonのみで豪華なUIのWebアプリを実装できるという大きなメリットがあります。
そのため、以下のような方におすすめです。
- DjangoなどでWwbアプリケーションを作っているけど、UIデザインをもっと豪華にしたい方
- フルスタックのアプリを作るほどのプロジェクトではないけど、簡単にWebアプリケーションを作りたい方
- NumpyやPandasデータをそのままWebで表示したい方
- HTMLやCSSを気にせずにWebアプリを作りたい方
プロジェクトの技術スタック
Reflexで作成するプロジェクトで使用しているフロントエンドとバックエンドの技術を紹介します。
フロントエンドとバックエンドはWebsocketで繋がっています。イベントなどは双方向で行うことが可能です。
フロントエンド
- サーバー:Node.js
- フレームワーク:Next.js
- パッケージマネジャー:Bun
- UI:Radix-UI
- CSS:Tailwind CSS
フロントエンドの環境については、Reflexのプロジェクト初期化時に自動でインストールされます。デフォルトで60以上のコンポーネントが用意されています。もちろん他のnpmコンポーネントも使う事ができます。
Reflexのデフォルトコンポーネントについて
Reflexでデフォルトで入っているコンポーネントについてはこちら
npmコンポーネントの使用について
Reflexのドキュメントはこちら
日本語で紹介した記事はこちら
バックエンド
- サーバー
- 開発用:Uvicorn
- プロダクション用
- Windows環境:Uvicorn
- Windows以外:Gunicorn
- アプリ:FastAPI
- ORM:SQLAlchemy
- マイグレーション:Alembic
DBには、DBのURLをコンフィグに設定することで、接続可能です。
バックエンドの実装について
バックエンドの実装をするときに参照できるドキュメント類はこちら
（URL先の左側にあるナビゲーションから選択ください）
DBへの説明について
Reflexのドキュメントはこちら
Reflexの使い方
Reflexプロジェクトを実装する方法を紹介します。
インストール
他のライブラリと同じように、pipなどでインストールできます。
各種環境をインストールするため管理者権限などが必要です。
pip install reflex
インストールが失敗する場合
管理者権限などによってインストールできない場合は仮想環境や、ユーザーで試してみて下さい。
- 仮想環境
python3 -m venv .venv
source .venv/bin/activate
pip install reflex
- ユーザーでのインストール
pip install reflex - U
プロジェクト作成
ReflexのCLIでプロジェクト構成を自動作成します。
プロジェクト名はCLIを実行しているフォルダ名になります。
以下の例では、プロジェクト名をmy_app_nameに設定していますが、皆さんの好きなプロジェクト名にしてみてください。
mkdir my_app_name
cd my_app_name
reflex init
以下のようなログが出力されます。
作りたいプロジェクトを数字で選択すると、プロジェクト構成が作成されます。
デフォルトは0です。
Initializing the web directory.
Get started with a template:
(0) blank (https://blank-template.reflex.run) - A minimal template
(1) dashboard (https://dashboard.reflex.run) - A dashboard with tables and graphs
(2) chat (https://chat.reflex.run) - A ChatGPT clone
(3) sidebar (https://sidebar-template.reflex.run) - A template with a sidebar to navigate pages
Which template would you like to use? (0):
デプロイ
reflexではCLIでのデプロイが可能です。
Reflexのサーバーにデプロイが可能ですが、ここでは各自が使っているサーバーにデプロイする方法を紹介します。
Reflexのサーバーへのデプロイについて
Reflexのサーバーにデプロイする方法はこちら
CLIからデプロイする
VMなどにsshアクセスしてCLIでデプロイする方法です。ひとつのマシンで起動も可能ですが、別のマシンにフロントエンドとバックエンドを別にデプロイすることも可能です。
- デプロイコマンド
reflex run --env prod
- フロントエンドのみ実行のコマンド
reflex run --env prod --frontend-only
- バックエンドのみ実行のコマンド
reflex run --env prod --backend-only
dockerを立ち上げる
ReflexにはDockerFileがプロジェクトについてきます。
コンテナを立ち上げるため、いろいろなクラウドサービスで簡単に使えると思います。
DockerFileについて
参考にできるDockerFileはこちら
Reflexのデメリットは？
こんなに使いやすいReflexにデメリットがあります。
注意したい点を紹介します。
メジャーバージョンではない
メジャーバージョンに向けてReflexの開発が進められています。
一方、バージョン1.0までは破壊的変更があり得ます。
実装したアプリが特定のバージョンから動作しなくなり、実装を変更せざるを得ない可能性があるため、気を付ける必要があります。
実装情報が少ない
Reflexは始まってからまだ日が浅いです。(2022/12開始)
英語の説明の情報が簡潔で少なく、日本語になっては記事自体が少ないです。
そのため、カスタマイズを進める中で複数の情報を照らし合わせながら、総合的に理解できるスキルが必要になると思います。
最後に
大枠を掴めるようにReflexの紹介をしました。
Reflexの良さを広めたいため、随時情報発信をしていきたいと思っています。
質問や、Reflexを広めていきたいなどと思われる方がいらっしゃいましたら、ぜひDiscordの日本語チャンネルにご参加下さい。
共に頑張りましょう！
Discussion