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

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

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

## streamlit

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

### streamlitの登録（無料）

1. [公式サイト](https://streamlit.io/)にアクセス
    
![streamlit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/f12bec85-7d7f-daf7-a3bd-4af167d91d8a.png)

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

### Pythonでサイト作成

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

    ```bash:ライブラリのインストール
    pip install streamlit
    pip install numpy
    ```

2. streamlitの動作確認
    
    ```bash:streamlitの動作確認
    streamlit hello
    ```
    
3. hello_app.py
    
    ```python: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. ローカルで立ち上げてみる
    
    ```bash:webアプリの立ち上げ
    streamlit run hello_app.py
    ```
    
    結果としては，
    
    ```bash:結果
    You can now view your Streamlit app in your browser.
    
      Local URL: http://localhost:8501
      Network URL: http://192.168.11.20:8501
    ```
    
    と表示され，ブラウザが立ち上がる．
    
    
![streamlit2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/33c3bebb-52a8-5def-4f91-9ca9015a6c6b.png)


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

## ngrok（エングロック）

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

### ngrokの登録（無料）

1. [公式サイト](https://ngrok.com/)にアクセス
    
     ![ngrok.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/b72d2d8d-3732-ff29-406d-70d850258b9c.png)

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

### ngrokのセットアップ

![ngrok2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/2473e3d8-9aca-4ca9-db1d-c7c386b6f63a.png)


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アプリを立ち上げる
    
    ```bash:webアプリの立ち上げ
    streamlit run hello_app.py
    ```
   ![s+n.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/9e647466-2246-c6c5-796c-b857afea9267.png)

    
2. ngrokでグローバル公開設定
    
    ```bash:グローバル公開
    ngrok http 8501
    ```
    
    ![s+n2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/93f85e90-c1a9-3184-9e9b-3a7fd0ed86d5.png)

    
3. ngrokにより生成されたURLにアクセス
    
    [https://dbdf-2400-4153-a021-2710-5d86-3390-9d6c-6eba.jp.ngrok.io](https://dbdf-2400-4153-a021-2710-5d86-3390-9d6c-6eba.jp.ngrok.io/)
    
![s+n3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/014742da-cf53-0d8c-499d-146f366ddfe8.png)

![streamlit2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/78322ee3-ede9-5fbd-0281-7c7ec63be1d6.png)

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

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

## 参考文献

https://www.youtube.com/watch?v=yYHBRlYj77g