webアプリ作成（streamlit + ngrok） Hello World

世の中には様々なwebアプリがあるが，いままでwebアプリというものを作成したことはない．ちょっと興味本位で作ってみたいが，仕組みもいまいちわからない．そこで，Pythonだけで構築できるというstreamlitでwebアプリを作成して，そのwebアプリの仕組みについて理解を深めていくことが目的である．
ここでは，さらにngrokというものを使うことにより，ローカルでのwebアプリ公開ではなく，グローバル公開のところまで進めていきたい．

streamlit

pythonのみでwebアプリを作成できるフレームワーク（cssもhtmlも不要）

streamlitの登録（無料）

1. 公式サイトにアクセス

1. 緑で示したところからアカウントを作成

Pythonでサイト作成

1. pipでライブラリをインストール

   ライブラリのインストール

   pip install streamlit
   pip install numpy
   

2. streamlitの動作確認

   streamlitの動作確認

   streamlit hello
   

3. hello_app.py

   hello_app.py

   import streamlit as st
   import numpy as np
   
   # streamlitのメソッドでmarkdown形式で表示
   st.write(
       """
       # My first app
       Hello *world!*
       """
       )
   
   # 適当なデータ作成
   data = np.arange(0, 10, 0.1)
   
   # streamlitのメソッドでデータを直線グラフに
   st.line_chart(data)
   

4. ローカルで立ち上げてみる

   webアプリの立ち上げ

   streamlit run hello_app.py
   

   結果としては，

   結果

   You can now view your Streamlit app in your browser.
   
     Local URL: http://localhost:8501
     Network URL: http://192.168.11.20:8501
   

   と表示され，ブラウザが立ち上がる．

ここまでではローカルの公開にとどまる

ngrok（エングロック）

ngrokはグローバルにウェブアプリを公開できる

ngrokの登録（無料）

1. 公式サイトにアクセス

   

2. 緑で示したところからアカウントを作成

ngrokのセットアップ

ngrokのこのページにしたがい，自分のOSにあわせてセットアップ．

windows

1. zipをダウンロード

2. zipを展開

   ngrok.exeファイルが入っている

3. authcodeをngrokで実行してyamlファイルを生成

4. ngrok.exeファイルを生成されたyamlファイルと同じところに置いておく

5. ngrok.exeのpathを環境変数で通しておく

グローバルでの公開の準備ができた

streamlit + ngrokでグローバル公開

1. streamlitでwebアプリを立ち上げる

   webアプリの立ち上げ

   streamlit run hello_app.py
   

   

2. ngrokでグローバル公開設定

   グローバル公開

   ngrok http 8501
   

   

3. ngrokにより生成されたURLにアクセス

   https://dbdf-2400-4153-a021-2710-5d86-3390-9d6c-6eba.jp.ngrok.io

これでグローバル公開ができた．

感想

webアプリを作成するときには，PythonならDjangoかなと思っていたが，CSSやHTMLなどその他の知識も求められる．きれいに作りこむなら必要になるだろうが，シンプルなものでよいのならstreamlitでも十分なのではないかと思った．非常に簡単で，たった数行でファイルのやり取りもできる．私のような初心者でもwebアプリの作成が一瞬でできてしまった．

参考文献