経緯
DjangoやAWSの学習のため、以下の記事を元にローカルでDjangoアプリを作成したあと、githubからAWSにclone。
Django(Python)でシステム開発できるようになる記事_入門編
【20分でデプロイ】AWS EC2にDjango+PostgreSQL+Nginx環境を構築してササッと公開
AWS上でpython3 manage.py runserver
した後、ローカルでは管理画面に適用されていたCSSが適用されていないことに気づく。
解決方法
Nginxのログを確認した結果、CSSのパスが通っていないというエラーが発生しているのを確認。
$ tail -F /var/log/nginx/error.log
(中略)
2020/03/21 01:18:04 [error] 23086#23086: *197 open() "/home/ubuntu/repository/mysite/static/admin/css/base.css" failed (2: No such file or directory), client: XXX.XXX.XXX.XXX, server: XXX.XXX.XXX.XXX, request: "GET /static/admin/css/base.css HTTP/1.1", host: "XXX.XXX.XXX.XXX", referrer: "http://XXX.XXX.XXX.XXX/admin/login/?next=/admin/"
Djangoにおける静的ファイル(static file)の取り扱いによると、パスを通すにはcollectstatic
コマンドを使えば良い模様。
settings.py
の静的コンテンツ取り扱いの設定値を以下の通り設定した後、python3 manage.py collectstatic
を実行
settings.py
# 静的ファイルの呼び出し設定を1番下に追加
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
PROJECT_NAME = os.path.basename(BASE_DIR)
#STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
$ python3 manage.py collectstatic
You have requested to collect static files at the destination
location as specified in your settings:
/home/ubuntu/repository/mysite/static
This will overwrite existing files!
Are you sure you want to do this?
Type 'yes' to continue, or 'no' to cancel: yes
119 static files copied to '/home/ubuntu/repository/mysite/static'.
staticディレクトリ配下に管理画面の静的ファイル(~/.local/lib/python3.5/site-packages/django/contrib/admin/static/
配下にあるもの)がコピーされる。
$ ls ~/repository/mysite/static
admin css images js
(css,image,jsはmkdirで作成)
$ ls ~/repository/mysite/static/admin
css fonts img js