【Techの道も一歩から】第47回「StreamlitのアプリをNginxで複数ホスティングする」

こんにちは。技術本部研究開発部の高橋寛治です。

以前に紹介したStreamlitは、非常に便利でよく使っています。

buildersbox.corp-sansan.com

Webアプリとしてインターフェイスが提供されるため、ちょっとしたデモを誰かに試してもらうのが容易で重宝しています。

ただ、いつも忘れてしまうのが、Nginxで複数のStreamlitアプリを提供する方法です。

今回は、デモとしてとりあえず動いたらいい状態になるような設定について紹介します。

Nginxの設定

ここからは、Ubuntu 20.04, Nginx 1.18.0での例です。 LinuxディストリビューションやNginxのバージョンによって差異があるかもしれませんが、ご了承ください。

Nginxの設定ファイルは、 /etc/nginx/nginx.conf です。

このファイル内のhttpディレクティブ内に include /etc/nginx/sites-enabled/*; と記載があります。指定ディレクトリ以下の設定ファイルを include するように指定されています。 /etc/nginx/sites-enabled/ 以下にファイルを作成することで、サイトの設定を行います。

デフォルトのhttpサーバの設定ファイルをコピーして編集します。ただし、/etc/nginx/sites-enabled/defaultがすでにある場合は、コピーせず編集してください。

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-enabled/default

次に、 /etc/nginx/sites-enabled/default をエディタで開き、location / ディレクティブの次に、以下のように location /streamlit-sample-1/ ディレクティブを追記します。

        ...
        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
        }

        location /streamlit-sample-1/ {
                proxy_pass http://0.0.0.0:8503/;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $http_host;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
        }
        ...

アプリケーションを追加する際に、基本的に変更するのは、location のプレフィックスと、proxy_pass です。

location のプレフィックスは、上記では location 直後に記述された / や /streamlit-sample-1/ が該当します。

proxy_pass はプレフィックス（ここでは /streamlit-sample-1/）に前方一致したリクエストに対して、プロキシサーバがリクエストする宛先です。

上記が設定されることで、Streamlitが利用するパスが自動的に書き換えられてプロキシサーバによりリクエストされます。例えば localhost でホスティングしている場合、http://localhost/streamlit-sample-1/ にアクセスすると http://0.0.0.0:8503/ の結果をプロキシサーバを通じて取得することとなります。

Nginxの設定ファイル編集後は、設定ファイルを再読込します。設定後に以下のコマンドで再読込することを忘れないようにしましょう。

sudo nginx -s reload

サンプルを一つ起動する

sample_1.py というファイル名で、サンプルアプリを一つ作成します。

import streamlit as st

st.markdown("# Sample-1")

これを8503ポートで起動します。

streamlit run sample_1.py --server.address=localhost --server.port=8503

ブラウザで、http://localhost/streamlit-sample-1/ にアクセスして、Sample-1と表示されているかどうか確認しましょう*1。

別のサンプルアプリを追加で起動する

location /streamlit-sample-1/ ディレクティブの次に、location /streamlit-sample-2/ ディレクティブを追加します。

        ...
        location /streamlit-sample-2/ {
                proxy_pass http://0.0.0.0:8504/;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $http_host;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
        }
        ...

sample_2.py というファイル名で、サンプルアプリを一つ作成します。

import streamlit as st

st.markdown("# Sample-2")

これを8504ポートで起動します。

streamlit run sample_2.py --server.address=localhost --server.port=8504

ブラウザで、http://localhost/streamlit-sample-2/ にアクセスして、Sample-2と表示されているかどうか確認しましょう。

これで2つのStremalitアプリケーションが起動できていることが確認できたかと思います。

他にアプリケーションを追加する場合には、location ディレクティブで別のプレフィックスを設定し、proxy_pass のポートを変更します。また、追加したアプリケーションの起動時にポート番号を合わせるようにします。

これで、デモを複数同時に提供することができます。

デモをサクッと公開する

簡単なデモを作って、複数展開するということはよくあることだと思います。

そんなときに設定で躓くと、時間がもったいないと思います。

内輪で簡単にデモを共有する程度だとNginxに詳しくなる必要は無いと思います。設定ファイルのお作法を知って、サクッと公開していきましょう。

執筆者プロフィール

高橋寛治 Sansan株式会社技術本部研究開発部 Data Analysisグループ

阿南工業高等専門学校卒業後に、長岡技術科学大学に編入学。同大学大学院電気電子情報工学専攻修了。在学中は、自然言語処理の研究に取り組み、解析ツールの開発や機械翻訳に関連する研究を行う。大学院を卒業後、2017年にSansan株式会社に入社。キーワード抽出など自然言語処理を生かした研究に取り組む。

▼執筆者による連載記事はこちら