Last updated on 2023年7月20日
Django を利用して自分の個人開発プロジェクトを進めていたのですが、staticファイルを読み込めず、困ってしまいました。色々調べたので、解決方法を共有しようと思います。
たぶん、ものすごく初歩的だと思います。
さて、javascriptファイルやcssファイルを認識してくれず、404 Errorが出ることがあります。
このとき、疑うべきこと、またそれぞれの対応法をまとめたので、ご覧ください。
ここに書いてある対応を取れば、大体は動作するようになると思います。
よくある順にまとめました。
Contents
確認１. Django の階層構造の中でstaticファイルは適切に配置されているか？
Djangoでは、javascript, cssなどの静的ファイルは適切な階層構造の中に保存されていなければなりません。
慣習上、javascript、 cssともにstaticという名前のファイルを作り、その中に保存します。
htmlを保存するtemplateフォルダもそうでしたが、自身のアプリケーションフォルダの下にstaticフォルダを作成し、更にその直下にアプリケーションフォルダと同名のフォルダを作成します。
これは同名の静的ファイルが存在した場合に衝突するのを防ぐためで、名前空間といいます。
つまり、ファイル構造は下記のようになります。
├── my application
│ ├── admin.py
│ ├── apps.py
│ ├── __init__.py
│ ├── models.py
│ ├── static
│ │ └── my application
│ │ └── layout.css
│ ├── templates
│ │ └── my application
│ │ └── index.html
│ └── views.py
├── manage.py
├── office
├── myvenv
一番上のmy applicationフォルダが自身の作成したアプリケーションフォルダ、その直下にstaticフォルダを作製し、その中にcssファイルを格納しています。これはjavascriptファイルでも同様です。
確認２．settings.pyに静的ファイルを設定しているか？
アプリケーションを作成したときと同じようにsettings.pyに静的ファイルを設定する必要があります。
設定は本来５通りありますが、今回のような場合は下記の２通りでうまく行くはずです。
- STATIC_ROOT
- STATICFILES_DIRS
STATIC_ROOT
ターミナルで[python manage.py collectstatic フォルダ名]を実行することで、指定先のフォルダに静的ファイルをコピーし、集約することができます。本番環境でデプロイするときはこの操作が必要です。
STATICFILES_DIRS
共通して利用したい静的ファイルを、指定先に保存することで、すべてのアプリケーションなどで利用できるようになります。
settings.pyには上記のどちらもデフォルトでは記載されていません。
したがって手動で追記する必要があります。
settings.pyを開き、下の方にスクロールしていくと、下記の記述があります。
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/
STATIC_URL = 'static/'この下に、
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static")
]を追記してください。 ” “で囲まれたstaticが指定のフォルダです。
確認３.HTMLで読み込んでいるか？
読み込みたいjavascript, cssファイルをhtmlに記載する必要があります。
まず、CSS、JSファイルを読み込むhtmlファイルの先頭に{% load static %}と記述します。
{% load static %}
<html>
:
</html>さらに、JS,CSSを読み込みたい場所で、Djangoに認識させる必要があります。
<script src="{% static 'my_application/layout.css' %}"></script>my_applicationの部分に自分のアプリケーション名を、
layout.cssの部分には読み込みたいjs, cssファイルの名前を入れてください。
Djangoを使っているとよく見る{ }で囲んでください。
これで、完成です。
それでも認識しないときは・・・
稀に、それでも認識しないときがあります。
そのようなときは、
1.スーパーリロード
2.キャッシュ削除
3.実行中のローカルサーバーをCTR+Cで一度停止し、もう一度python manage.py runserverを実行する
を試してみてください。
自分のときは、ローカルサーバーを一旦停止し、再度実行したらできたことがあります。
以上、自分が詰まった部分の共有でした！
参考:下記のサイト様を参考にさせていただきました。ありがとうございます！
ハイパー猫背： https://creepfablic.site/2019/11/20/django-static/#index_id3
Office54： https://office54.net/python/django/css-javascript-static#section4