🌎

PythonのPyWebIOで作成したWebアプリをHerokuでデプロイしてみた

2021/07/26に公開

追記:2022/1/22 でアプリの公開を停止しました。

Webアプリを1週間で作るイベント、Web1Weekに参加し、PyWebIOというWeb用のPythonライブラリ+Herokuでデプロイしたのでまとめます。

アプリ

アプリ概要

コードはこちら

なお、最適化についてはOR-Toolsを使っていますが、詳細は省略します。

ファイルの構成

下記のファイルで構成しています。

app.py Webアプリ本体。PyWebIOで画面構成を作り、バックエンドにFlaskを使用。
Procfile デプロイ後実行するファイルとポートを指定。
requirements.txt 必要なライブラリとバージョンを指定しているファイル。
runtime.txt Pythonのバージョンを指定しているファイル。
README.md 作成する必要はないが、アプリの概要を記載しているファイル。

Procfile や runtime の詳細は下記サイトを参照ください。

https://qiita.com/frosty/items/66f5dff8fc723387108c

PyWebIOでアプリ作成

PyWebIOのインストール

pip install -U pywebio

https://pywebio.readthedocs.io/en/latest/

画面

基本的に 入力を受け付ける input_xxx と、処理結果を表示する output_xxx、というメソッドを使って画面を作成します。

https://pywebio.readthedocs.io/en/latest/input.html

https://pywebio.readthedocs.io/en/latest/output.html

CSS を指定できるメソッドもあるようですが、基本的には入力フォームやチェックボックス、テーブルやテキストの出力を簡単に作成することしかできません。

また、単純にやると1画面1機能しか表示できません。

いくつかの機能を1画面上で組み合わせるには、後述の input_group、output を使う必要があります。

pywebio.input の Function

from pywebio.input import *

テキスト入力フォーム(input、textarea) や ドロップダウンリスト(select)、ラジオボタン(radio)、チェックボックス(checkbox)、ファイルのアップロード(file_upload)といった機能があります。

詳しくは公式HPを見るとよいでしょう。

input_group

input_group は複数の input Function をまとめて1画面に表示できる。

https://pywebio.readthedocs.io/en/latest/input.html#pywebio.input.input_group

input_group_dict = input_group(
    "xxxx" # 表題
    [
      input_xxx(xxx, name="input01"), # 構成1
      input_xxx(xxx, name="input02"), # 構成2
      input_xxx(xxx, name="input03"), # 構成3
    ]
  )

input_group で取得したデータは、input_group_dict["input01"]とすることで辞書型で参照できる。

pywebio.output の Function

from pywebio.output import *

テキスト出力(put_text) や 表の出力(put_table、put_grid)、スクロールバー(put_scrobable)、チェックボックス(checkbox)、ファイルのアップロード(file_upload)といった機能があります。

詳しくは公式HPを見るとよいでしょう。

output

output は複数の pywebio.output の Function をまとめて1画面に表示できる。

https://pywebio.readthedocs.io/en/latest/output.html#pywebio.output.output

output01 = output(output_xxx())
output02 = output(output_xxx())
output03 = output(output_xxx())

put_table([
    [output01],
    [output02],
    [output03],
])

バックエンド用の Flask

from flask import Flask, send_from_directory
from pywebio import STATIC_PATH
from pywebio import start_server
import argparse

### ローカルサーバー起動用。デプロイ時はコメントアウトしている
# if __name__ == '__main__':
#     make_schedule()

# app.run(host='localhost', port=80)


### デプロイ用
app.add_url_rule('/schedule', 'webio_view', webio_view(make_schedule),
            methods=['GET', 'POST', 'OPTIONS'])

if __name__ == '__main__':
    parser = argparse.ArgumentParser()
    parser.add_argument("-p", "--port", type=int, default=8080)
    args = parser.parse_args()

    start_server(make_schedule, port=args.port)

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

https://github.com/krishnaik06/Pywebheroku

デプロイ

デプロイに必要なファイルを作成する。

  • Procfile
web: python app.py --port=$PORT
  • runtime.txt
python-3.x.x # 使うPythonのバージョンを指定
  • requirements.txt
ライブラリ名==x.x.x # 使うライブラリ名とバージョンを指定
 etc.

https://note.nkmk.me/python-pip-install-requirements/

GitHubのレポジトリにデプロイ用のファイルをプッシュする。

Heroku の App connected to GitHub で GitHubのリポジトリと連携する。

Heroku の Deploy タブ内の Manual deploy から手動デプロイを実行する。

https://qiita.com/sho7650/items/ebd87c5dc2c4c7abb8f0

以上になります、最後までお読みいただきありがとうございました。

Discussion