（最終更新月：2022年1月）
✔このような方へ向けて書かれた記事となります
「DjangoでSTATICを設定する方法が知りたい！」
「そもそもSTATIC_ROOT、STATICFILES_DIRSとかってどんな役割？」
「初心者だし、実例もあると助かるんだけど、、、」
✔当記事を通じてお伝えすること
- 【Django】STATIC_ROOTの設定について
- STATICFILES_DIRS、STATIC_URLとの違いは？
- ローカル環境、本番環境別に実際のコード例を紹介
✔Webアプリの公開にはVPSがおすすめ
DjangoなどのWebアプリは、レンタルサーバーでの公開ができません。
自由度の高いVPSを使うのです。
VPS11社を比較し、おすすめをご紹介しています。
Webアプリの公開には、Ubuntuが搭載できるVPSを選びましょう。
Ubuntu環境が用意できたら、こちらのチュートリアルで公開方法を無料公開中。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
STATIC_ROOTの設定について
STATIC_ROOTは、ローカル環境での設定は特に不要です。
STATIC_ROOTを設定する必要があるのは、CSSファイルを一箇所に集めたい時です。
これは、Apache等を搭載したWebサーバー上でCSSを読み込みたい時などが主な場面になります。
つまり、デプロイ時にのみ「STATIC_ROOT」を設定すればOKです。
例としては、
STATIC_ROOT = BASE_DIR / "static"とした場合、下記のコマンド時に全てのCSSファイルが指定したフォルダ「static」に集まります。
$ python manage.py collectstatic
STATICFILES_DIRS、STATIC_URLとの違いは？
それでは、settings.pyにある「STATICFILES_DIRS」と「STATIC_URL」との違い、それぞれの役割は何なのでしょうか？
それぞれの役割を見ていきます。
STATICFILES_DIRS
STATICFILES_DIRSは、
- ローカル環境で{% static %}タグを使った際に見に行く先のフォルダ
- collectstaticを実行した際に見に行くフォルダ
です。
つまり、settings.py内で、
STATICFILES_DIRS = [
BASE_DIR / 'static_local',
]と指定した場合にstaticタグを使うと、「static_local」内に対象のファイルを探しに行くということになります。
ここでの設定が正しくされていないと、読み込みがされず、エラーとなります。
エラー解決の記事はこちら→☆【Django(エラー処理)】static cssファイルが読み込めない☆
STATIC_URL
STATIC_URLは、
ブラウザ上でアクセスするためのURLパス
を示しています。
つまり、STATICFILES_DIRSでどんなフォルダが指定されていようと、STATIC_URLが”/static/”の場合は、ブラウザから
localhost:8000/static/<cssファイル名>/
などとすることで、CSSファイルを見ることが可能です
ローカル環境、本番環境別に実際のコード例を紹介
実際にsettings.pyでは下記のように環境別にSTATICの設定をしています。
参考になれば幸いです。
【ローカル環境の場合】
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / 'static_local',
]【本番環境の場合】
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / 'static_local',
]
STATIC_ROOT = "<実際に保存したいフォルダの絶対パス>/static" #「/var/www/html/static/」など。まとめ
当記事の内容をまとめます。
- STATIC_ROOTは読み込んだファイルをまとめて出力する先
- STATICFILES_DIRSはCSSファイル等を読み込む先
- STATIC_URLはブラウザからアクセスするための相対URL
となります！
一部はプロジェクト開始時から設定されているものもあり、本番環境になり混乱することが過去にありました。
お困りの方の参考になっていれば幸いです。
✔ウェブアプリを公開したい方へのおすすめ記事
