1. 先理解整體架構
當你看到一個 Streamlit 網頁 App（例如部署在 Streamlit Community Cloud），其實背後流程是：
使用者瀏覽器簡單說：
│
│ HTTP Request
▼
Streamlit Server (雲端)
│
│ 讀取
▼
GitHub Repository
│
│ Python 程式
▼
Streamlit Runtime
│
▼
生成 Web UI
GitHub = 程式碼倉庫
Streamlit = UI框架 + Web Server
Cloud = 執行環境
2. 整個流程怎麼實現
假設你要做一個 資料分析 Web App
Step1：寫一個 Streamlit Python 程式
例如：
import streamlit as st
import pandas as pd
st.title("My Data App")
file = st.file_uploader("Upload CSV")
if file:
df = pd.read_csv(file)
st.write(df)
Streamlit 做了幾件事：
1️⃣ 建立 Web Server
2️⃣ 把 Python UI 轉成 HTML
3️⃣ 用 WebSocket 與前端同步
3. 把程式放到 GitHub
例如：
Repository
my-streamlit-app
│
├── app.py
├── requirements.txt
requirements.txt
streamlit
pandas
GitHub 只是 存放程式碼
常用平台：
- GitHub
- GitLab
4. Streamlit Cloud 連動 GitHub
當你在
Streamlit Community Cloud
建立 App 時
你會：
1️⃣ 登入 GitHub
2️⃣ 選擇 repo
3️⃣ 選擇 app.py
Streamlit 會做：
Clone GitHub Repo
↓
建立 Python Environment
↓
pip install requirements.txt
↓
執行 streamlit run app.py
↓
建立 Web Server
所以 GitHub 其實只是程式來源
5. 真正的底層邏輯
很多人以為 Streamlit 是把 Python 轉 HTML
其實不是。
它是：
Python Backend
+
React Frontend
+
WebSocket Sync
架構：
Browser
│
│ WebSocket
▼
Streamlit Server
│
▼
Python Script
核心技術：
技術用途Python寫程式ReactUIWebSocket即時同步TornadoWeb server
Streamlit 的 Server 是基於
Tornado Web Server
6. Streamlit 的「重新執行」機制
Streamlit 有一個很特別的設計：
整個 script 每次互動都會重新執行
例如：
x = st.slider("number")
st.write(x)
流程：
User拖動slider
│
▼
Frontend event
│
▼
WebSocket傳給Backend
│
▼
重新執行Python Script
│
▼
更新UI
所以 Streamlit 的程式其實像：
UI = Python Script 的輸出
不是 MVC。
7. GitHub 自動更新機制
當你 push code：
git push
Streamlit Cloud 會：
GitHub webhook
│
▼
偵測到 repo 更新
│
▼
重新 build
│
▼
重新部署 App
流程：
Developer
│
git push
│
▼
GitHub
│
webhook
▼
Streamlit Cloud
│
Rebuild
▼
Web App 更新
8. Streamlit App 的實際運作流程
當使用者開啟網站：
User打開網址
│
▼
HTTP Request
│
▼
Streamlit Server
│
▼
執行 Python Script
│
▼
生成 UI JSON
│
▼
React 前端 render
互動時：
UI操作
│
▼
WebSocket
│
▼
Python重新執行
│
▼
更新UI
9. GitHub + Streamlit 的完整架構
整體：
Developer
│
▼
GitHub Repo
│
▼
Streamlit Cloud
│
▼
Docker Environment
│
▼
Python Runtime
│
▼
Web Server
│
▼
User Browser
10. 一個完整範例專案
專案結構：
streamlit-demo
│
├── app.py
├── requirements.txt
├── data
│ └── sample.csv
app.py
import streamlit as st
import pandas as pd
st.title("Sales Dashboard")
df = pd.read_csv("data/sample.csv")
st.bar_chart(df["sales"])
requirements.txt
streamlit
pandas
部署：
1️⃣ push 到 GitHub
2️⃣ Streamlit Cloud connect repo
3️⃣ deploy
網址就會變成：
https://xxx.streamlit.app
