Flaskで作成したWebアプリがvenv環境では動くが、heroku環境では動作が不安定

Question

#実現したいこと
自身の学習の一環で、目標の時間にかける時間を可視化するWebアプリを作成しています。
利用者の大まかな流れとしては、

①目標の個数を記入
②目標の内容と重みを記入
③目標にかけられる時間を算出するため、その他の時間（仕事や睡眠、食事など）を入力
④平日22日、休日8日とした上で入力情報から可処分時間を計算
⑤可処分時間を重みに基づいて配分し、結果として表示

になります。

#発生している不具合
現在質問させていただきたい内容として、「実行する状況によって発生するエラーやエラー発生有無が異なる」といったことになります。
具体的な状況として、

【状況１】　ローカルのMacOS上に構築した仮想環境（venv）
【状況２】　herokuを利用して公開したWebアプリを開発に使用しているPCで利用した場合
【状況３】　herokuを利用して公開したWebアプリをスマートフォンで利用した場合

の３つがあるのですが、

【状況１】のときはエラーは発生せずにうまく動作します。

【状況２】のときは主に
エラー２_１：　NameError: name 'count_list' is not defined とcount_listが未定義の状態になってしまう
エラー２_２：　目標の個数を３つ以上にすると、目標の記入欄は４つ出現するが、結果は２つもしくは３つしか表示されない
エラー２_3：　目標の個数を３つにすると再度目標の個数入力画面へ遷移する（これは個数が入力されていなかった場合に想定している処理です）

といったエラーが発生します。
エラー２_１に関してはリロードしたり、一度TOP画面へ戻り、再度入力を行うと解消されます。
またこれは時間をあけた場合にのみ観測され、一度再入力し、エラーが発生しなくなるとその直後は何度試してもエラーが発生しません。

エラー２_２、２_３に関しては目標の内容記入欄の個数は入力値と一致しているものの、結果の表示では値が一致しない、といった状況です。
なおこれらの発生頻度は

エラー２_１：　テストの初回のみ（時間をあけると再度発生）
エラー２_２：　１００％エラーが発生
エラー２_３：　５０％程度エラーが発生

【状況３】のときは
エラー３_１：　目標の個数を２つにしたが、結果では３つ表示される。
エラー３_２：　目標の個数を３つにしたが、結果は２つで表示される。
エラー３_３：　目標値記入後に。

2021-02-02T22:25:30.899761+00:00 app[web.1]: File "/app/app.py", line 60, in f_work
2021-02-02T22:25:30.899761+00:00 app[web.1]: impsum += float(importances[i - 1])
2021-02-02T22:25:30.899769+00:00 app[web.1]: IndexError: list index out of range

といったエラーが発生します。
発生頻度は

エラー３_１：　スマホアクセス時初回のみ（ただしエラー３＿２と類似している）
エラー３_２：　50%程度エラーが発生
エラー３_３：　50%程度エラーが発生

になります。

#試したこと
herokuへのアップロードはvenvをactivateした状態で、pip freeze > requirements.txtを作成し、
.gitignoreを下記内容で作成。

# Virtualenv
# http://iamzed.com/2009/05/07/a-primer-on-virtualenv/
.Python
[Bb]in
[Ii]nclude
[Ll]ib
[Ll]ib64
[Ll]ocal
[Ss]cripts
pyvenv.cfg
.venv
pip-selfcheck.json

herokuへコミットする際はgit add .で下記のディレクトリをコミットしています。

- Procfile
- __pycache__
- app.py
- myfunc.py
- requirement.py
- static
  └styles.css
  └img
  　└imgファイル
- templates
  └htmlファイル
- venv

#ソースコード

[app.py]

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

#モジュールのインポート
from flask import Flask, render_template, request
from myfunc import my_remove

#クラスの定義
class Conditions:
    def __init__(self, work = 0, sleep = 0, breakfast = 0, lanch = 0, dinner = 0,\
    bath = 0, housework = 0, others = 0):
        self.work = float(work)
        self.sleep = float(sleep)
        self.breakfast = float(breakfast)
        self.lanch = float(lanch)
        self.dinner = float(dinner)
        self.bath = float(bath)
        self.housework = float(housework)
        self.others = float(others)

    def sum_condition(self):
        sum_wd = self.work + self.sleep + self.breakfast + self.lanch + self.dinner + self.bath + self.housework + self.others
        sum_hd = self.sleep + self.breakfast + self.lanch + self.dinner + self.bath + self.housework + self.others
        return sum_wd, sum_hd

