djangoをAWSのEC2にデプロイしても、CSSが読み込まれません

前提・実現したいこと

djangoアプリをAWS EC2にデプロイ(Nginx, gunicorn, postgresql)しました。

しかし、CSS,JSなどは反映されておらず、staticファイルが読み込めていない状況です。

発生している問題・エラーメッセージ

Chromeのデベロッパーツールのconsoleのところに、以下のメッセージが表示されました。

エラーメッセージ
GET http://52.194.250.14:8000/static/myapp/css/main.css net::ERR_ABORTED 404 (Not Found)
GET http://52.194.250.14:8000/static/myapp/js/main.js net::ERR_ABORTED 404 (Not Found)

該当のソースコード

構造は以下です（不要そうなところは省略してあります）。
myproject
├─myapp
│ ├─static
│ │ └─myapp
│ │ ├─css
│ │ │ └─main.css
│ │ └─js
│ │ └─main.js
│ └─templates
│ └─myapp
│ └─base.html
├─myproject
|　└─settings.py
│ └─wsgi.py
│ └─urls.py
└─manage.py

●settings.py

python
1
2DEBUG = False
3
4ALLOWED_HOSTS = ['52.194.250.14']
5
6STATICFILES_DIRS = [os.path.join(BASE_DIR, 'myapp/static'),]
7STATIC_URL = '/static/'
8STATIC_ROOT = os.path.join(BASE_DIR, 'static')
9

●/etc/nginx/nginx.conf

  server {
        listen 80;
        server_name 52.194.250.14;
        client_max_body_size 6G;


        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $http_host;
                proxy_redirect off;
                proxy_pass   http://127.0.0.1:8000;
        }

        location /static {
                alias /home/es2-user/myproject/static;
        }

●css読み込み (base.html)

html
1<link rel="stylesheet" href="{% static 'myapp/css/main.css' %}">

試したこと

主に以下の2つのページを見て、設定しました。
■AWSにDjangoアプリケーションをデプロイ(Nginx, gunicorn, postgresql)
https://qiita.com/pokotsun/items/1272479e36c5146c6609

■Djangoで本番環境にデプロイするときの、staticファイルの扱いについて
https://qiita.com/usodamasijp/items/2d5e9040548f7b52f5e8

・manage.py collectstatic　はしてあります。
・nginx.conf　を設定後、nginx の再起動もしてあります。
・gunicorn myproject.wsgi --bind=0.0.0.0:8000　でwsgiと接続しました。

以下のページを見て、urls.pyに下記のコードを追加しました。
■Djangoで画像が表示されない（staticエラー）
https://qiita.com/tn1117/items/6f8d8e1039a2e8ed2b5e

●myproject/myproject/urls.py

python
1urlpatterns += static(settings.STATIC_URL,
2                          document_root=settings.STATIC_ROOT)

以下のページを見て、python manage.py findstatic .　を実行したところ、
https://www.ganbaruyo.net/details/static-http-404-error/
ーーーーーーーーーーーーーーーーーーーーーーーーーー
/myproject/myapp/static
/usr/bin/.pyenv/versions/3.6.6/lib/python3.6/site-packages/django/contrib/admin/static
/usr/bin/.pyenv/versions/3.6.6/lib/python3.6/site-packages/nested_inline/static
/myproject/myapp/static
ーーーーーーーーーーーーーーーーーーーーーーーーーー
と出てきました。しかし、何が原因なのがよく分かりません。

以上となります。
原因がお分かりになる方、何卒宜しくお願い致します。

calkinos

2018/09/30 12:31

Chrome でアクセスしている URLはどこでしょうか

退会済みユーザー

2018/09/30 13:30

http://52.194.250.14:8000/　　です。

行動規範の内容に同意します

回答1件

ベストアンサー

nginxが80番ポートで待ち受けているので
http://52.194.250.14/ へアクセスして確認してみてはどうでしょうか。
http://52.194.250.14:8000/ はgunicornが待ち受けているもので、直接アクセスされることを想定していないと思います。

http://52.194.250.14/ へChromeでアクセスすると nginxが http://127.0.0.1:8000/ のコンテンツを返してくれるように設定がされていますので。

settings.py の ALLOWED_HOSTSですが127.0.0.1を指定or追加したほうが良さそうです。 nginx の proxy_passに http://127.0.0.1:8000が指定されているため。

投稿2018/09/30 13:45

calkinos

総合スコア452

退会済みユーザー

2018/09/30 14:09

