質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • Python

    12257questions

    Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

  • AWS(Amazon Web Services)

    2605questions

    Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

  • Django

    1695questions

    DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

  • nginx

    1051questions

    nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

  • Gunicorn

    29questions

    Gunicorn (Green Unicorn)は、Rubyのunicornをベースに開発されたUNIX向けのPython製HTTPサーバです。他のライブラリとの依存関係がないため、容易にインストールして使用できます。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 858
退会済みユーザー

退会済みユーザー

 前提・実現したいこと

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

DEBUG = False

ALLOWED_HOSTS = ['52.194.250.14']

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'myapp/static'),]
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

●/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)

<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

urlpatterns += static(settings.STATIC_URL,
                          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
ーーーーーーーーーーーーーーーーーーーーーーーーーー
と出てきました。しかし、何が原因なのがよく分かりません。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • calkinos

    2018/09/30 21:31

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/09/30 22:30

    http://52.194.250.14:8000/  です。

    キャンセル

回答 1

checkベストアンサー

+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 23: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が読み込まれない状態です。

    もし他に何か思い当たる点がございましたら、ご教示いただきたいです。
    自分のほうでももう少し理解を深めてみます。

    キャンセル

  • 2018/09/30 23:15

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

    キャンセル

  • 2018/09/30 23:44

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

    キャンセル

  • 2018/10/01 00: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/&quot;

    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/&quot;

    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/&quot;

    キャンセル

  • 2018/10/01 21:09

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

    キャンセル

  • 2018/10/02 13: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 14: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 は同じという認識で合っているしょうか?

    キャンセル

  • 2018/10/02 23:06

    違いますね。
    その場合
    nginx.comの
    alias /home/es2-user/myproject/static;

    alias /myproject/static;
    とする必要があります。

    キャンセル

  • 2018/10/03 01:07

    ご指摘通り、nginx.conf のalias を修正したところ、出来ました。。。

    3週間ほど引っかかっていたのですが、なんとか助かりました。本当にありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • Python

    12257questions

    Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

  • AWS(Amazon Web Services)

    2605questions

    Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

  • Django

    1695questions

    DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

  • nginx

    1051questions

    nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

  • Gunicorn

    29questions

    Gunicorn (Green Unicorn)は、Rubyのunicornをベースに開発されたUNIX向けのPython製HTTPサーバです。他のライブラリとの依存関係がないため、容易にインストールして使用できます。