#インスタンス化
app = Flask(__name__)
cond = Conditions()

#ルーティング
@app.route('/')
def f_top():
    return render_template("index.html")

@app.route('/count')
def f_count():
    return render_template('count.html')

@app.route('/goal', methods = ['POST'])
def f_goal():
    if request.form['count']:
        global count
        global count_list
        count = int(request.form['count'])
        count_list = range(1, count + 1, 1)
        return render_template("input_goal.html", count = count_list)
    else:
        return render_template("count.html")

@app.route('/work', methods = ['POST'])
def f_work():
    if request.form.getlist('goal') and request.form.getlist('importance'):
        global goals
        global importances
        global impsum
        goals = my_remove(request.form.getlist('goal'), "")
        importances = my_remove(request.form.getlist('importance'), "")
        impsum = 0
        for i in count_list:
            impsum += float(importances[i - 1])
        if len(goals) == count and len(importances) == count:
            return render_template("input_work.html")
        else:
            return render_template('count.html')

@app.route('/sleep', methods = ['POST'])
def f_sleep():
    if request.form['work-hours'] and request.form['work-minutes']:
        cond.work = int(request.form['work-hours']) * 60 + int(request.form['work-minutes'])
        return render_template("input_sleep.html")

@app.route('/breakfast', methods = ['POST'])
def f_breakfast():
    if request.form['sleep-hours'] and request.form['sleep-minutes']:
        cond.sleep = int(request.form['sleep-hours']) * 60 + int(request.form['sleep-minutes'])
        return render_template("input_breakfast.html")

@app.route('/lanch', methods = ['POST'])
def f_lanch():
    if request.form['breakfast-hours'] and request.form['breakfast-minutes']:
        cond.breakfast = int(request.form['breakfast-hours']) * 60 + int(request.form['breakfast-minutes'])
        return render_template("input_lanch.html")

@app.route('/dinner', methods = ['POST'])
def f_dinner():
    if request.form['lanch-hours'] and request.form['lanch-minutes']:
        cond.lanch = int(request.form['lanch-hours']) * 60 + int(request.form['lanch-minutes'])
        return render_template("input_dinner.html")

@app.route('/bath', methods = ['POST'])
def f_bath():
    if request.form['dinner-hours'] and request.form['dinner-minutes']:
        cond.dinner = int(request.form['dinner-hours']) * 60 + int(request.form['dinner-minutes'])
        return render_template("input_bath.html")

@app.route('/housework', methods = ['POST'])
def f_housework():
    if request.form['bath-hours'] and request.form['bath-minutes']:
        cond.bath = int(request.form['bath-hours']) * 60 + int(request.form['bath-minutes'])
        return render_template("input_housework.html")

@app.route('/others', methods = ['POST'])
def f_others():
    if request.form['housework-hours'] and request.form['housework-minutes']:
        cond.housework = int(request.form['housework-hours']) * 60 + int(request.form['housework-minutes'])
        return render_template("input_others.html")

@app.route('/time_allocate', methods = ['POST'])
def f_time_allocate():
    if request.form['others-hours'] and request.form['others-minutes']:
        cond.others = int(request.form['others-hours']) * 60 + int(request.form['others-minutes'])

        #可処分時間の計算
        freetime_wd = 24 * 60 - cond.sum_condition()[0]
        freetime_hd = 24 * 60 - cond.sum_condition()[1]

        #時間配分
        global allocated_times
        allocated_times = []
        time_goal = []
        for i in count_list:
            all_minutes = freetime_wd * (float(importances[i - 1]) / impsum) * 22 + freetime_hd * (float(importances[i - 1]) / impsum) * 8
            minutes = all_minutes % 60
            hours = all_minutes // 60
            time_goal = [hours, minutes, goals[i - 1]]
            allocated_times.append(time_goal)
        return render_template("result.html", count = count_list, goals = goals,allocated_times = allocated_times)

htmlファイルは数が多くなっているので、不具合が発生しているcount.htmlとresult.htmlのみ載せます

[count.html]

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="../static/styles.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>Time Allocator</title>
    </head>
    <body>
        <main id="count-main">
            <h1>目標の数</h1>
            <div id="count-lead">
                <p>あなたがこの１ヶ月で取り組もうと<br>
                    している目標の数を教えてください</p>
            </div>
            <div>
                <form method="POST" action="/goal">
                    <p>タスクの個数を記入してください</p>
                    <div class="div-input">
                        <input id="input-count" name="count" type="number" step="1" required>
                        <p>個の目標達成を目指す</p>
                    </div>
                    <div class="div-img">
                        <img src="../static/img/busy.png" id="img-count">
                    </div>
                    <div class="div-button">
                        <button type="submit">つぎへ</button>
                    </div>
                  </form>
            </div>
        </main>
        <footer>
        </footer>
    </body>