ご回答ありがとうございます。 ALLOWED_HOSTSに"127.0.0.1"を追加して、http://52.194.250.14/にアクセスしましたが、 Failed to load resource: the server responded with a status of 404 (Not Found)　/static/myapp/css/main.css:1 と出て、CSSが読み込まれない状態です。もし他に何か思い当たる点がございましたら、ご教示いただきたいです。自分のほうでももう少し理解を深めてみます。

calkinos

2018/09/30 14:15

ec2側のnginxのログは見ていますでしょうか。 /var/log/nginx/error.log /var/log/nginx/access.log

退会済みユーザー

2018/09/30 14:44

権限を変更して、実行できていると思うのですが、「-bash: /var/log/nginx/error.log: Text file busy」となって、見れません。まずは、こちらを見れるようにしてみます。

退会済みユーザー

2018/09/30 15:00

error.logは下記の内容でした。ファイルが見つかっていないということかと思いますが、なぜ見つかっていないのかがわからないです。。 2018/09/30 14:52:20 [error] 29757#0: *36 open() "/home/es2-user/myproject/static/myapp/css/main.css" failed (2: No such file or directory), client: 126.198.79.214, server: 52.194.250.14, request: "GET /static/myapp/css/main.css HTTP/1.1", host: "52.194.250.14", referrer: "http://52.194.250.14/" 2018/09/30 14:52:20 [error] 29757#0: *35 open() "/home/es2-user/myproject/static/myapp/js/main.js" failed (2: No such file or directory), client: 126.198.79.214, server: 52.194.250.14, request: "GET /static/myapp/js/main.js HTTP/1.1", host: "52.194.250.14", referrer: "http://52.194.250.14/" 2018/09/30 14:52:22 [error] 29757#0: *35 open() "/home/es2-user/myproject/static/myapp/js/main.js" failed (2: No such file or directory), client: 126.198.79.214, server: 52.194.250.14, request: "GET /static/myapp/js/main.js HTTP/1.1", host: "52.194.250.14", referrer: "http://52.194.250.14/"

calkinos

2018/10/01 12:09

実際に`/home/es2-user/myproject/static/myapp/js/main.js`等のファイルがあることは確認しましたか？ファイルがないのなら `manage.py collectstatic`でうまくstaticファイルが収集できてないという事になりますが

退会済みユーザー

2018/10/02 04:58

返信ありがとうございます。はい、ファイルがあることは確認できました。はじめ、settings.pyの中のSTATICの設定に、ーーーーーーーーーーーーーーーーーーーーーーーーーー STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, 'static') ーーーーーーーーーーーーーーーーーーーーーーーーーーだけを書いて、 `manage.py collectstatic`をしたところ、新しく作られたmyproject/staticフォルダの中に、adminのstaticファイルしか収集できていませんでした。そのあと、settings.pyにーーーーーーーーーーーーーーーーーーーーーーーーーー STATICFILES_DIRS = [os.path.join(BASE_DIR, 'myapp/static'),] ーーーーーーーーーーーーーーーーーーーーーーーーーーを追記したところ、myapp以下のstaticファイルも収集されました。新しく作られたstaticフォルダを削除して、再度`manage.py collectstatic`を実行してみましたが、うまくstaticファイルが収集できているかと思います。

退会済みユーザー

2018/10/02 05:12

すごく初歩的なことかもしれませんが、念のため確認させてください。サーバーにSSHログインした画面が、現在、以下のような状況なのですが、ーーーーーーーーーーーーーーーーーーーーーーーーーー [ec2-user@ip-10-0-0-35 css]$ ーーーーーーーーーーーーーーーーーーーーーーーーーーここでpwdを実行すると、ーーーーーーーーーーーーーーーーーーーーーーーーーー [ec2-user@ip-10-0-0-35 css]$ pwd /myproject/static/myapp/css ーーーーーーーーーーーーーーーーーーーーーーーーーーとなります。このcssフォルダのすぐ下にmain.cssがあります。 /myproject/static/myapp/css　と /home/es2-user/myproject/static/myapp/css　は同じという認識で合っているしょうか？

calkinos

2018/10/02 14:06

違いますね。その場合 nginx.comの alias /home/es2-user/myproject/static; を alias /myproject/static; とする必要があります。

退会済みユーザー

2018/10/02 16:07

ご指摘通り、nginx.conf のalias を修正したところ、出来ました。。。 3週間ほど引っかかっていたのですが、なんとか助かりました。本当にありがとうございました！

行動規範の内容に同意します