「【15分で作る】爆速でStreamlitでTODOアプリを実装する方法」の前半では、Streamlitを使ってTODOアプリを作る方法を解説しました。
今回は上記の記事で作ったTODOアプリをインターネット上に公開する方法を解説します。
一般公開する方法は様々ですが、本記事では学習用にぴったりなXServer VPSを使った構築方法をご紹介します。
Streamlitで作成したTODOアプリを一般公開する方法
Streamlitアプリを一般公開するまでを、手を動かしながら体験してみましょう。
1. XServer VPSを契約する
「エックスサーバーVPSのホームページ」にアクセスして、右上にある「お申し込み」ボタンをクリックしましょう。
その後にプランを聞かれたりするので、今回は以下の構成で組みます。
| 項目 | XServer VPS |
|---|---|
| プラン名 | 標準サーバー（Linux系サーバー） |
| メモリ | 2GB |
| CPU | 3Core |
| SSD | 50GB |
| イメージ | Ubuntu 22.04 |
今回は単純なTODOアプリなので、高いスペックは不要。
一番安いプランを選びました。
2. VPS側でポートを解放する
XServer VPSの「パケットフィルター設定」を開きます。
下の方にある「＋パケットフィルター設定を追加する」ボタンをクリックしましょう。
すると、以下のような画面が出てくるので、まずはSSH用のポートを解放。
再度「＋パケットフィルター設定を追加する」ボタンをクリックして、Streamlit用のポートを解放しましょう。
最後に「フィルタールール設定一覧」がこのような状態になっていれば、設定完了です。
3. VPSサーバーにSSHでログインする
いよいよVPSサーバーにアクセスしていきましょう。
IPアドレスの確認
SSH接続には、VPSサーバーのIPアドレスが必要です。
IPアドレスは、「XServer VPSパネル」の「クリップボードにコピーボタン」をクリックすると取得できます。
ターミナルでSSHログインを行う
ターミナルを起動して、以下のコマンドを実行します。
ssh root@[先ほどコピーしたIPアドレス]すると、rootパスワードが聞かれるので入力して実行します。
rootパスワードとは、「1. XServer VPSを契約する」で説明したパスワードのことです。
正しいパスワードが入力されると、初回ログインでは次のメッセージが表示されます。
➜ ~ ssh root@[先ほどコピーしたIPアドレス]
The authenticity of host 'xxx.xxx.xxx.xx (xxx.xxx.xxx.xx)' can't be established.
ED25519 key fingerprint is SHA256:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.
This key is not known by any other names.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added 'xxx.xxx.xxx.xx' (ED25519) to the list of known hosts.
root@xxx.xxx.xxx.xx's password:
Welcome to Ubuntu 22.04.2 LTS (GNU/Linux 5.15.0-76-generic x86_64)
# (中略)
Last login: Tue Jul 18 14:16:38 2023 from 125.4.250.935行目の部分は初回ログインだけで聞かれます。yesと入力してEnterキーを押しましょう。
これは、サーバーへの接続先を誰かが勝手に変更する攻撃を感知するためのものです。
例えば、何度も接続していたサーバーがあったとします。ある日、急に誰かが接続先を変えてしまった場合、このメッセージで変なサーバーに接続する前に気づくことができるわけです。
今回はサーバーセットアップ後に初めて接続するケースなので、このメッセージが表示されても問題なしです。
4. サーバー側のセットアップ
VPSのセットアップ直後はOSだけしか入っていません。
Ubuntuのパッケージを最新化する
以下のコマンドで、Ubuntuパッケージを最新化します。
sudo apt update && sudo apt upgrade -y初回はかなり時間がかかるので、終わるまでしばらく待ちましょう。
Python関連のパッケージインストール
Pythonの動作に必要なパッケージをインストールしておきます。
sudo apt install -y python3 python3-pip python3-venv git ufw確認事項が表示された場合には、基本的にEnterキーを押して進む形で問題ないです。
YesかNoで聞かれた場合には、Yesを入力してEnterで進んでいきましょう。
ファイアウォールの設定
UFWというファイアウォール設定を行います。
今回はサーバーにSSHログインする際の22番、Streamlitアプリを公開するための8501番を公開します。
# Streamlitのポート番号を解放
ufw allow 8501
# SSHのポート番号を解放
ufw allow 22
# 初回のみ（確認が入るので「y」）
ufw enable22番と8501番以外は、全て閉じる設定にしました。
設定が反映されているか、以下のコマンドで確かめましょう。
ufw status
# 実行結果例
# To Action From
# -- ------ ----
# 8501 ALLOW Anywhere
# 22 ALLOW Anywhere
# 8501 (v6) ALLOW Anywhere (v6)
# 22 (v6) ALLOW Anywhere (v6) 上記のようになっていれば成功です。
5. TODOアプリをVPSサーバーにアップロードする
今回はrsyncコマンドを使って、プロジェクトファイル群をアップロードします。
まずはTODOアプリの一つ上のフォルダにおります。
cd Project
ls -la
# 実行結果例
# drwxr-xr-x 8 user staff 256 6 13 21:53 kakeibo-app
# drwxr-xr-x 7 user staff 224 6 14 16:21 streamlit-todo-appls -laの結果として、TODOアプリのフォルダが表示されればOKです。
上記の例ではstreamlit-todo-appが表示されているので大丈夫という判断です。
続いてVPSサーバーに転送するコマンドを実行します。
rsync -av --exclude 'venv/' ./streamlit-todo-app/ root@グローバルIPアドレス:/root/streamlit-todo-app/これで、VPSサーバー上にstreamlit-todo-appが転送されました。
一応、サーバー上で正常に転送されたかを確認しておきましょう。
# VPSサーバーにログイン
ssh root@[IPアドレス]続いて、ls -laコマンドで先ほど転送したファイルがあるか確認しましょう。
ls
# 実行結果例
# snap streamlit-todo-appこんな感じでstreamlit-todo-appが表示されていれば成功です。
6. Streamlitアプリをサーバー上で起動する
サーバー上でアプリ起動のためのコマンドを淡々と実行していきます。
まずはアプリのフォルダに移動。
cd streamlit-todo-app続いて仮想環境を構築し、仮想環境に入ります。
python3 -m venv venv
source venv/bin/activateさらにパッケージのインストールを実行。
pip install --upgrade pip
pip install -r requirements.txt最後にStreamlitアプリを起動します。
streamlit run main.py
# 実行結果例
# Collecting usage statistics. To deactivate, set browser.gatherUsageStats to false.
# You can now view your Streamlit app in your browser.
# Local URL: http://localhost:8501
# Network URL: http://xxx.xxx.xxx.xx:8501
# External URL: http://xxx.xxx.xxx.xx:8501上記のメッセージの最後の方に表示されているアドレスに、ブラウザからアクセスしてみましょう。
作成したTODOアプリが表示されていれば、一般公開は成功です！
Q&A
今回のTODOを作るにあたって出てきそうな疑問にお答えします。
登録したTODOを保存したい
CSVやデータベースを用意することで、TODOの保存は可能です。
手軽に実装するならSQLite、本格的に運用するならPostgreSQLなどと連携する形になります。
その場合には、セキュリティやログイン機能の方も実装しておく必要があります。
Dockerコンテナで運用したい
可能です。
Dockerを使った運用は「【15分で作る】爆速でStreamlitでTODOアプリを実装する方法」の後半部分で解説したので、参照してみてください。
ログイン機能をつけたい
簡単なログイン機能は、Streamlit公式で用意されています。
もう少しセキュアな方法であれば「streamlit-authenticator」を使う方法もあります。
SSL化について
現状ではHTTPS通信ではないので、セキュリティ的に脆弱です。
そのため、Let’s EncryptでSSL証明書を取得してセキュリティを担保することを推奨します。
コメント