前言

當使用 Streamlit 做出一個 web app 之後，除了佈署到 Streamlit Community Cloud，我們也可以自己佈署 (例如使用 Docker、Kubernetes)。

* 之前寫的文章：(2023年新版) 使用 Streamlit 簡單又快速建立 Dashboard 網頁

最近剛好有這需求，但我不是要起在根路徑(/)，而是要指定其他路徑(例如 /myapp)，這部分會透過 Nginx 去設定。

不過找了幾篇網路文章，卻還是設定不起來，所以把最終成功的設定分享出來，讓大家少踩一些坑。

設定細節

我需要設定，當其他電腦連到這台主機的某個路徑 (例如 https://mysite.com/myapp)，它可以轉到 Streamlit app 的 port (例如 http://localhost:8000)。

環境

我是在 Windows 11 裡的 WSL (Linux 系統) 起 Docker 環境，裡面跑 Streamlit app。

並在 Windows 底下起 Nginx server (v1.24.0)，讓公司內其他電腦可以連到這台的 localhost。

Nginx 設定

因為 Streamlit 有用到 WebSocket，所以還需要多加幾行相關設定。

WebSocket 是一種網路傳輸協定，用來在 Server 和 Client 之間建立「持續的雙向通訊」通道，是持續的連線，Server 可以主動向 Client 發送資料，而不需要等待 Client 發出請求。
這使得 WebSocket 特別適合用於即時應用場景，比如即時聊天、線上遊戲等。

設定 nginx.conf 檔案，這個檔案可以到 nginx 安裝路徑、/usr/local/nginx/conf、/etc/nginx、/usr/local/etc/nginx 找找。

http {
    ...

    map $http_upgrade $connection_upgrade {
        default upgrade;
        ''      close;
    }
    

    server {
        listen       80;
        listen       443 ssl;
        ssl_certificate      "(省略)/conf/certs/demo.pem";
        ssl_certificate_key  "(省略)/conf/certs/demo.key";
        
        # Streamlit app
        location /myapp {
            proxy_pass http://localhost:8000;

            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;
        }

    }

}

# Streamlit app 的部分我還有看到另外一種設定，但在此案例應該沒差(?)：

        location /myapp/_stcore/stream {
            proxy_pass http://localhost:8000;

            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;
        }
        location /myapp {
            proxy_pass http://localhost:8000;

            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }

Streamlit 指令

這邊是一大重點，因為找到的文章很多都是在說 Nginx 設定，而沒有提到 streamlit run 也要帶相關參數：

1

streamlit run streamlit.py --server.port 8000  --server.enableCORS false --server.enableXsrfProtection false --server.baseUrlPath "myapp"

題外話，可以關閉將使用情況統計資料傳送給 Streamlit：

1

--browser.gatherUsageStats false

結語

雖然我不知道這樣設定是不是最好的，但至少對我有效 (🤣

我把找到的幾篇文章都貼在下方參考連結，如果以上的方法還是幫不了你，可以去參考連結翻翻試試。

參考：
config.toml | Streamlit API reference
How to use Streamlit with Nginx? | Streamlit Discuss
Deploy Streamlit with NGINX with SSL | Streamlit Discuss
Deploy streamlit with nginx + docker | Streamlit Discuss
Run streamlit app on specific URL path | Streamlit Discuss

平靜的海面造就不出優秀的水手。