■開発者の開発者による開発者のための記録 #8 ~Djangoのstatic file(css)が反映されずハマり倒したの巻~

さくらVPSでcssを反映させるにあたってcssが何故か反映されていない問題が発生した。

コンソールには特にエラーが見られなかったのもハマりポイントだった。

同じ境遇の人が少しでも早く解決できるように共有しておこうと思う。

環境としてはUbuntu。

まずは端的に結論から

解決としてはホームディレクトリに実行権限を付与するというもの。

以下のコマンドだけで解決した。

$ sudo chmod o+x /home/ubuntu/

参考にしたサイトは以下のこちら

解決に至るまでの経緯

ここからは解決に至るまでの学んだことを記しておく。

そもそもDjangoにおけるStaticファイルとはどんなものかを知らないといけないと思い、調べていた。

そもそも、Djangoのsetting.pyには、STATIC_URLやSTATIC_ROOTやSTATICFILES_DIRSがあったので何がどう違うかを調べる必要があると思った。

Staticファイルまわりについては以下の記事が参考になった。

Django staticファイル まとめ – Qiita

Djangoにおける静的ファイル(static file)の取り扱い – Qiita

各ファイルの設定

ローカル環境で静的ファイル（css）は反映されたのは確認したのに、いざVPSでコードを試したら静的ファイルが反映されないということだったので、まず疑ったのはNginxだった。

というのもNginxにもstaticファイルの設定があるのでそこの設定がミスっているのではと思ったわけだ。

一応、幾つかのサイトを参考にして設定を試みたが、それでもcssが反映されないという現象は解決できなかった。

参考までに勉強になるサイトのリンクを載せておく。

【Django+Nginx】静的ファイルを配信する時のNginx の設定ファイルのlocationの書き方 – Qiita

Django入門｜Nginxでstaticファイルを読み込む設定｜dot blog (dot-blog.jp)

そして、現状のstaticファイル周りの設定も参考として載せておく。

これらの設定と上述の解決案である権限設定で少なくともcssは反映されている。

💡setting.pyのstaticファイル関連の記述

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

💡setting.pyと同じ階層にあるurls.pyのstaticファイル関連の記述

from django.conf.urls.static import static

urlpatterns = [
  ・・・【略】・・・
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

💡Nginxの設定ファイル内のstaticファイル関連の記述

server {
    ・・・【略】・・・

    location /static/ {
        #http://ドメイン名/static/に対応するディレクトリ
        #locationのstaticとaliasのstaticは同じ名前である必要はない
        alias /home/ubuntu/projects/django_change_view/change_view/change_view/static/;
    }
}