Help us understand the problem. What is going on with this article?

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

経緯

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

tekpro
2020年4月に独立系SIerから別の独立系SIerに転職予定。 転職活動を機に自分の知識が全く足りていないことに気づきWeb系技術などを学習中。 実務経験有り:Java Servlet/C#/Linux/Node.js 学習中:Python/Django/AWS
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした