Streamlitで作ったWebアプリをコンテナ化してデプロイ（Windows10、Python3.9、Azure Container Registry）

# はじめに
最寄りのバス停にバスがあと何分で着くかだけを表示するもの作ったんですけど、

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">最寄りのバス停にバスがあと何分で着くかだけを表示するものなんだけど、1番よく使う<a href="https://twitter.com/hashtag/%E7%86%8A%E6%9C%AC?src=hash&amp;ref_src=twsrc%5Etfw">#熊本</a> <a href="https://twitter.com/hashtag/MaaS?src=hash&amp;ref_src=twsrc%5Etfw">#MaaS</a> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://twitter.com/hashtag/GTFS?src=hash&amp;ref_src=twsrc%5Etfw">#GTFS</a> <a href="https://t.co/pjmSrhtCe0">pic.twitter.com/pjmSrhtCe0</a></p>&mdash; がちもとさん@メタバース熊本 (@sotongshi) <a href="https://twitter.com/sotongshi/status/1471274080100040705?ref_src=twsrc%5Etfw">December 16, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Streamlitに対応したので、

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">できたー <a href="https://t.co/JEjrJ316bj">pic.twitter.com/JEjrJ316bj</a></p>&mdash; がちもとさん@メタバース熊本 (@sotongshi) <a href="https://twitter.com/sotongshi/status/1478168803662249989?ref_src=twsrc%5Etfw">January 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

デプロイしてみました。

# 開発環境
- Windows 10
- Python 3.9
- Docker
- Azure

# 実装
1．Azure Container Registryで新しくレジストリを作成

2．Docker Windows をインストール

https://docs.docker.com/get-started/

3．コマンドプロンプトを開いてhello-worldを実行

~~~bash
docker run -it hello-world
~~~

4．管理者ユーザーを有効化

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/1efc7227-9a02-14f5-b60b-d61518b793ad.png)

5．コマンドプロンプトを開いて、管理者ユーザーでログイン

~~~bash
docker login xxxx.azurecr.io
~~~

6．プッシュ

~~~bash
docker tag hello-world xxxx.azurecr.io/hello-world
docker push xxxx.azurecr.io/hello-world
~~~

7．ファイル準備

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/960d9bca-32be-ff79-144a-215156255c40.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/e4920885-290e-83d8-fcd3-5e03a48e3363.png)

~~~app.py
import streamlit as st
import pandas as pd 
import requests 
import json
    
st.markdown("# バスあと何分（くまもと）")
endpoint = st.secrets["endpoint"]
url = f"{endpoint}/stopnames"
headers = {'x-api-key': st.secrets["apikey"]}
response = requests.get(url, headers=headers, timeout=(29, 29))

if response.status_code == 200:
    stop_names = response.json()['results']
    stop_names.insert(0, '停留所を入力')
    stop_name_1 = st.selectbox('乗車停留所', stop_names)
    stop_name_2 = st.selectbox('降車停留所', stop_names)

    if st.button("検索"):
        bar = st.progress(0)
        url = f"{endpoint}/minutes?stop_name_1={stop_name_1}&stop_name_2={stop_name_2}"
        response = requests.get(url, headers=headers, stream=True, timeout=(29, 29))
        filesize = int(response.headers['content-length'])
        chunks = 0
        data = b''
        for chunk in response.iter_content():
            data += chunk
            chunks += len(chunk)
            bar.progress(chunks/filesize)
        results = json.loads(data)['results']
        for result in results:
            st.write(result)
~~~

~~~requirements.txt
Streamlit>=1.4.0
pandas
requests
~~~

~~~Dockerfile
FROM python:3.9

COPY . /opt/app
WORKDIR /opt/app

RUN pip3 install -r requirements.txt
RUN mkdir ~/.streamlit
RUN cp .streamlit/config.toml ~/.streamlit/config.toml
RUN cp .streamlit/secrets.toml ~/.streamlit/secrets.toml

EXPOSE 80
USER root

ENTRYPOINT ["streamlit", "run"]
CMD ["app.py"]
~~~

~~~config.toml
[server]
port = 80

[browser]
serverPort = 80
~~~

~~~secrets.toml
endpoint = "https://xxxx.execute-api.ap-northeast-1.amazonaws.com/api"
apikey = "xxxx"
~~~

8．ビルド

~~~bash
docker build . -f ./Dockerfile -t xxxx.azurecr.io/hello-world
~~~

9．プッシュ

~~~bash
docker push xxxx.azurecr.io/hello-world
~~~

10．レポジトリを選んでWebAppにデプロイ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/22b96954-5eeb-e1f1-6041-5de3f5da2077.png)

11．URLにアクセス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/a0ac0c94-18f9-e68b-ab77-6f65a0ea2073.png)

12．表示されたら成功！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/4cdab224-35da-a7b3-fd34-36bb3722c16c.png)

お疲れ様でした。

# 参考文献

https://qiita.com/yamaskai/items/9a6178a0a21e6c89ee91

https://qiita.com/narita1980/items/bad3ea8ffa60f6891fbd