</html>

[result.html]

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="../static/styles.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>Time Allocator</title>
    </head>
    <body>
        <main id="result-main">
            <h1>計算結果</h1>
            <div id="result-div">
                <p>計算結果が出ました<br>
                    それでは結果を見てみましょう</p>
            </div>
            <div id="result">
                    <p class="title-sentence"><b>あなたは1ヶ月の中で</b></p>
                    {% for lists in allocated_times %}
                    <div class="result-detail">
                        <p>「{{lists[0]}}時間　{{lists[1]}}分」かけて<br>「{{lists[2]}}」</p>
                    </div>
                    {% endfor %}
                    <p>という目標を達成しようとしてます</p>
                    <div class="div-img">
                        <img src="../static/img/result.png" id="img-others">
                    </div>
            </div>
            <button onclick="location.href='/'">Topへもどる</button>
        </main>
    </body>
</html>

#環境
マシン：　MacBook Pro(M1)
Python：　3.8.2
Flask: 1.1.2
Jinja2: 2.11.3
Werkzeug: 1.0.1

長くなってしまい恐縮ですが、お知恵お借りできますと幸いです。
何卒よろしくお願いいたします。

Answer 1

長いので詳しく読んでいませんが、エラー2_1の動作と、count_listの定義の仕方などからWebアプリが正しく動作するプログラムがされていないように感じました。

以下を参考にプログラムを作り直してみてください。

1. Webアプリは性悪説で作ります。
   「性悪説の使い方がおかしい」とかそういう突っ込みはしないでください(笑)
   Webアプリは、悪い人間が使うという前提に設計・実装する必要があります。
   コードをぱっと見た感じだと、/goalでcount_listに何か入力し、そのあと/workとか/time_allocateでcount_listを使用することを想定しているように見えます。(つまり、正しい手順が存在する)
   Webアプリでは、逆順や同じ場所への連続アクセスされた場合にも正しく動作するように作る必要があります。
   count_listが空の場合(定義されていない場合)は、入力を促すページに遷移して問題が起こらないようにするなどが必要です。

2. 入力は正しく無い
   [1]の概念から、入力をそのまま使う(request.form['count']をそのまま使う)のはNGです。
   なんか凄く悪いものが入っているかもしれません。
   エスケープしたりして安全な入力に変換してから使う必要があります。

3. デバッグ環境と本番環境は別
   デバッグ環境は1個だけプロセスが動作し、自分で正しく入力するのでたいてい動作します。
   本番環境は、プロセスが2つ以上動作したり、勝手に再起動したり、正しい順番でアクセスされなかったり、別の悪い人が勝手にアクセスしたりして、デバッグ環境では起こらなかった問題が発生する可能性があります。
   「同時に2以上のアクセスがある」可能性を考慮に入れて設計・実装してください。
   つまり、globalは使わないでください。
   そういうのを処理するために、Webではセッションという概念が用いられます。
   Flaskにもsessionという機能があるのでglobalを置き換えると意図した動作になるかもしれません。
   ※sessionに入れた値は自分で入力した値なので信じたいかもしれませんが、悪いものが入っている可能性があるので信用しないでチェックしてくださいね。

4. データは変数ではなく記録媒体へ
   プログラムの中身がよく分かっていませんが、もしもデータを保存する必要があるならDBの仕様を検討してください。
   herokuはSQliteが使えなかった気がするのでPostgreSQLとかMySQLとかMariaDBとかを使う必要がありそうですが、できることが格段に増えます。
   DBが絡んで来ると、sessionだけでなくcookieとかユーザの管理も絡んできますが、できることが増えるので設計しやすくなるかもしれません。

番外.
request.form['key']で値が取得できますが、値が取得できない可能性があります。
値が取得できない場合はExceptionになってしまうので、とりあえずNoneを取得するということもできます。

value = request.form.get('key', None)

if value is None:
    return 値を再入力して貰ったり・・・

第2引数Noneは、第1引数のkeyが存在しなかった場合に取得できる値です。
第2引数が指定されなかった場合のデフォルト値はNoneなので指定しなくても同じです。

Comments

[baboo]

ご回答いただきありがとうございます！
独学でやっていると上記のようなご指摘を自身の書いたコードに対してもらえることはないのでとても有益でした。
一度大きく書き直してみようと思います。