Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Streamlit ホスティング基盤をどのように作ったか

GO Inc. dev
September 20, 2024
810

Streamlit ホスティング基盤をどのように作ったか

GO TechTalk #29 タクシーアプリ『GO』のログ解析の民主化を促進するStreamlitの活用 で発表した資料です。

■ YouTube
https://www.youtube.com/watch?v=vcE70wYfrOA

■ connpass
https://jtx.connpass.com/event/328998/

GO Inc. dev

September 20, 2024
Tweet

Transcript

  1. © GO Inc. 2 自己紹介 GO株式会社 データエンジニア / 伊田 正寿

    • 家族: 妻、長女5歳、次女2歳 • 夏休み: サンリオピューロランドに行きました。けろけろけろっぴ推し プロフィール写真 正方形にトリミングした写 真を「図形に合わせてトリ ミング」で円形にすると真 円になる
  2. © GO Inc. 課題 1. 問い合わせ対応の負荷軽減のため、Streamlit を利用して手軽にツー ルを公開したいという要望があがっていた 2. Lookerの制約で可視化が難しい分析があった。具体的にはLookerは

    件数が5000件までの制限があることや、統計モデルなどを利用した インタラクティブな可視化ができなかった。一方、JupyterHub では 可視化は可能であるが社内に広く共有するものではなかった これらの要望に対応するため Streamlit のホスティングの検討を始めた
  3. © GO Inc. 4 ホスティングの要件 • クラウド上で開発が完結する ◦ 弊社のデータの利用ルールとして、本番データをローカルにダウ ンロードすることを禁止していることから、クラウド上で開発が

    完結する必要がある • 開発者専用の Streamlit をホスティングする ◦ 開発者専用とすることで利便性向上を図る ▪ 開発作業でコンフリクトが発生しない ▪ 好きなライブラリを自由に導入できる ▪ OOMなどが発生しても他のホストに影響を与えない
  4. © GO Inc. ホスティング基盤により、開 発者は分析結果を共有できる ようになった ▪仕組み 開発者はコードエディタ (Jupyter) で編集し、

    Streamlit で可視化する。 Streamlit と Jupyter は永続 ストレージを共有しており、 .py ファイルを配置すると、 Streamlit のホットリロード 機能でコードが反映される 5 Streamlit ホスティング基盤 v1 アーキテクチャ BigQuery 分析 データ ・ ・ ・ コンテナ実行環境 開発者 ロード バランサー Cloud Load Balancing 認証 Identity-Aware Proxy IP制限 Cloud Armor 閲覧者1 閲覧者2 閲覧者n ・ ・ ・ GCP分析環境 サイト1 サイト1 コード エディタ (Jupyter) 永続 ストレージ1 サイトn サイトn コード エディタ (Jupyter) 永続 ストレージn
  5. © GO Inc. 解決策3 Pull Request のマージで GitHub Actions を発火し、

    自動デプロイする 解決策1 GitHub Copilot が利用できる 環境を構築する v2での解決策 6 v1 アーキテクチャ の問題点 課題2 他の人のコードを真似できない 課題3 JupyterのUIで複数ファイルを Streamlitにデプロイするのが 面倒だ 課題1 Jupyter では GitHub Copilot が利用できないので 生産性が低い v1の問題点 開発者に環境を開放したところ下記の問題点が出たことから、v1 を破棄して v2 として作り直す ことにした 解決策2 GitHub でコードを管理する
  6. © GO Inc. 要件 • クラウド上で開発が完結する • 開発者専用の Streamlit をホスティングする

    追加要件 • 解決策1 ◦ GitHub Copilot が利用できる • 解決策2 ◦ GitHub でコードを管理する • 解決策3 ◦ PR のマージで GitHub Actions を発火し、自動デプロイする 7 ホスティングの要件 v2
  7. © GO Inc. 8 プレビュー環境 と 社内公開環境 プレビュー環境 コンテナ実行環境 サイト

    追加要件に対応するためプレビュー環境と社内公開環境の2枚構成にすることにした • プレビュー環境は GitHub Copilot を使って開発&デバッグできる方式を構築する • 社内公開環境は PR のマージで GitHub Actions による自動デプロイ方式に直す 開発者 社内公開環境 コンテナ実行環境 イメージ リポジトリ サイト
  8. © GO Inc. プレビュー環境により、GitHub Copilot の支 援を受けて開発することができるようになった ▪仕組み コンテナ開発支援ツールを利用してローカルで GitHub

    Copilot の支援を受けて開発し、デ バッグはGKE上のコンテナにポートフォワード で実施する • Skaffold はビルド、プッシュ、コンテナ 作成、ポートフォワードを1コマンドで実 行できるツールである • Skaffold はローカルの変更を検知してす ぐにプレビュー環境に反映できるので開 発体験を損なわない • ツール利用時に必要となるライブラリ、 k8sなどの設定、コマンドはタスクラン ナーで隠蔽した。これにより開発者は開 発に集中できる 9 Streamlit ホスティング基盤 v2 (プレビュー環境) Internet コンテナ実行環境 サイト 上り下り ともに 通信不可 BigQuery 分析 データ イメージ リポジトリ 開発者 コンテナ開発支援ツール (Skaffold) イメージ プッシュ GCP分析環境 コンテナデプロイ & ポートフォワード
  9. © GO Inc. 10 Streamlit ホスティング基盤 v2 (社内公開環境) BigQuery 分析

    データ ・ ・ ・ コンテナ実行環境 ロード バランサー Cloud Load Balancing 認証 Identity-Aware Proxy IP制限 Cloud Armor 閲覧者1 閲覧者2 閲覧者n ・ ・ ・ GCP分析環境 サイト1 サイトn リバース プロキシ イメージ リポジトリ 開発者 ホスティング基盤により、開発 者は分析結果を共有できるよう になった ▪仕組み プレビュー環境を利用して開発 したコードを GitHub にプッ シュし、Pull Request をマージ すると本番にデプロイされる ※ nginx導入は運用改善パート で解説します
  10. © GO Inc. 11 ▪結果 • 狙い通り2つの課題は解決できた ▪予想以上の反響 • 開発者:

    20名 • 閲覧者: 130名(2024年1月〜8月実績) ※ 全社員約600名(2024年6月時点) ▪アナリストからの評判 • BIツールで実装するにはちょっと複雑な分析を、フィルター条件を変 えながら見たいという要望があり、それを適宜出し直してレポートに まとめる手間がなくなったので非常に助かっています • Jupyter Notebook で実行していたものを Streamlit に移行したこと で可視化工数が低くなったと感じています • ローカルのIDEで本番のデータを使えてストレスフリーでした 結果
  11. © GO Inc. 12 • 課題 ◦ 問い合わせ対応の負荷軽減のために手軽にツールを公開したい ◦ Lookerの制約で可視化が難しい分析があった。一方、JupyterHub

    で は可視化は可能であるが社内に広く共有するものではなかった • 要件 ◦ クラウド上で開発が完結する ◦ 開発者専用の Streamlit をホスティングする ◦ GitHub Copilot が利用できる ◦ GitHub でコードを管理する ◦ Pull Request のマージで GitHub Actions を発火し、自動デプロイする • ホスティング基盤 ◦ 紆余曲折を経て、プレビュー環境と社内公開環境の2枚構成となった • 結果 ◦ 狙い通り課題を解決できた。さらに全社員の2割相当に利用されてお り、Streamlit ホスティング基盤がなくてはならないものになった まとめ