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

はじめに

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

最寄りのバス停にバスがあと何分で着くかだけを表示するものなんだけど、1番よく使う#熊本 #MaaS #M5Stack #GTFS pic.twitter.com/pjmSrhtCe0

— がちもとさん@メタバース熊本 (@sotongshi) December 16, 2021

Streamlitに対応したので、

できたー pic.twitter.com/JEjrJ316bj

— がちもとさん@メタバース熊本 (@sotongshi) January 4, 2022

デプロイしてみました。

開発環境

• Windows 10
• Python 3.9
• Docker
• Azure

実装

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

2．Docker Windows をインストール

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

docker run -it hello-world

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

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

docker login xxxx.azurecr.io

6．プッシュ

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

7．ファイル準備

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

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．ビルド

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

9．プッシュ

docker push xxxx.azurecr.io/hello-world

10．レポジトリを選んでWebAppにデプロイ

11．URLにアクセス

12．表示されたら成功！

お疲れ様でした。

参考文献