Djangoにおける静的ファイル（イメージファイル、CSSファイル、Javascriptファイル）の取り扱い方について

Djangoにおいて静的ファイルを使用するのは難しいです。

静的ファイルを利用するには、Djangoの仕様そのものを理解しないといけません。なので、どうしても解説が複雑になってしまいます。

設定方法

■index.htmlへの記述

index.htmlの一番上の行に、以下を記述します。

この記述をする事で、これから設定する、staticフォルダをindex.htmlファイル内で使用できるようになります。

{% load static %}

例として、スタイルシートを開く場合、staticフォルダ内にあるappdir/css/style.cssを指定しています。

<link rel="stylesheet" href="{% static 'appdir/css/style.css' %}" />

■urls.pyへの記述

index.htmlへの記述が完了したら、次はurls.pyを設定します。

まずはモジュールをインポートします。

from django.conf import settings
from django.conf.urls.static import static

urlpatternsを編集してインポートしたstaticを追加します。staticの第一引数には、staticフォルダへのパス、第二引数には、staticフォルダのドキュメントルートを記述します。

urlpatterns = [path('', views.index, name='index')] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

index.htmlに記述した、

の部分のstaticは、DjangoでレンダリングされHTMLに変換されると、staticの第一引数に指定したフォルダへのパスに書き換わります。

■settings.pyの記述

プロジェクトフォルダ内にあるsettings.pyを編集します。

settings.pyの最後の行に以下を記述します。

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

urls.pyでインポートしたsettingsは、settings.pyファイルの事です。

urls.pyで、staticの第一引数に、変数settings.STATIC_URLを指定しましたが、この変数に’/static/’が入ります。

staticの第二引数に、変数document_root=settings.STATIC_ROOTを指定しましたが、この変数に、[os.path.join(BASE_DIR, ‘static’)]が入ります。

第二引数で指定した変数は、settings.STATIC_ROOTですが、settings.pyでSTATIC_ROOTの設定をしていない場合は、Djangoの仕様により、STATIC_ROOTの代わりに、STATICFILES_DIRが参照されます。

settings.pyで指定したSTATICFILES_DIRS = [os.path.join(BASE_DIR, ‘static’)]は開発中のみ使用されます。

本番環境では参照されないドキュメントルートです。

つまり、settings.py内の、DEBUGがFalseになっていると、参照されません。

DEBUG = False

DEBUG = Trueは、エラーがあった場合に、そのエラー内容を表示させる事ができます。本番環境では、セキュリティ上、DEBUG = Falseとします。

開発中は、各アプリフォルダの中にstaticフォルダを入れて、その中で、imageファイルや、cssファイル、javascriptファイルを管理します。

STATICFILES_DIRS = [os.path.join(BASE_DIR, ‘static’)]は、それらアプリ内にあるstaticフォルダを指定するドキュメントルートです。

本番環境では、STATIC_ROOTで指定したフォルダが参照されるように、ウェブサーバーで指定します。

開発環境では、動的なファイルも静的なファイルもすべてDjangoが対応していましたが、本番環境では、動的なファイルはDjangoが対応し、静的なファイルはウェブサーバーが対応します。

例えば、クライアント（ウェブブラウザ）が画像ファイルをリクエストした場合は、ウェブサーバーがレスポンスを返します。動的なファイルであるpythonファイルにリクエストがあった場合は、ウェブサーバーは、Djangoが動いているアプリサーバーに仕事を振り、Djangoがレスポンスを返します。

このように仕事を振り分けたほうが、レスポンスを速く返せる為、DJangoでは、このような仕様になっています。

デプロイ時は、ウェブサーバーを構築する際に、静的なファイルが置かれているフォルダを指定しますが、その指定するフォルダに予めファイルを集めておきます。

ファイルを集めるコマンドが、collectstaticです。manage.pyがあるフォルダ内で以下を実行します。

python manage.py collectstatic

collectstaticで、STATIC_ROOTで指定したフォルダに、それまで、STATICFILES_DIRSで管理していた静的なファイルを全て集めてくれます。

STATIC_ROOTは、collectstaticコマンドを使用する時だけ参照され、開発中も、本番中も参照されません。

ウェブサーバーを構築する際は、静的なファイルへのアクセスがあった場合は、STATIC_ROOTで指定したドキュメントルートを参照するように設定します。