🌎

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

2021/07/26に公開

Heroku

追記: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 の詳細は下記サイトを参照ください。

PyWebIOでアプリ作成

PyWebIOのインストール

pip install -U pywebio

画面

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

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画面に表示できる。

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画面に表示できる。

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)

デプロイ

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

Procfile

web: python app.py --port=$PORT

runtime.txt

python-3.x.x # 使うPythonのバージョンを指定

requirements.txt

ライブラリ名==x.x.x # 使うライブラリ名とバージョンを指定
 etc.

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

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

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

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

ファイルの構成

PyWebIOでアプリ作成

PyWebIOのインストール

画面

pywebio.input の Function

input_group

pywebio.output の Function

output

バックエンド用の Flask

デプロイ

Discussion