MENU

Djangoでの静的ファイルの扱いで抑えておくべきポイント

Python

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の静的ファイルの扱いですが、それは理由があることで、覚えてしまえばそう難しいものではありません。

こなしていきましょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

管理人のよしぞと申します。
フリーランス業界で働いている管理人が、業界で働く様々な視点からフリーランスエンジニアに挑戦するためのノウハウを掲載。独立を考えている方にとって手助けになるサイトを目指しています。

目次