はじめに

DjangoでECサイトを作成しHerokuにpushしたところ、管理画面以外ではサーバーエラー（500）が返ってきてしまいアプリが表示できませんでした。

結果的にはtemplatesの凡ミスでしたが、原因がわかるまでにかなり時間がかかってしまったので備忘録としてまとめてみました。

問題

ローカルでは表示できるがHerokuでは表示できない
設定がおかしいのかと思い、setting.py, url.py, requirements.txtを調べてみるが問題ない

解決

画像を保存するためのCloudinaryをセットしていなかったこと、templatesに入っているテンプレで画像を表示しない場合の考慮がされていなかったため、サーバーエラーと判断されていました。

原因

templatesの中のファイルを表示する箇所が以下のような記載になっていました。(一部抜粋)

<div class="card h-100">
    <img class="card-img-top" src="{{ product.image.url }}" alt="{{ product.name }}" />
        <div class="card-body p-4">

if文を記載していなかったため、画像が登録されていない場合の考慮がされていませんでした。
if文を追加して以下のように直しました。

<div class="card h-100">
    {% if product.image %}
        <img class="card-img-top" src="{{ product.image.url }}" alt="{{ product.name }}" />
    {% endif %}
    <div class="card-body p-4">

他のテンプレートでも同じ要領で画像がない場合に備えてif文を記載し、Heroku上のすべてのページでサーバーエラーを修正することができました。

教訓

ローカルでは画像を登録済みで確認していたのでエラーが発生せず、HerokuではCloudinaryをセットしていなかったので画像の登録ができない状態、というように前提条件が違っていたのですが、ローカルが全く問題なかったのでHerokuでしか発生しないと思い込んでしまいました。

そのため、設定ファイル関連に原因があるとして意味のない箇所の調査に時間をかけてしまいました。
ローカルで画像を削除すると、ローカルでもエラーが発生しました。
確認せずに進めていたことで見落としてしまったと思います。

次からはしっかり状態やログなどを確認して状況を見極める必要があると感じました。