FaseAPIとStreamlitを使った簡単なWEBアプリをGoogle Colaboratory完結で作っていこうと思います。
せっかくなのでデータベースも使います（SQLModelで実装）。
動作
GIF動画
WEBアプリと言っても、名簿を登録できるだけの単純なものです。
フロー
ざっくりイメージはこんな感じです。
Streamlitに接続
/listのレスポンスを表示
↓
フォームから名前と年齢を/postする
↓
受け取ったパラメータをDBに登録
↓
/postのレスポンスを表示
/listのレスポンスを表示
フロント側
Streamlit
・名前と年齢を投稿するフォーム
・レスポンスを表示するエリア
・全件リストを表示するエリア
の３つのエリアで構成されています。
API側
FastAPI
エンドポイントは/postと/listのみ
どちらもJSONを返します。
/postされたらSQLModelでDBに登録します。（簡単なバリデーションのみで、空白とかには対応してません。また、非同期ではありません。）
/listは全件を返します。
ノートブック ＆ ソース
メニューバー① > ランタイム > すべてのセルを実行 で再現できるようにしています。
しばらくしたら下の方のコードセルの出力にて、FastAPIとStreamlitの起動を確認できます。
your url is: にあるURLでStreamlitの画面に接続できます。
（loca.ltは繋がりにくい時間帯があるかもしれません）
ディレクトリ構造
/content/colab_fastapi_streamlit
|--api
| |--main.py
| |--database.db
| |--run.py
|--front
| |--main.py
| |--run.py
|--docker
| |--Dockerfile
| |--requirements.txt
|--.env
|--Makefile
|--docker-compose.yml
簡略化のため極力１つのファイルにまとめるようにしました。
本来api/main.pyはcontroller・スキーマ・router、DBなどを分けて管理した方がエンドポイントのパスが増えてきた場合に開発しやすいと思います。
近い内に分けたバージョンのノートブックも作ってみようと思います。
Makefileはいろんな実行処理をまとめるために置いています。
例えばターミナルにて$make runとかするとapiやfrontのrun.pyをまとめて実行してくれます。
#$make help
init 最初に行う処理です。ライブラリのインストールのみ。
backup プロジェクトをzip化します。
run FastAPIとStreamlitを起動します。
docker-up docker-composeでFastAPIとStreamlitを起動します。dockerを使う場合はこちらから。
help Display this help screen
ベタ打ちならMakefileは無くてもかまいません。
docker使わないのであればdockerディレクトリもdocker-compose.ymlも必要ありません。
おまけ（Docker）
Dockerで再現できるようにしました（詳細は割愛します）。
最下コードセルのプロジェクトのダウンロードで今回のプロジェクトをダウンロードします。
解凍してMakefileファイルのあるディレクトリでターミナルを起動して$make docker-up後、しばらくしたらコンテナが作成されFastAPIとStreamlitが起動するのでhttp://localhost:[Streamlitのポート番号]でStreamlitに接続できます。
colabで立ち上げたアプリの続きから作業ができます。
コンテナやらを消して今回のプロジェクトに関わった環境をクリアに終了したい場合は、今回のプロジェクトのdocker-ocmpose.ymlのあるディレクトリ下で
$ docker-compose rm
$ docker-compose down --rmi local -v
これで綺麗サッパリ消えてくれます。
Play With Dockerにて動作確認できました。
（ただし、FastAPIのBASE_URLはPlay With Docker側のホストに変更しなければなりません。）
おわりに
いかがでしたでしょうか。
フロント側をStreamlitで、APIサーバー側をFastAPIで、というようにそれぞれサーバーを立ち上げてお互い通信し合うようなアプリをcolab完結で作りました。メリットとしては単独でAPIを使うことができるのでフロント側は特定のGUIに囚われる事なく、スキーマ駆動開発ができることかなと思います。
参考