Djangoで静的ファイル(css、JavaScript、画像など)を扱うのは難しいとされています。
この記事では、Djangoでの静的ファイルの扱いについて、これだけ押さえておけばいいというポイントに絞って解説します。
Djangoは静的ファイルの扱いが厄介
この記事で扱うファイルは、ローカルマシンでは次のようなフォルダ構成にすることが一般的です。
プロジェクト名
|
|-プロジェクト名
| |-settings.py
|
|-アプリ名
|
|-static
| |-アプリ名
| |-静的ファイル
|
|-templates
|ーアプリ名
|-htmlテンプレートファイル
例えばcssを読み込むhtmlテンプレートファイルに、以下のように書きます。
<link rel="stylesheet" href="{% static 'reserve/css/main.css' %}">
ここでreserveはアプリ名です。
これでとりあえずローカルではデフォルトのままでrunserverで動きます。またこのようなフォルダ構成はDjangoの教科書に載っているフォルダ構成でもあります。
ところが、いざサーバーに持って行ったら、cssが読み込まれないとか、画像が表示されないということになります。
そこで、サーバーでデプロイする際のポイントをまとめます。
必須!二つの設定項目
いろいろ設定項目はありますが、二つ押さえておけば大丈夫です。
というよりも、下手にいじると動かなくなるので、この二つで調整するのが最も無難です。
STATIC_URL
settings.pyで設定します。
URL to use when referring to static files located in STATIC_ROOT.
(STATIC_ROOTにある静的ファイルを参照するときに使用するURL。)
引用:https://docs.djangoproject.com/en/3.1/ref/settings/#settings-staticfiles
と公式ドキュメントではなっていますが、これは
STATIC_URL = '/static/'
としておいてください。このままで大丈夫です。
STATIC_ROOT
同じくsettings.pyで設定します。
The absolute path to the directory where collectstatic will collect static files for deployment.
(collectstaticがデプロイ用の静的ファイルを収集するディレクトリへの絶対パス。)
引用:https://docs.djangoproject.com/en/3.1/ref/settings/#settings-staticfiles
と公式ドキュメントではなっています。
STATIC_ROOTは、後述するcollectstaticのときに使用します。
これは、例えば
STATIC_ROOT = '/var/www/gym/(プロジェクト名)/static'
のように、サーバーでのプロジェクトが置いてある絶対パスを指定し、その後に任意のディレクトリ名を付けます。これが一般的です。
というのは、サーバーでは静的ファイルを一か所に集めてデプロイするからです。別にアクセスできるところならどんなところに置いてもいいのですが、自身のDjangoプロジェクトディレクトリの配下に置いた方がいいでしょう。
collectstatic
さて、STATIC_ROOTとSTATIC_URLをこのように設定したら、
python manage.py collectstatic
を実行します。
こうすることにより、前述の構成のようなディレクトリ構成にしていた場合、静的ファイルがSTATIC_ROOTで指定されたディレクトリに集められます。
それでアクセスしてみてください。cssが読み込まれ、画像も表示されるはずです。
もちろん、静的ファイルに変更があった場合、その都度collectstaticを実行しなければなりません。保守作業の必須項目です。
なぜこのような機構を採用したのか?
それにしても、Djangoは、なぜこのような静的ファイルの管理機構を採用したのでしょうか?
それは、静的ファイルのレスポンスを本体から切り離し早くするため、です。
静的ファイルはPythonコードから影響を受けません。だから、Pythonコードの処理と切り離す目的で、このような機構を採用したのです。
(影響を受けない、ということは、JavaScriptコードにPythonファイルから値を渡すことはできないので注意してください。JavaScriptコードでPythonからもらった値を処理したい場合、そのJavaScriptはHTMLテンプレートファイル内に書いてください)
まとめ
この記事では、Djangoの静的ファイルの扱いについて解説しました。
一見難しそうに見えるDjangoの静的ファイルの扱いですが、それは理由があることで、覚えてしまえばそう難しいものではありません。
こなしていきましょう。