LoginSignup
3
3

More than 3 years have passed since last update.

DjangoアプリをローカルからAWSに上げたらCSSが適用されなくなった話

Posted at

経緯

DjangoやAWSの学習のため、以下の記事を元にローカルでDjangoアプリを作成したあと、githubからAWSにclone。
Django(Python)でシステム開発できるようになる記事_入門編
【20分でデプロイ】AWS EC2にDjango+PostgreSQL+Nginx環境を構築してササッと公開

AWS上でpython3 manage.py runserverした後、ローカルでは管理画面に適用されていたCSSが適用されていないことに気づく。
スクリーンショット 2020-03-21 10.38.02.png

解決方法

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

これによって管理画面のCSSのパスが通った。
スクリーンショット 2020-03-21 11.16.43.png

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3