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に記述した、

<link rel=”stylesheet” href=”{% static ‘appdir/css/style.css’ %}” />

の部分の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が参照されます。

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で指定したドキュメントルートを参照するように設定します。

この記事を書いた人

便利アプリを作っています。アプリを作る過程で得られた技術や知識をシェアします。作成したアプリも公開していますので是非使って頂ければと思います。

スカーレットをフォローする
DjangoPython
スカーレットをフォローする
SEO思考プログラミング思考

コメント

タイトルとURLをコピーしました