【Django】本番環境で発生する画像系のエラー3選とその対応方法

カテゴリ：Django　投稿：2022年6月27日1:15、更新：2022年6月27日1:15

・記事の概要　

Djangoでサイトを自作して本番環境に公開した後で発生する画像系のエラーや課題を3つ集めて、その対処法とともにご紹介します。

・この記事の対象　

・これからDjangoで作成したアプリやサイトを本番環境にリリースしようかと考えている方

・既にリリース済みで画像系のエラーや課題にお困りの方

・3つの概要　

(1)開発環境だとできてたのに本番環境で急に画像のアップや表示ができない問題

(2)アクセスによって(https/httpで)画像が出たり出なかったりする問題

(3)画像がレスポンシブ対応できていなくてデバイスによっては見切れて表示されてしまう問題

以上の3点を紹介していきます！

・(1)開発環境だとできていたが本番環境でだけできない問題　

結構困るパターンのやつですよね。これ系は環境差異が何かあるのか？どこだ？？って混乱します。

まずsetting.pyを見てみて欲しいんですが以下のような記載はありますか？

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

その場合は本番環境では「debug=False」にして、結果開発環境で参照してた静的ファイルの場所を本番環境では見に行かなくなったため発生しています。

以下に対応方法も記載していますので見てみて下さい。

本番環境(実稼働サーバ)上でだけ画像アップロード系処理がエラーとなる場合の対応

・(2)画像が出たり出なかったり問題　

httpsでURLにアクセスすると画像は正常に表示されるが、httpだと出ない的な問題です。

発生頻度はあまりないようにも思えるかもしれませんが、ブログなどを運営しておりFeed(RSS)配信をしている場合に、xml内のURLがhttpだったりすると、配信された先にアクセスした人は画像が読み込まれないなんてことになったりします。

これは実は原因は複数あり得てしまうんですが、割と解消方法はひとつに絞れます。

httpでアクセスしてきたものも全てhttpsアクセスにしてしまえば解消するケースが多いです。

Djangoではこの対応をかなりライトにできます。

setting.pyに以下を追記します。

SECURE_SSL_REDIRECT = True

ただこれだと環境設定によってはエラーが発生してしまうこともあり得ます。

その際は以下を参照ください。

SECURE_SSL_REDIRECTの設定で「err_too_many_redirects」が発生した場合の解消方法【nginx】

※もしも本番環境を途中からSSL対応して、その対応前の画像についてのみ問題が発生していたらこの件とは別ものになります。そもそもSSL対応してないよって方がもしいましたら、SSL対応はこの記事とは関係なくしておきましょう。

・(3)スマホなどで見ると画像が見切れる問題　

画像が本来のレイアウト枠をぶち抜いて表示されてしまう問題ですね。

そもそもレスポンシブ対応をしていないと普通に発生しますし、Bootstrapなどで対応していてもdjango-summernoteを利用などで盲点だった的なケースもあるかもしれません。

すごいライトな対応方法だけ記載しておきますと

以下をcssファイルやhtmlのstyleタグ内に記載して、対象の画像ファイルimgタグ内でclass指定してあげましょう。(img全体で反映させてしまうと思わぬ画像サイズの狂いが発生する可能性もあるので、名付けは任意ですが以下のような形式が良いでしょう)

img.blogimg {
  width:100%;
  max-width: 100%;
  height: auto;
}

・まとめ　

いかがだったでしょうか。

結構画像周りはトラブルがあるので少しまとめてみました。ストレージサービスを使っているとそれはそれでキャッシュ周りでも書くことなどはあるのですが、今回は個人開発にフォーカスを当てて書きました。

ちょうど今これを書いている途中で思い出したものとしてはnginxのファイルサイズ上限なんかも該当するのかなと思いました 笑

その場合は以下も参照してみて下さい！

【nginx】413 request entity too largeのnginxエラー解消