18
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Djangoで画像が表示されない(staticエラー)

Last updated at Posted at 2018-04-03

Djangoの内蔵サーバーやGunicorn使用時は、Adminやトップの画像は問題なく表示されていたが、AWSのサーバーにデプロイして、NginxとGunicornでhttp経由でも動くようにしたところ、画面やCSSが無効になってしまうという問題に直面したので、その解決経由をメモとして残します。

【原因】

セキュリティ上の問題などから、Nginxなど(Apatchなども同様)のWebサーバーを使用した際は、静的ファイル(CSSなど)は読み込まれなくなってしまいます。
今回、トップ画面の一部の画像も静的ファイルとして(static)いたので、それも表示されなくなってしまっっていました。

#【実践項目】
Django(1.1.3版) 静的ファイル(static files)を集める場所を指定し、そこから読み込むようにする

myproject/myproject/setting.pyに追記
STATIC_URL = '/static/' 
STATIC_ROOT = os.path.join(BASE_DIR, 'static') (←static filesが集まる場所を示します 
myproject/myproject/urls.pyに追加
from django.conf.urls import url, static
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) 読み込むようにします 

上記変更後、python3 manage.py collectstaticを実行します。 これにより、ファイルをSTATIC_ROOTディレクトリに集め、ここを読み込んで静的ファイルがNginxなどでも動作するようになります。
ほかにもいろいろやり方はありますが、今回はこれで解決しました。

#【参考リンク】
django.contrib.staticfilesを使う (一番参考になりました)
Django での static files の扱い方まとめ (理由を理解できました)
djangoでのstaticファイルが読み込まれない闇
Nginx+Gunicorn+AWSでDjangoのadmin画面が崩れているのを修正した時のメモ
Django入門】画像などのstatic(静的)なファイルを使ってみよう
Nginx not serving static files for Django app! Help!

18
16
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?